how to automate a geolocation based Json

Question

I am a beginner and I have a function to get the link based on your location.

Here is the function:

 
    <p id="demo"></p>

    <script>
    var x = document.getElementById("demo");

    function getLocation() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(showPosition, showError);
    } else { 
        x.innerHTML = "Geolocation is not supported by this browser.";
      }
      }
     
      function showPosition(position) {
       x.innerHTML =  "http://api.openweathermap.org/data/2.5/weather?lat=" + position.coords.latitude + "&lon=" +
        position.coords.longitude + "&units=metric&APPID=3d1523ca3f27251ddf055b1b26ed347f"
      }
       

    </script>

now I am trying to get this link into a get.Json so that the website will automatically get information about the weather in your area. The problem is that I can't get it to work. can someone help me on how to get the link into a get.Json automatically.

`x.innerHTML = "http://api.openweathermap...` this is just setting your element to some url string. To get the data you need to make some ajax request, [XMLHTTPRequest](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest), [fetch()](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch), jQuery.ajax() etc — Patrick Evans, Nov 19 '19 at 16:27
This is one of my first times coding and I dont really know how ajax works yet, could you give an example on how to do that? — Rien en Ardiet, Nov 19 '19 at 16:34
this was our Json: $.getJSON ("We want the link here", function(data){ console.log(data); var name = data.name; var temp = Math.round(data.main.temp); $('.temp').append("het is nu "+ temp + "℃ in ").append(name) } ); — Rien en Ardiet, Nov 19 '19 at 16:38

score 0 · Accepted Answer · answered Nov 19 '19 at 16:52

To get data from some web api endpoint you need to use some ajax request api. Native ones are XMLHTTPRequest, fetch().

There is also jQuery.ajax and its aliases $.post,$.get,$.getJSON etc

So just use the api that you are comfortable with and add it to your showPosition function. When the respective api's promise, or event callback is triggered used the passed data to display your information:

function showPosition(position) {
  let apiUrl = "http://api.openweathermap.org/data/2.5/weather?lat=" + 
               position.coords.latitude + 
               "&lon=" + position.coords.longitude + 
               "&units=metric&APPID=3d1523ca3f27251ddf055b1b26ed347f";

  //using fetch() api
  fetch(apiUrl).then(response=>response.json()).then(data=>{
    //use the returned data however you like
    //for instance show temperature
    x.innerHTML = data.main.temp;
  });

  //using XMLHttpRequest
  let req = new XMLHttpRequest();
  req.open("get",apiUrl);
  req.addEventListener('load',function(data){
    //use the returned data however you like
  });

  //using a library like jQuery
  jQuery.getJSON(apiUrl).then(function(data){
    //use the returned data however you like
  });
}

Read up on asynchronous operations and avoid pitfalls like these:

How do I return the response from an asynchronous call?

Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference

how to automate a geolocation based Json

1 Answers1