1

I am facing problem in iterating an object,in which i have pushed the same property(value) from array of objects.

    {
     id:1,
     id:2,
     id:3
    }

I want to display these id's in different rows of table like: 1 2 3

Any help would be appreciated

2
  • will the key be id for all the properties of the object? Commented Jul 10, 2016 at 14:49
  • Do you have anything else in array to show in table? Commented Jul 10, 2016 at 14:49

4 Answers 4

1

Firstly, you can't have the same key repeated in an object. Assuming you have an array of objects called 'idObjects': [{id: 1}, {id: 2}, {id: 3}], you can use ng-repeat on the tr element like this:

<table>
  <tr ng-repeat="idObj in idObjects">
    <td>{{ idObj.id }}</td>
  </tr>
</table>
Sign up to request clarification or add additional context in comments.

Comments

1

Try this:

angular.module('myapp', [])
.controller("mycontroller", function($scope) {
    $scope.items = [
      {
        "id": 1        
      }
      ,{
        "id": 2
      }
      ,{
        "id": 3
      }
    ];
  });
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
<div ng-app="myapp" ng-controller="mycontroller" class="container">
  <h4>My items</h4>
  <ul class="list-group">
    <li class="list-group-item" ng-repeat="item in items ">{{item.id}}</li>
  </ul>
</div>

Comments

0

First convert the json object into an array and assign it to a $scope variable and then use ng-repeat to iterate over the array.

Controller code:

var jsonObj = { "id1":1, "id2": 2, "id3": 3 }; // your object

// constructing the array with your object;
$scope.idArray = Object.keys(jsonObj).map(function(k) { return jsonObj[k] });

HTML code:

<table>
    <tr ng-repeat="id in idArray track by $index">
        <td>{{ id }}</td>
    </tr>
</table>

Hope this solves the issue.

6 Comments

thanks for your help.It works for me,but i have one doubt could you plz help me
@rama Yes sure. What is it?
actually i have <tr> with 3 td's in table ,for first 2 td's i have given ng-repeat in <tr>,but for third td i have to take seperate ng-repeat is it possible
I don't think it is possible. You need to have a single ng-repeatto avoid repetitions or duplicates. But you can construct an array with the data required for the first two <td>'s and also third <td> and have an ng-repeat. This is definitely possible
for that td i have to get those id's,but when i am directly giving ng-repeat to that td it is generating one more column and i also tried by using span but it is displaying all the object properties in same line..can you please help me
|
0
var values = { id:1, id:2, id:3 };
var $scope.objToArr = [];
angular.forEach(values, function(value, key) {
  $scope.objToArr.push(value);
});

in your html

<tr ng-repeat="idval in objToArr">
    <td>{{ idval}}</td>
  </tr>

it works even for different keys also.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.