how to access nested json element in angular js

Question

**I want to display seeds or any other data present in "torrents" in html using angular **

This code works fine but when i try to display seeds it displays nothing.

HTML CODE

 <section class="list">
   <article ng-repeat="object in yifito"> 
    <a href="{{object.url}}" target="_system" onclick="window.open('{{object.url}}',_system,'location=yes')" class="item">
      <img ng-src="{{object.small_cover_image}}">
     <h2 class="noWhiteSpace">{{object.title}}</h2>
     <p class="noWhiteSpace">{{object.genres}}</p>
     <p class="noWhiteSpace">Year {{object.year}} Rating {{object.rating}}</p>
    <p class="noWhiteSpace">{{object.movies.seeds}}</p>


     </a>
   </article>
    </section>

angular Code

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

app.controller('controller',function($scope,$http){

$scope.br =[]owse;
  $http({
method: "GET",
url: 

 })
  .then(function(toData){
   $scope.to= toData.data.data.movies;
    console.log(data);
  })



})

[1]:

Possible duplicate of [How to order data in ng-repeat with nested objects as JSON data in angular js](http://stackoverflow.com/questions/25164001/how-to-order-data-in-ng-repeat-with-nested-objects-as-json-data-in-angular-js) — ilearn, Feb 28 '17 at 14:09

score 0 · Answer 1 · answered Feb 28 '17 at 10:25

0

Simply access seeds by modifiying your code to :

<p class="noWhiteSpace">{{object.seeds}}</p>

This is because the structure of your object $scope.yifito is as follows:

[
{title: abc,
 genere: afsdf,
 year: 2016,
 rating: 8,
 seeds: 234},
{...}
]

answered Feb 28 '17 at 10:25

Avantika Saini

792
4
9

Groben · Accepted Answer · 2017-02-28T10:48:20.133

0

Your seeds field is inside torrents. The field torrents is a list. So, to display data from torrents, you must use a loop.

<article ng-repeat="object in yifito"> 
    <a href="{{object.url}}" target="_system" onclick="window.open('{{object.url}}',_system,'location=yes')" class="item">
        <img ng-src="{{object.small_cover_image}}">
        <h2 class="noWhiteSpace">{{object.title}}</h2>
        <p class="noWhiteSpace">{{object.genres}}</p>
        <p class="noWhiteSpace">Year {{object.year}} Rating {{object.rating}}</p>
        <div ng-repeat="torrent in object.torrents">
            <p class="noWhiteSpace">{{torrent.seeds}}</p>
        </div>
    </a>
</article>

It will display seeds for each torrent of your movie.

edited Feb 28 '17 at 10:48

answered Feb 28 '17 at 10:39

Groben

1,374
2
10
29

Sorry avantika i have tried that but its not working. – ilearn Feb 28 '17 at 11:14
What do you mean "how" ? – Groben Feb 28 '17 at 11:16
I did, it's the
– Groben Feb 28 '17 at 11:50

score 0 · Answer 3 · answered Feb 28 '17 at 13:25

Some observations :

seeds property is inside the object of a torrent array.

DEMO

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

app.controller('MyCtrl',function($scope,$http){

$scope.yifito =[];
  $http({
method: "GET",
url: "https://yts.ag/api/v2/list_movies.json?limit=50"

 })
  .then(function(yifitoData){
   $scope.yifito = yifitoData.data.data.movies;
    console.log($scope.yifito);
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<div ng-repeat="object in yifito"> 
    <a href="{{object.url}}" target="_system" onclick="window.open('{{object.url}}',_system,'location=yes')" class="item">
     <img ng-src="{{object.small_cover_image}}">
     <h2 class="noWhiteSpace">{{object.title}}</h2>
     <p class="noWhiteSpace">{{object.genres}}</p>
     <p class="noWhiteSpace">Year {{object.year}} Rating {{object.rating}</p>
     <div ng-repeat="item in object.torrents">
        <p class="noWhiteSpace">{{item.seeds}}</p>
     </div>
     </a>
</div>
</div>

how to access nested json element in angular js

3 Answers3