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

Question

I am trying to fetch data from an api into console and then display it on a page.

I have correctly fetched the data from the placeholder api into console.log, but I cannot display it onto the page in the div. What am I doing wrong?

 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 could achieve.

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

If you just want to output the data as a formatted string you could create a function to "pretty print" the stringified data using <pre> and <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>

If you wanted to display the data differently (in a table, for example) you could iterate ( map ) over the keys and values returned by Object.entries to return a string of row HTML, and add that html to the page.

 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. `join` the array elements up // into one string once the iteration is complete. const rows = entries.map(([key, value]) => { return ` <tr> <td class="heading">${key}</td> <td>${value}</td> </tr> `; }).join(''); // Create a new HTML string const html = `<table><tbody>${rows}</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>

Addition documentation

• Template/string literals

• join

• insertAdjacentHTML