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

Question

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 1

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.

Answer 2

If the JSON was in a variable movies:
movies.map(function (m) {return m.Title;});
See JSbin example.
With querying the endpoint:
$http.get('http://api.cinemalytics.com/v1/movie/releasedthisweek?auth_token=59CD0710AD10858DD65FE815F0181603&callback=JSON_CALLBACK')
.then(function(res) {
$scope.titles = res.map(function (m) {return m.Title;});
});
$scope.titles would hold the extracted titles.

Answer 3

With no other context or code attempts that you have shown, here is what the simple Angular GET request would look like.
angular.module('myApp', [])
.controller('myController', function($http) {
var vm = this;
getObject();
function getObject() {
return $http.get('http://api.cinemalytics.com/v1/movie/releasedthisweek?auth_token=59CD0710AD10858DD65FE815F0181603&callback=JSON_CALLBACK')
.then(function(res) {
vm.object = res.data;
});
});
<div ng-app="myApp">
<div ng-controller="myController as vm" ng-repeat="item in vm.object track by item.Id">
Item {{item.Id}} - Title: {{item.Title}}
</div>
</div>