Блог

Главная - Вопросы по программированию - Получите объект api и поместите его в html с помощью javascript

Получите объект api и поместите его в html с помощью javascript

#javascript #html

Вопрос:

Как я могу поместить возвращаемое значение API get на html-страницу?

Если я это сделаю:

 const url = "https://alloysystems.freshdesk.com/api/v2/tickets";
fetch(url, {
    method: "GET",
    withCredentials: true,
    headers: {
        // needed to base64 encode my key with ":x" at the end of the api key then I used that for the authorization header.
    "authorization": "Basic ILLNEVERGIVEYOUMYKEYKEYLOL"
    }
})
    .then(resp => resp.json())
    .then(data => console.log(data))

Я получаю кучу объектов (я думаю) в журнале консоли:
введите описание изображения здесь

Однако, если я попытаюсь добавить данные в html-тег, чтобы увидеть их на веб-странице, я либо получу сбой, либо получу [Object],[Object]

Попытка кода: Html:

 <!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Today's Date</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
<script src="js/script.js"></script>
</body>

</html>

Язык JavaScript:

 let d = new Date();

const url = "https://alloysystems.freshdesk.com/api/v2/tickets";
fetch(url, {
    method: "GET",
    withCredentials: true,
    headers: {
        // needed to base64 encode my key with ":x" at the end of the api key then I used that for the authorization header.
    "authorization": "Basic ILLNEVERGIVEYOUMYKEYKEYLOL"
    }
})
    .then(resp => resp.json())
    .then(data => document.body.innerHTML = "<h1>"   data   "</h1>")

Результат:
введите описание изображения здесь

Ответ №1:

data это объект, поэтому, если вы хотите показать все его содержимое между тегом h1, вам сначала нужно его упорядочить, вот так :

 .then(data => document.body.innerHTML = "<h1>"   JSON.stringify(data)   "</h1>")

Если вы просто хотите показать тип, например, вам нужно указать эту часть следующим образом:

 .then(data => document.body.innerHTML = "<h1>"   data.type   "</h1>")

Ответ №2:

Вам нужно преобразовать его из объекта в JSON с помощью

 JSON.stringify(value, replacer, space)

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

Если вы хотите отобразить его в формате (многострочный и с отступом) на html — странице, поместите внутри <pre> тега.

См. Пример ниже во фрагменте

 fetch(
    `https://api.coingecko.com/api/v3/coins/markets?vs_currency=usdamp;per_page=2amp;page=1`
  )
  .then((r) => r.json())
  .then((d) => {
    const pre = document.createElement('pre');
    pre.innerText = JSON.stringify(d, null, `t`)
    document.querySelector('body').appendChild(pre);
  }); 
 body,
pre {
  color: white;
  background: #0080ff;
  font-family: Calibri
}
Метки: