title: How to show the content of javascript code in HTML
body: <p>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:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  
  &lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;link id=&quot;mystylesheet&quot; type=&quot;text/css&quot; rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
  
    &lt;title&gt;Document&lt;/title&gt;
    &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;https://code.jquery.com/jquery-3.2.1.min.js&quot;&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id=&quot;wrapper&quot;&gt;
      &lt;h1 class=&quot;city&quot;&gt;&lt;/h1&gt;
    &lt;/div&gt;
    &lt;script&gt;
      const iconCodes = {
        '01d': '&lt;img src=&quot;https://openweathermap.org/img/wn/01d@2x.png&quot; height=&quot;42&quot; width=&quot;42&quot; style=&quot;vertical-align: middle&quot;&gt;',
        '01n': '&lt;img src=&quot;https://openweathermap.org/img/wn/01n@2x.png&quot; height=&quot;42&quot; width=&quot;42&quot; style=&quot;vertical-align: middle&quot;&gt;',
        '02d': '&lt;img src=&quot;https://openweathermap.org/img/wn/02d@2x.png&quot; height=&quot;42&quot; width=&quot;42&quot; style=&quot;vertical-align: middle&quot;&gt;',
        '02n': '&lt;img src=&quot;https://openweathermap.org/img/wn/02n@2x.png&quot; height=&quot;42&quot; width=&quot;42&quot; style=&quot;vertical-align: middle&quot;&gt;',
        '03d': '&lt;img src=&quot;https://openweathermap.org/img/wn/03d@2x.png&quot; height=&quot;42&quot; width=&quot;42&quot; style=&quot;vertical-align: middle&quot;&gt;',
        '03n': '&lt;img src=&quot;https://openweathermap.org/img/wn/03n@2x.png&quot; height=&quot;42&quot; width=&quot;42&quot; style=&quot;vertical-align: middle&quot;&gt;',
        '04d': '&lt;img src=&quot;https://openweathermap.org/img/wn/04d@2x.png&quot; height=&quot;42&quot; width=&quot;42&quot; style=&quot;vertical-align: middle&quot;&gt;',
        '04n': '&lt;img src=&quot;https://openweathermap.org/img/wn/04n@2x.png&quot; height=&quot;42&quot; width=&quot;42&quot; style=&quot;vertical-align: middle&quot;&gt;',
        '09d': '&lt;img src=&quot;https://openweathermap.org/img/wn/09d@2x.png&quot; height=&quot;42&quot; width=&quot;42&quot; style=&quot;vertical-align: middle&quot;&gt;',
        '09n': '&lt;img src=&quot;https://openweathermap.org/img/wn/09n@2x.png&quot; height=&quot;42&quot; width=&quot;42&quot; style=&quot;vertical-align: middle&quot;&gt;',
        '10d': '&lt;img src=&quot;https://openweathermap.org/img/wn/10d@2x.png&quot; height=&quot;42&quot; width=&quot;42&quot; style=&quot;vertical-align: middle&quot;&gt;',
        '10n': '&lt;img src=&quot;https://openweathermap.org/img/wn/10n@2x.png&quot; height=&quot;42&quot; width=&quot;42&quot; style=&quot;vertical-align: middle&quot;&gt;',
        '11d': '&lt;img src=&quot;https://openweathermap.org/img/wn/11d@2x.png&quot; height=&quot;42&quot; width=&quot;42&quot; style=&quot;vertical-align: middle&quot;&gt;',
        '11n': '&lt;img src=&quot;https://openweathermap.org/img/wn/11n@2x.png&quot; height=&quot;42&quot; width=&quot;42&quot; style=&quot;vertical-align: middle&quot;&gt;',
        '13d': '&lt;img src=&quot;https://openweathermap.org/img/wn/13d@2x.png&quot; height=&quot;42&quot; width=&quot;42&quot; style=&quot;vertical-align: middle&quot;&gt;',
        '13n': '&lt;img src=&quot;https://openweathermap.org/img/wn/13n@2x.png&quot; height=&quot;42&quot; width=&quot;42&quot; style=&quot;vertical-align: middle&quot;&gt;',
        '50d': '&lt;img src=&quot;https://openweathermap.org/img/wn/50d@2x.png&quot; height=&quot;42&quot; width=&quot;42&quot; style=&quot;vertical-align: middle&quot;&gt;',
        '50n': '&lt;img src=&quot;https://openweathermap.org/img/wn/50n@2x.png&quot; height=&quot;42&quot; width=&quot;42&quot; style=&quot;vertical-align: middle&quot;&gt;',
      }
  
      let urlJsonString = $.getJSON(&quot;https://api.openweathermap.org/data/2.5/onecall?lat=39.74362&amp;lon=-8.80705&amp;exclude=hourly,minutely,alerts&amp;units=metric&amp;appid=ecef7e88947b6303121bb900373e41d2&quot;, function (data) {
        const urlObj = JSON.parse(url)
        const getData = ({ dt, temp, weather: [{ description, icon }] }) =&gt; {
          if (temp.day) temp = temp.day
          return { dt, temp, description, icon };
        }
        const { current, daily } = urlObj;
        const result = [getData(current)]
        daily.forEach(obj =&gt; result.push(getData(obj)));
  
        result += `Temperature: ${obj.temp} ºC&lt;br&gt;
          Day: ${obj.dt}&lt;br&gt;
          Description: ${obj.description}&lt;br&gt;
          ${iconCodes[obj.icon]}&lt;br&gt;&lt;br&gt;`
      });
      $(&quot;.city&quot;).html(result);
    &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  <p>This is what I expected:</p>
  <blockquote>
  <p>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</p>
  <p>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</p>
  <p>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</p>
  <p>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</p>
  <p>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</p>
  <p>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</p>
  <p>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</p>
  <p>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</p>
  </blockquote>
  <p>And this is a exemple of return on console (it is an array of 9 objects, I show two just as exemple):</p>
  <pre><code>[
    {
      dt: 1643892957,
      temp: 14.9,
      description: 'few clouds',
      icon: '02d'
    },
    {
      dt: 1643889600,
      temp: 15,
      description: 'scattered clouds',
      icon: '03d'
    }
  ]
  </code></pre>
  <p>I appreciate any help</p>