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}

You want to print the json to page or extract the values from the json and put them into the html? — mwilson, Apr 17 '19 at 23:28
I take it `main.innerHTML = JSON.stringify(parser(await request()));` outputs the rejigged JSON, and you want it to output what's in the picture? How will you get the `sun` image from that data? what if it's cloudy? or night time? Everything else is simple — Jaromanda X, Apr 17 '19 at 23:33
perhaps you'll want to use `param.current.condition.icon` for that — Jaromanda X, Apr 17 '19 at 23:40
extract the values from the json and put them into the html same as on the picture and and instead of text should be:
name

humidity

time — Maxim Gordiyenko, Apr 17 '19 at 23:42
Yes, You are right, also **param.current.condition, param.location.name** - @JaromandaX — Maxim Gordiyenko, Apr 18 '19 at 00:06

mwilson · Answer 1 · 2019-04-18T22:57:24.943

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.

edited Apr 18 '19 at 22:57

answered Apr 17 '19 at 23:40

mwilson

12,295
7
55
95

Okey, awesome, but what about use **const obj = parser(await request());** into new pure function likes **create** function that takes param (whatRender, whereRender) and insert ? – Maxim Gordiyenko Apr 17 '19 at 23:54
I don't know what you mean by `pure function`. But, yes, making a `create` function would be trivial here. Please remember to upvote if this helps. – mwilson Apr 17 '19 at 23:55
I mean I have pure function already : `const create = (what, classAndId, text) => { let element = document.createElement(what); element.className = classAndId.class; element.id = classAndId.id; element.innerText = text; return element; };` can this: **element.innerText = text;** render **obj.time**. How instead text use obj.time? – Maxim Gordiyenko Apr 18 '19 at 00:00

How to insert API response into HTML

1 Answers1