Cant work out out fetch api of met office to html page-CodePudding

Been tasked with displaying details from the met office data point api using javascript onto a html page and have only a brief knowledge of using the fetch api function.The met office uses users keys for their data point that needs inserted into the url in order to access the data. Im currently using the url that displays location information and would like to start with displaying the longitude and lattidide.

Ive wrote a html page and used an example I found of using fetch online but still no luck of displaying an data.

async function getLocations() {
  let url = 'http://datapoint.metoffice.gov.uk/public/data/val/wxfcs/all/json/sitelist?key=231f9773-2c4f-4afd-beee-6878c1c63f0a';
  try {
    let res = await fetch(url);
    return await res.json();
  } catch (error) {
    console.log(error);
  }
}

async function renderLocations() {
  let locations = await getLocations();
  let html = '';
  locations.forEach(Location => {
    let htmlSegment = `<div >
                            <h2>${Location.longitude} ${Location.latitude}</h2>
                        </div>`;

    html  = htmlSegment;
  });

  let container = document.querySelector('.container');
  container.innerHTML = html;
}
renderLocations();

<div ></div>

CodePudding user response：

By trying out the API endpoint by myself and logging out the result of getLocations(), I see that the structure of the Object looks like:

{
    Locations: {
        Location: [
            ...data
        ]
    }
}

So to fix your code, change from

locations.forEach(Location => {

locations.Locations.Location.forEach(Location => {