首页 > 解决方案 > 获取并渲染 api 到 Dom

问题描述

我的控制台输出

我在 HTML 中呈现数据时遇到问题,我在控制台中获取对象没有任何错误,但 DOM 中没有显示任何内容。您可以在下面的代码中看到。

fetch("api/meals")
  .then(res => {
    return res.json();
  })
  .then(response => {
    console.log(response);
    let root = `
<h2>meals API</h2>
`;
    Array.prototype.forEach.call(response, array => {
      const {
        id,
        title,
        description,
        location,
        when,
        max_reservation,
        price,
        created_date
      } = array;
      root += `

<h5>meal ID: ${id}</h5>
<ul class="w3-ul">
  <li>title : ${title}</li>
  <li>description : ${description}</li>
  <li>location : ${location}</li>
  <li>when : ${when}</li>
  <li>max_reservation : ${max_reservation}</li>
  <li>price : ${price}</li>
  <li>created_date : ${created_date}</li>
</ul>
</div>
`;
      document.getElementById("root").innerHTML = root;
    });
  });

标签: node.jsfunctionapi

解决方案


推荐阅读