I know, I am just showing the text for now so that you can see this output that I am trying to access:

{ “product” : “astro” , “init” : “2022060606” , “dataseries” : [ { “timepoint” : 3, “cloudcover” : 6, “seeing” : 6, “transparency” : 4, “lifted_index” : 6, “rh2m” : 10, “wind10m” : { “direction” : “NE”, “speed” : 3 }, “temp2m” : 20, “prec_type” : “none” }, { “timepoint” : 6, “cloudcover” : 4, “seeing” : 6, “transparency” : 4, “lifted_index” : 6, “rh2m” : 10, “wind10m” : { “direction” : “NE”, “speed” : 4 }, “temp2m” : 21, “prec_type” : “none” }, { “timepoint” : 9, “cloudcover” : 1, “seeing” : 6, “transparency” : 4, “lifted_index” : 2, “rh2m” : 11, “wind10m” : { “direction” : “NE”, “speed” : 4 }, “temp2m” : 21, “prec_type” : “none” }, { “timepoint” : 12, “cloudcover” : 1, “seeing” : 6, “transparency” : 4, “lifted_index” : 6, “rh2m” : 11, “wind10m” : { “direction” : “NE”, “speed” : 4 }, “temp2m” : 21, “prec_type” : “none” }, { “timepoint” : 15, “cloudcover” : 1, “seeing” : 6, “transparency” : 4, “lifted_index” : 6, “rh2m” : 11, “wind10m” : { “direction” : “N”, “speed” : 3 }, “temp2m” : 20, “prec_type” : “none” }, { “timepoint” : 18, “cloudcover” : 1, “seeing” : 7, “transparency” : 3, “lifted_index” : 6, “rh2m” : 11, “wind10m” : { “direction” : “N”, “speed” : 3 }, “temp2m” : 18, “prec_type” : “none” }, { “timepoint” : 21, “cloudcover” : 1, “seeing” : 7, “transparency” : 2, “lifted_index” : 10, “rh2m” : 8, “wind10m” : { “direction” : “NW”, “speed” : 2 }, “temp2m” : 18, “prec_type” : “none” }, { “timepoint” : 24, “cloudcover” : 1, “seeing” : 7, “transparency” : 2, “lifted_index” : 15, “rh2m” : 6, “wind10m” : { “direction” : “NW”, “speed” : 2 }, “temp2m” : 18, “prec_type” : “none” }, { “timepoint” : 27, “cloudcover” : 1, “seeing” : 6, “transparency” : 2, “lifted_index” : 10, “rh2m” : 5, “wind10m” : { “direction” : “SW”, “speed” : 2 }, “temp2m” : 23, “prec_type” : “none” }, { “timepoint” : 30, “cloudcover” : 1, “seeing” : 6, “transparency” : 2, “lifted_index” : 6, “rh2m” : 6, “wind10m” : { “direction” : “S”, “speed” : 2 }, “temp2m” : 23, “prec_type” : “none” }, { “timepoint” : 33, “cloudcover” : 1, “seeing” : 7, “transparency” : 3, “lifted_index” : 6, “rh2m” : 8, “wind10m” : { “direction” : “S”, “speed” : 2 }, “temp2m” : 22, “prec_type” : “none” }, { “timepoint” : 36, “cloudcover” : 1, “seeing” : 7, “transparency” : 3, “lifted_index” : 6, “rh2m” : 8, “wind10m” : { “direction” : “SW”, “speed” : 2 }, “temp2m” : 22, “prec_type” : “none” }, { “timepoint” : 39, “cloudcover” : 1, “seeing” : 7, “transparency” : 2, “lifted_index” : 10, “rh2m” : 8, “wind10m” : { “direction” : “W”, “speed” : 2 }, “temp2m” : 20, “prec_type” : “none” }, { “timepoint” : 42, “cloudcover” : 1, “seeing” : 7, “transparency” : 2, “lifted_index” : 10, “rh2m” : 8, “wind10m” : { “direction” : “W”, “speed” : 2 }, “temp2m” : 20, “prec_type” : “none” }, { “timepoint” : 45, “cloudcover” : 1, “seeing” : 7, “transparency” : 2, “lifted_index” : 15, “rh2m” : 7, “wind10m” : { “direction” : “NW”, “speed” : 2 }, “temp2m” : 18, “prec_type” : “none” }, { “timepoint” : 48, “cloudcover” : 1, “seeing” : 7, “transparency” : 2, “lifted_index” : 15, “rh2m” : 7, “wind10m” : { “direction” : “NW”, “speed” : 2 }, “temp2m” : 18, “prec_type” : “none” }, { “timepoint” : 51, “cloudcover” : 1, “seeing” : 6, “transparency” : 2, “lifted_index” : 10, “rh2m” : 5, “wind10m” : { “direction” : “N”, “speed” : 2 }, “temp2m” : 21, “prec_type” : “none” }, { “timepoint” : 54, “cloudcover” : 1, “seeing” : 6, “transparency” : 3, “lifted_index” : 6, “rh2m” : 8, “wind10m” : { “direction” : “NE”, “speed” : 3 }, “temp2m” : 22, “prec_type” : “none” }, { “timepoint” : 57, “cloudcover” : 1, “seeing” : 6, “transparency” : 3, “lifted_index” : 6, “rh2m” : 9, “wind10m” : { “direction” : “NE”, “speed” : 3 }, “temp2m” : 21, “prec_type” : “none” }, { “timepoint” : 60, “cloudcover” : 1, “seeing” : 6, “transparency” : 3, “lifted_index” : 6, “rh2m” : 10, “wind10m” : { “direction” : “NE”, “speed” : 4 }, “temp2m” : 22, “prec_type” : “none” }, { “timepoint” : 63, “cloudcover” : 1, “seeing” : 6, “transparency” : 3, “lifted_index” : 6, “rh2m” : 11, “wind10m” : { “direction” : “NE”, “speed” : 4 }, “temp2m” : 20, “prec_type” : “none” }, { “timepoint” : 66, “cloudcover” : 1, “seeing” : 6, “transparency” : 3, “lifted_index” : 10, “rh2m” : 10, “wind10m” : { “direction” : “N”, “speed” : 4 }, “temp2m” : 20, “prec_type” : “none” }, { “timepoint” : 69, “cloudcover” : 1, “seeing” : 7, “transparency” : 2, “lifted_index” : 10, “rh2m” : 8, “wind10m” : { “direction” : “N”, “speed” : 3 }, “temp2m” : 18, “prec_type” : “none” }, { “timepoint” : 72, “cloudcover” : 1, “seeing” : 6, “transparency” : 2, “lifted_index” : 15, “rh2m” : 6, “wind10m” : { “direction” : “N”, “speed” : 3 }, “temp2m” : 17, “prec_type” : “none” } ] }

So now, in my code, I will change that line to await x.json(); so that I can iterate through the result and show it, and then style it eventually. So what I need is something that will eventually allow me to populate my HTML like below:

So I need to be able to draw the values from the JSON output separately so I can add them to my daily-weather div.

I have also tried to use iterations, which I think is probably what I should do as there are more than one ‘cloudcover’ keys and values, but everything I tried with that didn’t output anything.

I hope this makes more sense now how I am trying to extract this data.