I am looking to extract data from a JSON response containing Country & State information. Here is the URL for the JSON data:
{
"China": [
"Guangzhou",
"Fuzhou",
"Beijing",
"Baotou",
"Hohhot",
"Guiyang",
"Yinchuan",
"Nanjing",
"Changzhou",
"Chuzhou",
"Hefei",
"Jinan",
"Qingdao",
"Harbin",
"Zhaodong",
"Taiyuan",
"Xi'an",
.
.
.
}
]
The desired output should look like this:
- Guangzhou, China
- Taiyuan, China
I am currently using AngularJS, and here is a snippet from my controllers.js file.
var
apiUrl = {
countryStateList: 'https://gist.githubusercontent.com/mayurah/5f4a6b18b1aa8c26910f/raw/countriesToCities.json'
};
countryData.controller('countryDataCtrl', ['$scope', '$http', function($scope, $http) {
$http.get(apiUrl.countryStateList).success(function(data) {
// console.log(data);
$scope.countryStateList = data;
});
}]);
In my HTML file, the code looks similar to this:
<ul ng-repeat="country in countryStateList">
<li>{{ STATE_NAME, COUNTRY_NAME }}</li>
</ul>
- STATE_NAME & COUNTRY_NAME are placeholders for display purposes. They should be replaced with Angular code.
The challenge lies in the fact that the JSON element names are the country names themselves. Any guidance on how to parse this data in AngularJS/Javascript would be greatly appreciated.