如何在 console.log 中显示输出？

Question

我正在尝试从 api 中获取数据到控制台，然后将其显示在页面上。

我已经从占位符 api 中正确提取数据到 console.log，但我无法将其显示到 div 中的页面上。我做错了什么？

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(json => console.log(json))

document.getElementById("console")

<div id="console"></div>

Answer 1

innerHTML可以实现。

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(json => {
  console.log(json);
  document.getElementById("console").innerHTML += JSON.stringify(json)}
  )

Answer 2

如果您只想将数据输出为格式化字符串，您可以使用 <pre> 和 <code>.

创建一个函数来“漂亮地打印”字符串化数据

const output = document.querySelector('.output');

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(updateHTML);

function updateHTML(data) {
  const json = JSON.stringify(data, null, 2);
  const html = `<pre><code>${json}</code></pre>`;
  output.insertAdjacentHTML('beforeend', html);
}

<div class="output"></div>

如果您想以不同的方式显示数据（例如，在 table 中），您可以迭代（map) over the keys and values returned by Object.entries 到 return 行 HTML 的字符串，并将 html 添加到页面。

const output = document.querySelector('.output');

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(updateHTML);

function updateHTML(data) {

  // Get the object entries - and array of key/value pairs
  const entries = Object.entries(data);

  // Iterate over the entries and return a new array
  // of strings created from the key/value using a
  // template string.
  const rows = entries.map(([key, value]) => {
    return `
      <tr>
        <td class="heading">${key}</td>
        <td>${value}</td>
      </tr>
    `;
  });

  // Create a new HTML string by `join`ing up the row array
  // and adding it to a new string
  const html = `<table><tbody>${rows.join('')}</tbody></table>`;

  // Insert the HTML into the page
  output.insertAdjacentHTML('beforeend', html);
}

table { background-color: #efefef; border-collapse: collapse; border: 1px solid #afafaf; }
td { padding: 0.4em; border: 1px solid white; }
.heading { text-transform: uppercase; text-align: right; font-weight: 500; background-color: #dfdfdf; }

<div class="output"></div>

添加文档

如何在 console.log 中显示输出？

How can I show the output in console.log?

javascript

getelementbyid

console.log