CODEWITHSUNDEEP
javascriptangularjs
Xogle
Xogle

Reputation: 363

Hard time using JS object in ng-repeat

I have a strangely structured object which I am trying to convert to an array so that I am able to use filters with ng-repeat.

Here is an example object:

var sysData = {
"walkerduct": {
    "id": 0,
    "uri": "walkerduct",
    "name": "Walkerduct",
    "imageS": "img/callcenter.jpg",
    "imageL": "img/callcenter.jpg",
    "copy": "Walkerduct info",
    "relatedSys": [],
    "relatedApp": []
 }
}

My controller where I attempt to convert it to an array,

inFloorControllers.controller('ApplCtrl', ['$scope', '$routeParams',
function ($scope, $routeParams) {
    //alert("OtherCtrl hit");
    $scope.appData = appData;
    $scope.sysData = sysData;
    $scope.title = appData.title;
    $scope.sysArr = [];
    var hasData = true;
    var idx = 0;
    while (hasData) {
        var data = sysData[idx];
        alert("yo");
        if (data) {
            $scope.sysArr.push(data);
            idx++;
        }
        else {
            hasData = false;
        }
    }
    for (i = 0; i < $scope.sysArr.length; i++) {
        alert($scope.sysArr[i]);
    }
}
]);

And finally my HTML,

<div ng-repeat="sys in sysArr | limitTo:3">
    <a href=#/systems/{{sys.uri}}>{{sys.name}}</a>
</div>

I'm not seeing what I am doing wrong... it doesn't even hit if(data)... thanks.

Upvotes: 0

Views: 89

Answers (2)

Josep
Josep

Reputation: 13071

Just use Object.keys combined with Array.map, like this:

inFloorControllers.controller('ApplCtrl', ['$scope', '$routeParams',
function ($scope, $routeParams) {
    $scope.appData = appData;
    $scope.sysData = sysData;
    $scope.title = appData.title;
    $scope.sysArr = Object.keys($scope.sysData).map(function(key){ 
                       return $scope.sysData[key];
                    });
}
]);

If you need support for IE8 you will need the polyfill for the map function.

Upvotes: 3

Rinrub
Rinrub

Reputation: 127

That is not a valid json. remove the last comma

    {
"walkerduct": {
    "id": 0,
    "uri": "walkerduct",
    "name": "Walkerduct",
    "imageS": "img/callcenter.jpg",
    "imageL": "img/callcenter.jpg",
    "copy": "Walkerduct info",
    "relatedSys": [],
    "relatedApp": []
 }
}

Upvotes: -1

Related Questions