CODEWITHSUNDEEP
javascriptarraysangularjsjson
UI_Dev
UI_Dev

Reputation: 3427

Displaying array object in ng-repeat angularjs

I have a simple json load list which uses angular directive to render the data from local json.

I wanted to display likes in a separate column and dislikes in the separate column. but I tried the below code snippet, but achieved likes in first column but not sure how to render dislikes in the second column.

Here is the HTML

            <ul class="nav">
                <li class="active" ng-repeat="item in artists.People">
                    <a href ng-click='setSelectedArtist(item)'>{{item.name}} 
                    </a>
                </li>
            </ul>

          <!-- Displaying table -->

            <table>  
                <tr>  
                   <th>Likes</th> 
                   <th>Dislikes</th>  
                </tr>  
                <tr ng-repeat = "favourites in items.Likes">  
                   <td>{{ favourites }}</td>  
                    /* stuck here */
                </tr>  

             </table>

JSON:

{
    "People":[
       {
          "name":"Andrew Amernante",
          "rating":3,
          "img":"http://www.fillmurray.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"
          ]
       },
       {
          "name":"Frank Wang",
          "rating":5,
          "img":"http://www.fillmurray.com/200/201",
          "Description":"Before errors, mails were only pressures. This is not to discredit the idea that a magic is the prose of anelizabeth. This could be, or perhaps some posit the outmost coil to be less than dedal. Some assert that those treatments are nothing more than carp.",
          "Likes":[
             "Frank",
             "Manchester United",
             "Football",
             "Programming"
          ],
          "Dislikes":[
             "Dogs",
             "Long walks on the beach",
             "Chopin",
             "Tacos"
          ]
       }
]
}

Controller:

$http.get('people.json').success(function(response) {
      $scope.artists = response;

  });

$scope.setSelectedArtist = function(artist) {
      $scope.items = artist;

  };

Upvotes: 1

Views: 40

Answers (3)

mk358
mk358

Reputation: 54

This code will work even when the lengths of Likes and Dislikes are not equal

<table>
   <thead>
      <th>Likes</th>
      <th>Dislikes</th>
   </thead>
   <tbody ng-repeat="items in test.People">
      <tr ng-repeat="i in range(items.Likes.length, items.Dislikes.length) track by $index">
         <td>{{items.Likes[$index]}}</td>
         <td>{{items.Dislikes[$index]}}</td>
      </tr>
   </tbody>
</table>

    $scope.range = function(a,b) {
        var n = Math.max(a,b);
        return new Array(n);
    };

Sample JSON

{
    "People":[
       {
          "name":"Andrew Amernante",
          "rating":3,
          "img":"http://www.fillmurray.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",
             "Batteries",
             "Football",
             "Dead Batteries"
          ]
       },
       {
          "name":"Frank Wang",
          "rating":5,
          "img":"http://www.fillmurray.com/200/201",
          "Description":"Before errors, mails were only pressures. This is not to discredit the idea that a magic is the prose of anelizabeth. This could be, or perhaps some posit the outmost coil to be less than dedal. Some assert that those treatments are nothing more than carp.",
          "Likes":[
             "Frank",
             "Manchester United",
             "Football",
             "Programming",
             "Dead Batteries"
          ],
          "Dislikes":[
             "Dogs",
             "Long walks on the beach",
             "Chopin",
             "Tacos"
          ]
       }
    ]
}

Output:

Sample output

Upvotes: 2

santho
santho

Reputation: 386

try this code :

  <table ng-repeat="items in artists.People">  
            <tr>  
               <th>Likes</th> 
               <th>Dislikes </th>  
            </tr>  
           <tr ng-if="items.Likes.length <= items.Dislikes.length" ng-repeat="d in items.Dislikes track by $index">
               <td>{{d}}</td>
               <td ng-if="items.Likes[$index]">{{items.Likes[$index]}}</td>
            </tr>
            <tr ng-if="items.Likes.length > items.Dislikes.length" ng-repeat="d in items.Likes track by $index">
                    <td>{{d}}</td>
                    <td ng-if="items.Dislikes[$index]">{{items.Dislikes[$index]}}</td>
                 </tr>

         </table>

Upvotes: 1

amrender singh
amrender singh

Reputation: 8239

Try the following:

<tr ng-repeat = "favourites in items.Likes">  
       <td>{{ favourites }}</td>  
       <td ng-if="$index <= items.Dislikes.length-1">{{items.Dislikes[$index]}}</td>


</tr>

Upvotes: 1

Related Questions