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 — ilearn
– ilearn, Commented Feb 28, 2017 at 14:09

Groben · Accepted Answer · 2017-02-28 10:48:20Z

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, 2017 at 10:48

answered Feb 28, 2017 at 10:39

Groben

1,3862 gold badges10 silver badges29 bronze badges

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

3 Comments

ilearn Over a year ago

Sorry avantika i have tried that but its not working.

Groben Over a year ago

What do you mean "how" ?

Groben Over a year ago

I did, it's the <div ng-repeat"torrent... in my response. It will loop over each torrent and display its number of seeds

Avantika Saini · Accepted Answer · 2017-02-28 10:25:24Z

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, 2017 at 10:25

Avantika Saini

7924 silver badges9 bronze badges

Comments

Rohìt Jíndal · Accepted Answer · 2017-02-28 13:25:04Z

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>

Collectives™ on Stack Overflow

how to access nested json element in angular js

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related