How to retrieve nested json object data with Ionic

Question

I am working with the api from The Movie Database. In my Ionic project I was able to make a http request to pull in some data for a movie. However the json object is a nested json object, so I am having some trouble trying to access the genres of a movie:

For the purpose of this question I will display 1 nested json object:

I want to show the information like so -> Genre: Action - Comedy - Drama

My code for the controller is the following:

$scope.init = function(){
        MovieService.getMovieById($stateParams.id).then(function(data){
            $scope.trending_movie = data;
            console.log($scope.trending_movie);

            $scope.genres = data.genres;
            console.log($scope.genres);

        });
    }

If I do this bit of code:

$scope.genres = data.genres;

It just returns met the json object of the genres like so:

The thing is now that I am able to read out the genres but because I access the data with a ng-repeat it will show like this:

How to get the genres on 1 line without having to repeat the word "Genre"?

Here is my html code:

<div ng-repeat="genre in genres">
    <p class="movie-info-p">Genre: {{genre.name}}</p>
</div>

MayK · Accepted Answer · 2015-11-17 13:56:28Z

1

you should get "Genre:" out of your ng-repeat and if you want your genres to be in the same line, you shouldn't put them in

tag.

There is this solution:

<div> Genre:
 <div ng-repeat="genre in genres">
   <span class="movie-info-p">{{genre.name}}</span>
 </div>
</div>

Another solution is to generate this string in the controller with a for loop and send it to the view

answered Nov 17, 2015 at 13:56

MayK

1,3291 gold badge10 silver badges25 bronze badges

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

1 Comment

GY22 Over a year ago

thanks this works but even with the span its not coming on the same line so I guess i got to tweak it with some css

Collectives™ on Stack Overflow

How to retrieve nested json object data with Ionic

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related