title: How to insert API response into HTML
body: <p>I used pure function to create wrapper for multiple HTML elements and don't understand how to insert JSON response API data into it.
  Can you help to create one more pure function that insert API data into HTML likes a text or use exists function called &quot;create&quot; that has property &quot;innerText&quot;.</p>
  <p>I found similar question: <a href="https://stackoverflow.com/questions/46738333/using-javascript-loop-to-create-multiple-html-elements">Using Javascript loop to create multiple HTML elements</a></p>
  <pre><code>const create = (what, classAndId, text) =&gt; {
      let element = document.createElement(what);
      element.className = classAndId.class;
      element.id = classAndId.id;
      element.innerText = text;
      return element;
  };
  </code></pre>
  <p>API:</p>
  <pre><code>const link = `http://api.apixu.com/v1/current.json?key=${key}&amp;q=Kiev`;
  
  const request = async () =&gt; {
    try {
      const response = await fetch(link);
      return await response.json();
    }catch (e) {
      throw new Error(e);
    }
  };
  </code></pre>
  <p>Function that converting API data into readable format:</p>
  <pre><code>const parser = param =&gt; {
      return {
          name: param.location.name,
          region: param.location.country,
          time: param.location.localtime,
          temperature: {
              real: param.current.temp_c,
              feels_like: param.current.feelslike_c,
          },
          wind: {
              speed: param.current.wind_kph,
              direction: param.current.wind_dir,
          },
          pressure: param.current.pressure_mb,
          visibility: param.current.vis_km,
          precipitation: param.current.precip_mm,
          humidity: param.current.humidity,
      };
  };
  </code></pre>
  <p>Async function that just render API data into HTML after converting:</p>
  <pre><code>async function showData() {
      const main = document.querySelector(&quot;#main&quot;);
      document.body.appendChild(main);
      main.innerHTML = JSON.stringify(parser(await request()));
  }
  </code></pre>
  <p>Expected after render:
  <a href="https://i.stack.imgur.com/aTLSc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aTLSc.png" alt="a busy cat" /></a><br />
  <sub>(source: <a href="https://cdn.androidheadlines.com/wp-content/uploads/2015/04/Screenshot-2015-04-14-13.38.44.png" rel="nofollow noreferrer">androidheadlines.com</a>)</sub></p>
  <p>Expected into HTML:</p>
  <pre><code>&lt;div class=&quot;item&quot;&gt;11:30 PM&lt;/div&gt;
  &lt;div class=&quot;item&quot;&gt;Mostly Cloud&lt;/div&gt;
  &lt;div class=&quot;item&quot;&gt;Thu Jun 13&lt;/div&gt;
  </code></pre>
  <p>That does render function:</p>
  <pre><code>{&quot;name&quot;:&quot;Kiev&quot;,&quot;region&quot;:&quot;Ukraine&quot;,&quot;time&quot;:&quot;2019-04-18 1:38&quot;,&quot;temperature&quot;:{&quot;real&quot;:6,&quot;feels_like&quot;:4.6},&quot;wind&quot;:{&quot;speed&quot;:6.8,&quot;direction&quot;:&quot;ENE&quot;},&quot;pressure&quot;:1028,&quot;visibility&quot;:10,&quot;precipitation&quot;:0,&quot;humidity&quot;:70}
  </code></pre>