Angular ng-repeat on Son data which has arrays

Question

{
  "adult": false,
  "backdrop_path": "/oja259HY4XlSTSnBwoErZ8A080x.jpg",
  "belongs_to_collection": {
    "id": 529,
    "name": "Wallace & Gromit Collection",
    "poster_path": "/993pCCMO9g9RQUtNDxQgE1B330H.jpg",
    "backdrop_path": "/huyrvVKEKa9czUY89fnvaAVAtkX.jpg"
  },
  "budget": 0,
  "genres": [
    {
      "id": 12,
      "name": "Adventure"
    },
    {
      "id": 16,
      "name": "Animation"
    },
    {
      "id": 35,
      "name": "Comedy"
    },
    {
      "id": 878,
      "name": "Science Fiction"
    },
    {
      "id": 10751,
      "name": "Family"
    }
  ],
  "homepage": "http://www.wallaceandgromit.com/films/a-grand-day-out",
  "id": 530,
  "imdb_id": "tt0104361",
  "original_language": "en",
  "original_title": "A Grand Day Out",
  "overview": "Wallace and Gromit have run out of cheese and this provides an excellent excuse for the animated duo to take their holiday on the moon, where, as everyone knows, there is ample cheese. The moon is inhabited by a mechanical caretaker, who is not too happy about the two visitors from earth that nibble on the moon.",
  "popularity": 1.468545,
  "poster_path": "/jgQU84QuFQ4yofDmGYzOsXLEQj9.jpg",
  "production_companies": [
    {
      "name": "Aardman Animations",
      "id": 297
    }
  ],
  "production_countries": [
    {
      "iso_3166_1": "GB",
      "name": "United Kingdom"
    }
  ],
  "release_date": "1990-05-18",
  "revenue": 0,
  "runtime": 23,
  "spoken_languages": [
    {
      "iso_639_1": "en",
      "name": "English"
    }
  ],
  "status": "Released",
  "tagline": "Join the ultimate human-canine team as they blast off in a home-made rocket to see if the moon is really made of cheese.",
  "title": "A Grand Day Out",
  "video": false,
  "vote_average": 7.3,
  "vote_count": 96
}

I need to display this data in the html ordered list using angular js, I am not sure how to iterate through the genres,production_countries,spoken_languages. Please let me know how to display it in the HTML page

Answer 1

If I understand you correctly:

angular.module('app', []).
controller('ctrl', function($scope) {
  $scope.data = data;
});

var data = {
  "adult": false,
  "backdrop_path": "/oja259HY4XlSTSnBwoErZ8A080x.jpg",
  "belongs_to_collection": {
    "id": 529,
    "name": "Wallace & Gromit Collection",
    "poster_path": "/993pCCMO9g9RQUtNDxQgE1B330H.jpg",
    "backdrop_path": "/huyrvVKEKa9czUY89fnvaAVAtkX.jpg"
  },
  "budget": 0,
  "genres": [
    {
      "id": 12,
      "name": "Adventure"
    },
    {
      "id": 16,
      "name": "Animation"
    },
    {
      "id": 35,
      "name": "Comedy"
    },
    {
      "id": 878,
      "name": "Science Fiction"
    },
    {
      "id": 10751,
      "name": "Family"
    }
  ],
  "homepage": "http://www.wallaceandgromit.com/films/a-grand-day-out",
  "id": 530,
  "imdb_id": "tt0104361",
  "original_language": "en",
  "original_title": "A Grand Day Out",
  "overview": "Wallace and Gromit have run out of cheese and this provides an excellent excuse for the animated duo to take their holiday on the moon, where, as everyone knows, there is ample cheese. The moon is inhabited by a mechanical caretaker, who is not too happy about the two visitors from earth that nibble on the moon.",
  "popularity": 1.468545,
  "poster_path": "/jgQU84QuFQ4yofDmGYzOsXLEQj9.jpg",
  "production_companies": [
    {
      "name": "Aardman Animations",
      "id": 297
    }
  ],
  "production_countries": [
    {
      "iso_3166_1": "GB",
      "name": "United Kingdom"
    }
  ],
  "release_date": "1990-05-18",
  "revenue": 0,
  "runtime": 23,
  "spoken_languages": [
    {
      "iso_639_1": "en",
      "name": "English"
    }
  ],
  "status": "Released",
  "tagline": "Join the ultimate human-canine team as they blast off in a home-made rocket to see if the moon is really made of cheese.",
  "title": "A Grand Day Out",
  "video": false,
  "vote_average": 7.3,
  "vote_count": 96
};

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <h3>genres</h3>
  <ul id="genres">
    <li ng-repeat="g in data.genres">
      {{g.name}}
    </li>
  </ul>
  <h3>countries</h3>
  <ul id="countries">
    <li ng-repeat="g in data.production_countries">
      {{g.name}}
    </li>
  </ul>
  <h3>languages</h3>
  <ul id="languages">
    <li ng-repeat="g in data.spoken_languages">
      {{g.name}}
    </li>
  </ul>
</div>