CODEWITHSUNDEEP
javascripthtml
Fernando Netto
Fernando Netto

Reputation: 65

How to show the content of javascript code in HTML

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/[email protected]" height="42" width="42" style="vertical-align: middle">',
      '01n': '<img src="https://openweathermap.org/img/wn/[email protected]" height="42" width="42" style="vertical-align: middle">',
      '02d': '<img src="https://openweathermap.org/img/wn/[email protected]" height="42" width="42" style="vertical-align: middle">',
      '02n': '<img src="https://openweathermap.org/img/wn/[email protected]" height="42" width="42" style="vertical-align: middle">',
      '03d': '<img src="https://openweathermap.org/img/wn/[email protected]" height="42" width="42" style="vertical-align: middle">',
      '03n': '<img src="https://openweathermap.org/img/wn/[email protected]" height="42" width="42" style="vertical-align: middle">',
      '04d': '<img src="https://openweathermap.org/img/wn/[email protected]" height="42" width="42" style="vertical-align: middle">',
      '04n': '<img src="https://openweathermap.org/img/wn/[email protected]" height="42" width="42" style="vertical-align: middle">',
      '09d': '<img src="https://openweathermap.org/img/wn/[email protected]" height="42" width="42" style="vertical-align: middle">',
      '09n': '<img src="https://openweathermap.org/img/wn/[email protected]" height="42" width="42" style="vertical-align: middle">',
      '10d': '<img src="https://openweathermap.org/img/wn/[email protected]" height="42" width="42" style="vertical-align: middle">',
      '10n': '<img src="https://openweathermap.org/img/wn/[email protected]" height="42" width="42" style="vertical-align: middle">',
      '11d': '<img src="https://openweathermap.org/img/wn/[email protected]" height="42" width="42" style="vertical-align: middle">',
      '11n': '<img src="https://openweathermap.org/img/wn/[email protected]" height="42" width="42" style="vertical-align: middle">',
      '13d': '<img src="https://openweathermap.org/img/wn/[email protected]" height="42" width="42" style="vertical-align: middle">',
      '13n': '<img src="https://openweathermap.org/img/wn/[email protected]" height="42" width="42" style="vertical-align: middle">',
      '50d': '<img src="https://openweathermap.org/img/wn/[email protected]" height="42" width="42" style="vertical-align: middle">',
      '50n': '<img src="https://openweathermap.org/img/wn/[email protected]" 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

Upvotes: 1

Views: 59

Answers (1)

Barmar
Barmar

Reputation: 780974

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);
});

Upvotes: 1

Related Questions