Как вставить ответ API в HTML - PullRequest
Новая
       35

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

0 голосов
/ 18 апреля 2019

Я использовал чистую функцию для создания оболочки для нескольких элементов HTML и не понимаю, как вставить в нее данные API ответа JSON. Можете ли вы помочь создать еще одну чистую функцию, которая вставляет данные API в HTML, любит текст или использует существующую функцию с именем «create», которая имеет свойство «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 busy cat

Ожидается в 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}

1 Ответ

1 голос
/ 18 апреля 2019

Ваш 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.

...