How can I get the value from json url

Question

I am using AngularJS and I want to get the value of the price dynamically I mean to get it from a url json data. Is this possible !

This is the url json : url

And this 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 set this up in my plunkr :plunker

Remark: total.smarteez.eu is not my server

Can you please help me to load data from the url json ?

UPDATE:

When I run my code, the browser launched an error like :

Uncaught SyntaxError: Unexpected token ?station=101507:1

EDIT:

No it's not a duplicate question because I am asking how to get data from a url json which is not in my server I think I need something like crossdomain request.

Answer 1

I was trying to retrieve the information using angular services, what I'm getting in chrome's console is next:

XMLHttpRequest cannot load http://total.smarteez.eu/submit/?station=101507. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://<<MYIPADDRESS>>' is therefore not allowed access. The response had HTTP status code 401.

Which means that smarteez server dowesn't allows CORS, I mean, it doesn't allow external connections to retrieve data...

You should enable CORS in the smarteez server....but you've mention it's not yours

What I'll do if i were you, it's to load the content inside a PHP variable with file_get_contents() function and then transform it to JSON to finally return it to my angular controller