Using AngularJS, I am looking to dynamically retrieve the price value from a URL's JSON data. Is this feasible?
Here is the URL JSON: link
Below is my controller:
angular.module("myApp",['zingchart-angularjs']).controller('MainController', ['$scope', '$http', function($scope, $http) {
$scope.cities =[{
"name": "city A",
"elements": [{
"id": "c01",
"name": "name1",
"price": "15",//I want to get this price from the url json: [url][1]. Get it from the value of prix_diesel attribute
"qte": "10" //I want to get this price from the url json. Get it from the value of prix_essence attribute
}, {
"id": "c02",
"name": "name2",
"price": "18",
"qte": "11"
}, {
"id": "c03",
"name": "name3",
"price": "11",
"qte": "14"
}],
"subsities": [{
"name": "sub A1",
"elements": [{
"id": "sub01",
"name": "nameSub1",
"price": "1",
"qte": "14"
}, {
"id": "sub02",
"name": "nameSub2",
"price": "8",
"qte": "13"
}, {
"id": "sub03",
"name": "nameSub3",
"price": "1",
"qte": "14"
}]
}, {
"name": "sub A2",
"elements": [{
"id": "ssub01",
"name": "nameSsub1",
"price": "1",
"qte": "7"
}, {
"id": "ssub02",
"name": "nameSsub2",
"price": "8",
"qte": "1"
}, {
"id": "ssub03",
"name": "nameSsub3",
"price": "4",
"qte": "19"
}]
}, {
"name": "sub A3",
"elements": [{
"id": "sssub01",
"name": "nameSssub1",
"price": "1",
"qte": "11"
}, {
"id": "sssub02",
"name": "nameSssub2",
"price": "2",
"qte": "15"
}, {
"id": "sssub03",
"name": "nameSssub3",
"price": "1",
"qte": "15"
}]
}]
}, {
"name": "city B",
"elements": [{
"id": "cc01",
"name": "name11",
"price": "10",
"qte": "11"
}, {
"id": "cc02",
"name": "name22",
"price": "14",
"qte": "19"
}, {
"id": "cc03",
"name": "name33",
"price": "11",
"qte": "18"
}]
}, {
"name": "city C",
"elements": [{
"id": "ccc01",
"name": "name111",
"price": "19",
"qte": "12"
}, {
"id": "ccc02",
"name": "name222",
"price": "18",
"qte": "17"
}, {
"id": "ccc03",
"name": "name333",
"price": "10",
"qte": "5"
}]
}]
$scope.extractSubsities = function(itemSelected) {
if(itemSelected && itemSelected.elements){
$scope.data = itemSelected.elements;
}
}
$http.jsonp("http://total.smarteez.eu/submit/?station=101507")
.then(function(data) {
if($scope.cities && $scope.cities[0] && $scope.cities[0].elements && $scope.cities[0].elements[0]){
$scope.cities[0].elements[0].price = data.data.prix.prix_diesel;
$scope.cities[0].elements[0].qte = data.data.prix.prix_essence;
}
});
}]);
I have set up a demonstration in Plunker:example
Note: total.smarteez.eu is not hosted on my server.
Can someone assist me in loading data from the URL JSON source?
UPDATE:
Upon running my code, I encountered an error that reads:
Uncaught SyntaxError: Unexpected token ?station=101507:1
EDIT:
This is not a duplicate query as I am specifically asking about extracting data from an external URL's JSON format, which may require cross-domain requests.