Как вставить ответ API в HTML

Я использовал чистую функцию для создания оболочки для нескольких элементов HTML и не понимаю, как вставить в нее данные API ответа JSON. Можете ли вы помочь создать еще одну чистую функцию, которая вставляет данные API в HTML, например текст, или использует существующую функцию под названием «создать», которая имеет свойство «innerText».

Я нашел аналогичный вопрос: Использование цикла Javascript для создания нескольких элементов HTML

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

Функция, преобразующая данные API в читаемый формат:

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

Асинхронная функция, которая просто отображает данные API в HTML после преобразования:

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

Ожидается после рендеринга: a занятой кот

Ожидается в HTML:

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

Это делает функцию рендеринга:

{"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}

javascript json api async-await pure-function
person Maxim Gordiyenko    schedule 17.04.2019    source источник
comment
Вы хотите распечатать json на странице или извлечь значения из json и поместить их в html?   -  person mwilson    schedule 18.04.2019
comment
Я так понимаю, main.innerHTML = JSON.stringify(parser(await request())); выводит переработанный JSON, а вы хотите, чтобы он выводил то, что на картинке? Как вы получите изображение sun из этих данных? а если облачно? или ночное время? Все остальное просто   -  person Jaromanda X    schedule 18.04.2019
comment
возможно, вы захотите использовать param.current.condition.icon для этого   -  person Jaromanda X    schedule 18.04.2019
comment
извлеките значения из json и поместите их в html так же, как на картинке, и вместо текста должно быть: ‹div class=item›name‹/div› ‹div class=item› влажность ‹/div› ‹div class =элемент› время ‹/дел›   -  person Maxim Gordiyenko    schedule 18.04.2019
comment
Да, вы правы, также param.current.condition, param.location.name - @JaromandaX   -  person Maxim Gordiyenko    schedule 18.04.2019
comment
Такие фреймворки, как Knockout или Angular, сделают жизнь проще.   -  person Subir Kumar Sao    schedule 19.04.2019
comment
@SubirKumarSao Большое спасибо, но я должен понимать ядро ​​js   -  person Maxim Gordiyenko    schedule 19.04.2019

Ответы (1)


arrow_upward
1
arrow_downward

Ваш HTML не будет знать, как обрабатывать json. Вам нужно специально указать свой html, каковы значения. Например:

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

Если я ошибаюсь, и вы просто хотите распечатать фактическое json на веб-странице, вы

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

Если вы пытаетесь вывести на страницу строковый json, я бы также рекомендовал использовать тег pre.

person mwilson    schedule 17.04.2019
comment
Хорошо, отлично, а как насчет использования const obj = parser(await request()); в новую чистую функцию, например, создать функцию, которая принимает параметр (whatRender, whereRender) и вставляет ? - person Maxim Gordiyenko; 18.04.2019
comment
Я не знаю, что вы имеете в виду под pure function. Но да, создание функции create здесь было бы тривиальным. Пожалуйста, не забудьте проголосовать, если это поможет. - person mwilson; 18.04.2019
comment
Я имею в виду, что у меня уже есть чистая функция: const create = (what, classAndId, text) => { let element = document.createElement(what); element.className = classAndId.class; element.id = classAndId.id; element.innerText = text; return element; }; может это: element.innerText = text; визуализировать obj.time. Как вместо текста использовать obj.time? - person Maxim Gordiyenko; 18.04.2019