javascript - ng-repeat loop through object in object - Stack Overflow

admin管理员组

文章数量:1291766

I'm confused how to loop through this data model.

$scope.object = [ {person1: {name: 'jon', height: 100}} , {person2: {name: 'joe', height: 200}}, {person3: {name: 'lisa', height: 150}}]

I'm trying ng-repeat like this

<tr ng-repeat = "person in object[0]">
    <td>{{person.name}}</td>
</tr>

This of course will only show 'jon'. How can I get all person(x).name? I could name them all person instead of person1, person2, but my data model for my project wont allow that. What can do?

Thanks

I'm confused how to loop through this data model.

$scope.object = [ {person1: {name: 'jon', height: 100}} , {person2: {name: 'joe', height: 200}}, {person3: {name: 'lisa', height: 150}}]

I'm trying ng-repeat like this

<tr ng-repeat = "person in object[0]">
    <td>{{person.name}}</td>
</tr>

This of course will only show 'jon'. How can I get all person(x).name? I could name them all person instead of person1, person2, but my data model for my project wont allow that. What can do?

Thanks

• javascript
• angularjs
• loops
• angularjs-ng-repeat

Share Improve this question Follow edited Jun 26, 2015 at 16:26 Pankaj Parkar 136k2323 gold badges240240 silver badges303303 bronze badges asked Jul 3, 2014 at 16:47 GaruukGaruuk 2,25466 gold badges3434 silver badges6161 bronze badges 11

• Have you tried to achieve this writing a directive? You would first transform the model, then send it to scope – Gui Commented Jul 3, 2014 at 16:49
• 2 The data is inconsistent. Could you please post the correct object data? – Raghavendra Commented Jul 3, 2014 at 16:52
• @GruffBunny That wouldn't work because 'person in object' would just return '{person1:{..}}', etc since each index in the object array is an object. – Garuuk Commented Jul 3, 2014 at 17:05
• @Raghav What do you mean the data is inconsistent? – Garuuk Commented Jul 3, 2014 at 17:06
• 2 @Garuuk: what you have is not valid JavaScript. Post the real structure. – JB Nizet Commented Jul 3, 2014 at 17:07

 |  Show 6 more ments

2 Answers 2

Sorted by: Reset to default 7

Setting aside the missing braces in your object data, you could do something silly like

<tr ng-repeat="person in object">
    <td ng-repeat="keys in person">
        {{keys.name}}
    </td>   
</tr>

...which would do what you want (the inner ng-repeat will only loop one time, since each "person" only has one key ("person1", "person2"...) But a better solution is probably to change your data structure to either remove those unnecessary person1, person2, etc identifiers and treat it as an array:

$scope.object = [
    {name:'Joe'},
    {name:'Susan'}
];

or remove the array brackets and treat it as a hash table:

$scope.object = {
    person1: {name:'Bob'}, 
    person2: {name:'Ted'}
};

With either of those data structures, your HTML template would be the same:

<tr ng-repeat="person in object">
    <td>{{person.name}}</td>
</tr>

Right now you're trying to structure it as both an array and a hash, which gives no benefit and just makes accessing the data clumsier.

If your Model going to return data in person1, person2, person3, etc.. Here is answer in directive way.

Below is HTML

<div ng-controller="MyCtrl">
   <div ng-repeat = "person in object">
      <div make-json> </div>
   </div>
</div>

And here is my controller and directive

var app = angular.module('myApp', []);

function MyCtrl($scope) {
    $scope.object = [{
        person1: {
            name: 'jon',
            height: 100
        }
    }, {
        person2: {
            name: 'joe',
            height: 200
        }
    }, {
        person3: {
            name: 'lisa',
            height: 150
        }
    }];
}

app.directive('makeJson', function() {
    return {
        restrict: 'AEC',
        link: function(scope, elm, attrs) {
            var formattedText = "person";
            formattedText = formattedText + (parseInt(scope.$index) + 1);
            elm.text(scope.person[formattedText.toString()].name);
        }
    };
});

Hope this could be useful to you. Thanks.

本文标签： javascriptngrepeat loop through object in objectStack Overflow