parsing through json list in angularjs

Question

I am parsing through each dictionary inside main list to get the data related to particular "version". Is there any effective way to do it ?

app.html:

<select ng-model="versionKey">
    <option ng-repeat="model in models">{{ model.version }}</option>    
</select>

<div ng-repeat="stuff in models">
    <div ng-if="stuff.version == versionKey">
        <ul>
            <li ng-repeat="instance in stuff.records">
                {{ instance }}
            </li>
        </ul>
    </div>
</div>

json file:

[
    {"records": [{"model": "bada", "crashes": 1}], "apikey": "2", "_id": "52c0417ce1382321ef038106", "version": "6"},

    {"records": [{"model": "sam", "crashes": 1}], "apikey": "2", "_id": "52c0417ce1382321ef038109", "version": "4"}
]

that's a just a sample, actual data is in multiples of 10.It is creating empty div elements for all the items. — Rakesh Godhala
– Rakesh Godhala, Commented Jan 3, 2014 at 7:42

hgoebl · Accepted Answer · 2014-01-03 08:21:53Z

2

You could do the filtering in your controller and remove the ng-if:

// in your controller

var filterModelsForSelectedVersion = function (versionKey) {
    return $scope.models.filter(function (model) {
        return model.version === versionKey;
    });
};

$scope.modelsForSelectedVersion = [];

$scope.$watch('versionKey', function (versionKey) {
    $scope.modelsForSelectedVersion = filterModelsForSelectedVersion(versionKey);
});

<div ng-repeat="stuff in modelsForSelectedVersion">
    <div><!-- maybe the div is not necessary? -->
        <ul>
            <li ng-repeat="instance in stuff.records">
                {{ instance }}
            </li>
        </ul>
    </div>
</div>

Please note that I used Array.prototype.filter. If you have to support legacy browsers you have to add a polyfill for it or write it the "old style".

answered Jan 3, 2014 at 8:21

hgoebl

13.1k9 gold badges51 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

parsing through json list in angularjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related