How to insert API response into HTML

Question

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 "create" that has property "innerText".

I found similar question: Using Javascript loop to create multiple HTML elements

const create = (what, classAndId, text) => {
    let element = document.createElement(what);
    element.className = classAndId.class;
    element.id = classAndId.id;
    element.innerText = text;
    return element;
};

API:

const link = `http://api.apixu.com/v1/current.json?key=${key}&q=Kiev`;

const request = async () => {
  try {
    const response = await fetch(link);
    return await response.json();
  }catch (e) {
    throw new Error(e);
  }
};

Function that converting API data into readable format:

const parser = param => {
    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,
    };
};

Async function that just render API data into HTML after converting:

async function showData() {
    const main = document.querySelector("#main");
    document.body.appendChild(main);
    main.innerHTML = JSON.stringify(parser(await request()));
}

Expected after render:
_{(source: androidheadlines.com)}

Expected into HTML:

<div class="item">11:30 PM</div>
<div class="item">Mostly Cloud</div>
<div class="item">Thu Jun 13</div>

That does render function:

{"name":"Kiev","region":"Ukraine","time":"2019-04-18 1:38","temperature":{"real":6,"feels_like":4.6},"wind":{"speed":6.8,"direction":"ENE"},"pressure":1028,"visibility":10,"precipitation":0,"humidity":70}

Answer 1

Your HTML is not going to know how to handle json. You need to specifically tell your html what the values are. For example:

async function showData() {
    const main = document.querySelector("#main");
    document.body.appendChild(main);
    const obj = parser(await request()); // <-- Assuming this works and it returns an object (not json)
    // Give your elements Id's to make it easier
    document.getElementById('time').innerText = obj.time;
    ...
}

If I am misunderstanding and you are just wanting print the actual json out to the web page, you

async function showData() {
    const main = document.querySelector("#main");
    document.body.appendChild(main);
    const obj = parser(await request()); // <-- Assuming this works
    main.innerText = JSON.stringify(obj, null, 2);
}

If you are trying to print out stringified json to the page, I would also recommend using a pre tag.