Angularjs to display 2 arrays from a json object in two different tabledata of a tablerow

Question

I have a JSON object containing two array objects. The object is store in $scope.person. Now i want to display the Likes array in first column and Dislikes array in the second column of the table. Assume that the length of both arrays are similar so no. of rows will be similar as well. What could be the best way to do it? Check the JSON object below.

{
  "name": "Justin Clark",
  "rating": 3,
  "img": "http://www.fillmy.com/200/200",
  "Description": "Glutenfree cray cardigan vegan. Lumbersexual pork belly blog, fanny pack put a bird on it selvage",
  "Likes": [
    "Dogs",
    "Long walks on the beach",
    "Chopin",
    "Tacos"
  ],
  "Dislikes": [
    "Birds",
    "Red things",
    "Danish food",
    "Dead Batteries"
  ]
}

The table structure looks like this.

<table class="table table-striped">
  <thead> 
    <tr> <th>Likes</th> <th>Dislikes</th></tr> 
  </thead>   
  <tbody> 
    <tr ng-repeat="pl in person"> 
      <td>{{pl.Likes}}</td> <td>{{pl.Dislikes}}</td> 
    </tr>
  </tbody>
</table>

i tried doing that, but im not sure how to do it. how can we have two ng-repeat in one tr ? — Sarmad Asif
– Sarmad Asif, Commented Oct 22, 2016 at 4:20
What has number of rows got to do with number of columns? Number of rows will correspond to the number of person objects. Whilst the number of columns will depend upon the number of attributes in each person object, isn't it? — sisyphus
– sisyphus, Commented Oct 22, 2016 at 5:07

tanmay · Accepted Answer · 2016-10-22 04:54:31Z

2

You can run the ng-repeat on one of the arrays (take Likes) and using the $index of ng-repeat you can have the Dislikes array mapped as well.

Something like this..

<tr ng-repeat="like in data.Likes">
  <td>{{like}}</td> 
  <td>{{data.Dislikes[$index]}}</td>
</tr>

DEMO

edited Oct 22, 2016 at 4:54

answered Oct 22, 2016 at 4:39

tanmay

7,9112 gold badges23 silver badges39 bronze badges

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

3 Comments

Sarmad Asif Over a year ago

Thank you tanmay. That works. Can we do like: setting the ng-repeat="like in data" and have the td saying {{data.Likes[$index]}} for Likes and {{data.Dislikes[$index]}} for Dislikes?

tanmay Over a year ago

@SarmadAsif absolutely

Sarmad Asif Over a year ago

Awesome. Thanks again!

Sajeetharan · Accepted Answer · 2016-10-22 04:48:47Z

1

You can do this,

<body ng-app='app'>
  <div class="media-list" ng-controller="dishDetailController">
    <table>
      <tr>
        <th>Likes</th>
        <th>Dislikes</th>
      </tr>
      <tr ng-repeat="customer in data">
        {{customer}}
        <td>{{customer.Likes}}</td>
        <td>{{customer.Dislikes}}</td>
      </tr>
    </table>
  </div>
</body>
</html>

DEMO

EDIT:

Based on assumption your data is not an array,

DEMO

edited Oct 22, 2016 at 4:48

answered Oct 22, 2016 at 3:52

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

8 Comments

Sarmad Asif Over a year ago

Thanks for solution but in the demo, it doesnt display in separate rows.

Sajeetharan Over a year ago

you need to display the child array as rows?

Sarmad Asif Over a year ago

I want to show Likes array in first column as different rows and Dislike array in the second column as different rows. Since the length of both arrays are similar, which is 4. So there would be 4 rows in total.

Sajeetharan Over a year ago

@SarmadAsif I thought your data is an array, check this plunker plnkr.co/edit/kDJe6wQ0WJnFvQ7B03Oz?p=preview

Sajeetharan Over a year ago

@tanmay No i dint copy, its a simple thing bro. i mentioned the reason why it dint work, i was under the impression its a json array. If you want i can delete my answer.

|

Collectives™ on Stack Overflow

Angularjs to display 2 arrays from a json object in two different tabledata of a tablerow

2 Answers 2

3 Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related