Imagine having an animals.json file with the following details:
{
"animals": {
"elephant": {
"size": "large"
},
"mouse": {
"size": "small"
}
}
}
Now, let's say this data is being added to the controller scope:
animalsApp.controller('animalsCtrl', function($scope, $http){
$http.get('../../animals.json').success(function(data){
$scope.animals = data.animals;
});
});
Everything works smoothly until there's a need to fetch additional information from an API and update $scope.animals with it. The new data looks like this:
{
"animal_name": "Leonardo"
}
This data is retrieved by accessing the API using the following query:
http://api.someapi.com/animals/{animals.elepahant} // returns above json
In this scenario, consider {animals.elaphant} as the result obtained from looping through the JSON, extracting specific values, querying the remote API with those variables, updating the JSON with the new data, and then returning the modified JSON in $scope.animals.
The resulting JSON structure appears as follows:
{
"animals": {
"elephant": {
"size": "large",
"name": "Leonardo"
},
"mouse": {
"size": "small",
"name": "Vader"
}
}
}
How can one accomplish this task?