I want to print long_name from the json data using angularjs - angularjs

Question

I am trying to fetch the long_name from the below JSON data using angular js but unable to fetch.
CODE:
{
"results" : [
{
"address_components" : [
{
"long_name" : "700109",
"short_name" : "700109",
"types" : [ "postal_code" ]
},
{
"long_name" : "Kolkata",
"short_name" : "Kolkata",
"types" : [ "locality", "political" ]
},
{
"long_name" : "West Bengal",
"short_name" : "WB",
"types" : [ "administrative_area_level_1", "political" ]
},
{
"long_name" : "India",
"short_name" : "IN",
"types" : [ "country", "political" ]
}
],
"formatted_address" : "Kolkata, West Bengal 700109, India",
"geometry" : {
"bounds" : {
"northeast" : {
"lat" : 22.6902065,
"lng" : 88.38850289999999
},
"southwest" : {
"lat" : 22.6715168,
"lng" : 88.35748319999999
}
},
"location" : {
"lat" : 22.6808046,
"lng" : 88.37577829999999
},
"location_type" : "APPROXIMATE",
"viewport" : {
"northeast" : {
"lat" : 22.6902065,
"lng" : 88.38850289999999
},
"southwest" : {
"lat" : 22.6715168,
"lng" : 88.35748319999999
}
}
},
"place_id" : "ChIJ1-N4xFyc-DkRzfGq4MWZa1g",
"types" : [ "postal_code" ]
}
],
"status" : "OK"
}
I am using the following code to solve this problem but it does not show anything
CODE:
<div ng-app="myApp" ng-controller="myController">
<ul>
<li ng-repeat="record in records">
{{record.long_name}}
</li>
</ul>
</div>
<script>
var app=angular.module("myApp",[]);
app.controller("myController",function($scope,$http){
$http.get("https://maps.googleapis.com/maps/api/geocode/json?address=700109&key=AIzaSyDNK47S-6brePCvm1Hr6L7RFWAZvsngj1E")
// $http.get("https://www.styfash.com/post/data.json")
.then(function(result){
$scope.records=result.data.results.address_components;
});
});
</script>
Whenever I am trying to using $scope.records=result.data.results and printing {{record.address_components}} it is working properly but whenever I am trying to use the above-mentioned code it is not showing anything on the screen.
I am new to angular js.

Answer 1

Try
$scope.records=result.data.results[0].address_components;

Answer 2

What you should understand is, result.data.results is an array. Therefore you should traverse through that to obtain the child records. Check the code sample below.
var app = angular.module('myApp', []);
app.controller('myController', function ($scope, $http) {
$http.get("https://maps.googleapis.com/maps/api/geocode/json?address=700109&key=AIzaSyDNK47S-6brePCvm1Hr6L7RFWAZvsngj1E")
.then(function(result){
$scope.records=result.data.results;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
<ul>
<div ng-repeat="record in records">
<li ng-repeat="address in record.address_components">
{{address.long_name}}
</li>
</div>
</ul>
</div>
if you just need the first record, change this line in your code
$scope.records=result.data.results.address_components;
to this
$scope.records=result.data.results[0].address_components;