How to show the content of javascript code in HTML
Question
I've this HTML with some javascript and I'm not able to display the result in the browser. Expected is to display just the following key values after the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link id="mystylesheet" type="text/css" rel="stylesheet" href="style.css">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="wrapper">
<h1 class="city"></h1>
</div>
<script>
const iconCodes = {
'01d': '<img src="https://openweathermap.org/img/wn/01d@2x.png" height="42" width="42" style="vertical-align: middle">',
'01n': '<img src="https://openweathermap.org/img/wn/01n@2x.png" height="42" width="42" style="vertical-align: middle">',
'02d': '<img src="https://openweathermap.org/img/wn/02d@2x.png" height="42" width="42" style="vertical-align: middle">',
'02n': '<img src="https://openweathermap.org/img/wn/02n@2x.png" height="42" width="42" style="vertical-align: middle">',
'03d': '<img src="https://openweathermap.org/img/wn/03d@2x.png" height="42" width="42" style="vertical-align: middle">',
'03n': '<img src="https://openweathermap.org/img/wn/03n@2x.png" height="42" width="42" style="vertical-align: middle">',
'04d': '<img src="https://openweathermap.org/img/wn/04d@2x.png" height="42" width="42" style="vertical-align: middle">',
'04n': '<img src="https://openweathermap.org/img/wn/04n@2x.png" height="42" width="42" style="vertical-align: middle">',
'09d': '<img src="https://openweathermap.org/img/wn/09d@2x.png" height="42" width="42" style="vertical-align: middle">',
'09n': '<img src="https://openweathermap.org/img/wn/09n@2x.png" height="42" width="42" style="vertical-align: middle">',
'10d': '<img src="https://openweathermap.org/img/wn/10d@2x.png" height="42" width="42" style="vertical-align: middle">',
'10n': '<img src="https://openweathermap.org/img/wn/10n@2x.png" height="42" width="42" style="vertical-align: middle">',
'11d': '<img src="https://openweathermap.org/img/wn/11d@2x.png" height="42" width="42" style="vertical-align: middle">',
'11n': '<img src="https://openweathermap.org/img/wn/11n@2x.png" height="42" width="42" style="vertical-align: middle">',
'13d': '<img src="https://openweathermap.org/img/wn/13d@2x.png" height="42" width="42" style="vertical-align: middle">',
'13n': '<img src="https://openweathermap.org/img/wn/13n@2x.png" height="42" width="42" style="vertical-align: middle">',
'50d': '<img src="https://openweathermap.org/img/wn/50d@2x.png" height="42" width="42" style="vertical-align: middle">',
'50n': '<img src="https://openweathermap.org/img/wn/50n@2x.png" height="42" width="42" style="vertical-align: middle">',
}
let urlJsonString = $.getJSON("https://api.openweathermap.org/data/2.5/onecall?lat=39.74362&lon=-8.80705&exclude=hourly,minutely,alerts&units=metric&appid=ecef7e88947b6303121bb900373e41d2", function (data) {
const urlObj = JSON.parse(url)
const getData = ({ dt, temp, weather: [{ description, icon }] }) => {
if (temp.day) temp = temp.day
return { dt, temp, description, icon };
}
const { current, daily } = urlObj;
const result = [getData(current)]
daily.forEach(obj => result.push(getData(obj)));
result += `Temperature: ${obj.temp} ºC<br>
Day: ${obj.dt}<br>
Description: ${obj.description}<br>
${iconCodes[obj.icon]}<br><br>`
});
$(".city").html(result);
</script>
</body>
</html>
This is what I expected:
Temperature: 15.3 ºC Day: Tue Jan 20 1970 01:38:09 GMT+0100 (Western European Standard Time) Description: overcast clouds - and the weather image from const iconCodes
Temperature: 13.84 ºC Day: Tue Jan 20 1970 01:39:36 GMT+0100 (Western European Standard Time) Description: overcast clouds - and the weather image from const iconCodes
Temperature: 14.17 ºC Day: Tue Jan 20 1970 01:41:02 GMT+0100 (Western European Standard Time) Description: broken clouds - and the weather image from const iconCodes
Temperature: 17.29 ºC Day: Tue Jan 20 1970 01:42:28 GMT+0100 (Western European Standard Time) Description: few clouds - and the weather image from const iconCodes
Temperature: 17.42 ºC Day: Tue Jan 20 1970 01:43:55 GMT+0100 (Western European Standard Time) Description: scattered clouds - and the weather image from const iconCodes
Temperature: 17.37 ºC Day: Tue Jan 20 1970 01:45:21 GMT+0100 (Western European Standard Time) Description: clear sky - and the weather image from const iconCodes
Temperature: 17.35 ºC Day: Tue Jan 20 1970 01:46:48 GMT+0100 (Western European Standard Time) Description: scattered clouds - and the weather image from const iconCodes
Temperature: 18.13 ºC Day: Tue Jan 20 1970 01:48:14 GMT+0100 (Western European Standard Time) Description: overcast clouds - and the weather image from const iconCodes
And this is a exemple of return on console (it is an array of 9 objects, I show two just as exemple):
[
{
dt: 1643892957,
temp: 14.9,
description: 'few clouds',
icon: '02d'
},
{
dt: 1643889600,
temp: 15,
description: 'scattered clouds',
icon: '03d'
}
]
I appreciate any help
1 answers
solution1
1 ACCPTED 2022-02-03 18:17:33
The data parameter to the callback is the parsed JSON. You need to use this as the source for current and daily .
You're using result as both the HTML string and the array containing the results of all the getData() calls. You need different variables for this.
The call to $(".city").html() needs to be in the callback function so it can use all the variables that were assigned there.
$.getJSON("https://api.openweathermap.org/data/2.5/onecall?lat=39.74362&lon=-8.80705&exclude=hourly,minutely,alerts&units=metric&appid=ecef7e88947b6303121bb900373e41d2", function(data) { const getData = ({ dt, temp, weather: [{ description, icon }] }) => { if (temp.day) temp = temp.day return { dt, temp, description, icon }; } const { current, daily } = data; const result = [getData(current)] daily.forEach(obj => result.push(getData(obj))); const html = ''; result.forEach(obj => html += `Temperature: ${obj.temp} ºC<br> Day: ${obj.dt}<br> Description: ${obj.description}<br> ${iconCodes[obj.icon]}<br><br>` ); $(".city").html(html); });
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.