How to get the json data from url in odoo javascript

Question

How to get the JSON data from url using JavaScript. I tried the following but it does not give the json data.

var GetLocation = function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } 
    else { 
        alert("Geolocation is not supported by this browser.");
    }
}

function showPosition(position, http) {
    var lat = position.coords.latitude;
    var lon = position.coords.longitude;
    var app_id = '6784429f5eff661309aaa5280a143f97';
    var api = "http://api.openweathermap.org/data/2.5";
    var weather_api = api +"/weather?appid="+app_id+"&lat="+lat+"&lon="+lon+"&units=metric";
    // console.log(weather_api);
    var a = http.get(weather_api).then(function(response){
        position.jsonList=response.data;

    });
    console.log(a);


}

When print the weather_api it gives complete url but i am stuck in how to get the json data from that url.

Answer 1

There are few things:

1. You have to understand Asynchronous call flow.
2. You have to understand everything in a tutorial, if you are following one.

#1 Refer this for Asynchronous call flow. Then learn about Promises in JavaScript.

#2 The tutorial you are following is using Angular.js, which has the built in $http module, which has a get method in it. In your case, looks like, you are not using Angular.js & also, showPosition function is getting called by navigator.geolocation.getCurrentPosition, so that will not pass http module when calling showPosition function.

I have added a simple http module using jQuery library. So, to make this code work, you will have to include jQuery in your html file. In any case, the following code, must give you an understanding about creating objects & methods in JavaScript & you must be able to replace jQuery if you want some other library for HTTP requests.

var http = {
  get: function(url) {
    return new Promise(function(resolve, reject) {
      $.get(url, resolve).fail(reject);
    })
  }
};

var GetLocation = function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } 
    else { 
        alert("Geolocation is not supported by this browser.");
    }
}

function showPosition(position) {
    var lat = position.coords.latitude;
    var lon = position.coords.longitude;
    var app_id = '6784429f5eff661309aaa5280a143f97';
    var api = "http://api.openweathermap.org/data/2.5";
    var weather_api = api +"/weather?appid="+app_id+"&lat="+lat+"&lon="+lon+"&units=metric";
    // console.log(weather_api);
    var a = http.get(weather_api).then(function(response){
        position.jsonList=response;
        console.log(position.jsonList);
    });



}

Note: Notice that I have moved the console.log inside the promise handler.