Sarmad Asif Sarmad Asif - 1 month ago 12
AngularJS Question

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

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": "GlutenĀ­free 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>

Answer

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