How to load Json data onto a Charts.js chart

by

👍:0

Assuming your main stumbling block is retrieving the data from the API, all you need are three steps:

  1. Making a network request to the URL you posted, usually done using fetch. This asks the openweathermap website to send you some data.
const response = await fetch('http://api.openweathermap.org/data/2.5/forecast?lat=53.4808&lon=2.2426&appid=4ce23fd03d1558816c3ef6efb6a5ec30&units=metric');

This will give you an object of type Response, which is not what you want since it includes HTTP headers etc. which you have no use for. You want the JSON data sent as part of the response.

  1. Extracting the JSON
const data = await response.json()
  1. Parsing the JSON variable for the temp values
const chartData = data.list.map((object) => object.main.temp)

Explanation: The JSON object returned by the API contains a "list" array that itself contains a "main" attribute, that finally contains the temp you’re looking for. "json.list" access the list, the map is taking each object and creating a new array (I believe) containing the "temp" value inside the "main" object.

Lmk if that wasn’t clear!

Leave a comment