Kushal Jayswal Kushal Jayswal - 5 months ago 8
JSON Question

How to access "Title" from this JSON object, using AngularJS

Cinemalytics API endpoint, which gives a JSON output:
http://api.cinemalytics.com/v1/movie/releasedthisweek?auth_token=[token]&callback=JSON_CALLBACK

How to access "Title" from this JSON object, using AngularJS

[
{
"Id": "b2a1844b",
"ImdbId": "tt0315642",
"OriginalTitle": "Wazir",
"Title": "Wazir",
"Description": "'Wazir' is a tale of two unlikely friends, a wheelchair-bound chess grandmaster and a brave ATS officer. Brought together by grief and a strange twist of fate, the two men decide to help each other win the biggest games of their lives. But there's a mysterious, dangerous opponent lurking in the shadows, who is all set to checkmate them.",
"TrailerLink": "https://www.youtube.com/watch?v=gdwM7xKOph0",
"TrailerEmbedCode": "<iframe width=\"850\" height=\"450\" src=\"https://www.youtube.com/embed/gdwM7xKOph0\" frameborder=\"0\" allowfullscreen></iframe>",
"Country": "IN",
"Region": "BOLLYWOOD",
"Genre": "Drama",
"RatingCount": 16,
"Rating": 3.7,
"CensorRating": "U/A",
"ReleaseDate": "1/8/2016",
"Runtime": 102,
"Budget": 0,
"Revenue": 0,
"PosterPath": "https://s3-ap-southeast-1.amazonaws.com/cinemalytics/movie/F6E428DA299F2ECEED5B4D3B1723A202.jpg"
},
{
"Id": "1e3424cb",
"ImdbId": "tt3777164",
"OriginalTitle": "Chauranga",
"Title": "Chauranga",
"Description": "A fourteen-year-old Dalit boy (Soham Maitra) is growing up in an unnamed corner of India. His dream is to go to a town school like his elder brother (Riddhi Sen) and his reality is to look after the pig that his family owns. His only escape is to sit atop a Jamun tree and adore his beloved (Ena Saha) passing by on her scooter. His unspoken love is as true as his mother’s helplessness who cleans the cowsheds of the local strongman’s mansion, with whom she also has a secret liaison. When the boy’s elder brother comes on a vacation to the village, he soon finds out about his younger brother’s infatuation. The learned elder brother makes him realize the need to express his love and helps him write a love letter.",
"TrailerLink": "https://www.youtube.com/watch?v=Nu50meFTNU4",
"TrailerEmbedCode": "<iframe width=\"850\" height=\"450\" src=\"https://www.youtube.com/embed/Nu50meFTNU4\" frameborder=\"0\" allowfullscreen></iframe>",
"Country": "IN",
"Region": "BOLLYWOOD",
"Genre": "Drama",
"RatingCount": 17,
"Rating": 3.84706,
"CensorRating": "U/A",
"ReleaseDate": "1/8/2016",
"Runtime": 90,
"Budget": 0,
"Revenue": 0,
"PosterPath": "https://s3-ap-southeast-1.amazonaws.com/cinemalytics/movie/083FFED0BC933C2D60E8891B89269EB3.jpg"
}
]

Answer

With your current URL

http://api.cinemalytics.com/v1/movie/releasedthisweek?auth_token=<auth_token>&callback=JSON_CALLBACK

you may have cross origin issues. However you can use the (https://crossorigin.me/) service to avoid this issue.

Then, you should request:

https://crossorigin.me/http://api.cinemalytics.com/v1/movie/releasedthisweek?auth_token=<auth_token>&callback=JSON_CALLBACK

Finally, this can be easily used in your AngularJS code.

I've made a demo, using an AngularJS Service and Controller.

(function() {
  var app = angular.module("myApp", []);

  // Service
  app.service("Service", ["$http",
    function($http) {
      return {
        getData: function() {
          return $http.get("https://crossorigin.me/http://api.cinemalytics.com/v1/movie/releasedthisweek?auth_token=<auth_token>&callback=JSON_CALLBACK", null, {
            responseType: "json"
          });
        }
      };
    }
  ]);

  // Controller
  app.controller("Controller", ["$scope", "Service",
    function($scope, Service) {
      $scope.data = [];

      $scope.list = function() {
        // Calling the getData() function from the Service.
        Service.getData().then(function(response) {
          $scope.data = response.data; // Store the response in the data variable.
        }, function(response) {
          console.log(response); // if there is an error...
        });
      };
      $scope.list(); // Call to the function once.
    }
  ]);
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-app="myApp">
  <div data-ng-controller="Controller">
    <ul>
      <!-- As you have an array, you should use data-ng-repeat to show the items collection. -->
      <!-- Use data-ng-bind to show the Title (One-way data binding). -->
      <li data-ng-repeat="item in data" data-ng-bind="item.Title">
      </li>
    </ul>
  </div>
</div>

Hope this helps.