将获取数据添加到 DOM

Question

我正在尝试从 API 中提取 7 个产品并将它们显示在 DOM 中。当我尝试为每个产品创建一个 div 并插入到 HTML 时，我得到一个 div，里面有 ','。看起来请求正在运行，因为我能够控制台记录来自 API 的数据。

const results = document.getElementById('result');
      
fetch('http://localhost:1337/products')
.then(response => response.json())
.then((data) =>{
results.innerHTML = data.map(product =>{ 
  console.log(product.meal);
    `
  <div class="result">
    <h3>${product.meal}</h3>
    <p>${product.description}</p>
    <p>${product.price}</p>
  </div>
    `
  })
 
});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Med Kitchen Prep</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap" rel="stylesheet">
</head>
<body>
    

<section id="a">
   
        <nav id="main-nav">
            <a id="logopic" href="/"><img src="./img/logo.png" alt="logo image"></a>
          <ul>
            <li><a href="index" class="current">Home</a></li>
            <li><a href="#">Meals</a></li>
          </ul>
        </nav>
        <div class="header-content">
          <h1>
            Mediterranean Kitchen Prep
          </h1>
          <p class="lead">
            Mediterranean Meals Delivered To Your Doorstep
          </p>
          <ul>
          <li><a id="view-meals" href="#">View Our Meals</a></li>
        </ul>
        </div>
     
</section>

<section id="b">
  <h2>All Meals</h2>
  <div id="result" class="result"></div>
</section>

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

Answer 1

尝试使用 forEach

const results = document.getElementById('result');
const data = [{
    meal: 'meal-1',
    description: 'desc-1',
    price: 'price-1'
  },
  {
    meal: 'meal-2',
    description: 'desc-2',
    price: 'price-2'
  },
  {
    meal: 'meal-3',
    description: 'desc-3',
    price: 'price-3'
  }
]

data.forEach(product => {
  results.innerHTML += `
  <div class="result">
    <h3>${product.meal}</h3>
    <p>${product.description}</p>
    <p>${product.price}</p>
  </div>
    `
})

<section id="b">
  <h2>All Meals</h2>
  <div id="result" class="result"></div>
</section>

如果您打算使用 map，而不是访问 dom 来追加每个元素，您可以 join 和 , 定界符，然后追加 dom 迭代完成后

const results = document.getElementById('result');
const data = [{
    meal: 'some meal-1',
    description: 'some desc-1',
    price: 'some price-1'
  },
  {
    meal: 'some meal-2',
    description: 'some desc-2',
    price: 'some price-2'
  },
  {
    meal: 'some meal-3',
    description: 'some desc-3',
    price: 'some price-3'
  }
]

let view = data.map((product) => {
  return `<div class="result">
       <h3>${product.meal}</h3>
       <p>${product.description}</p>
       <p>${product.price}</p>
    </div>`

}).join(',');

results.innerHTML = view;

<section id="b">
  <h2>All Meals</h2>
  <div id="result" class="result"></div>
</section>

Answer 2

您可以使用 forEach 并像这样附加 innerHTML。我正在使用 mockapi 来显示演示代码。

map 不起作用，因为您必须再次迭代并将数据附加为字符串。

const results = document.getElementById('result');

fetch('https://jsonplaceholder.typicode.com/todos/')
  .then(response => response.json())
  .then((data) => {
    data.forEach(product => {
      results.innerHTML += `
  <div class="result">
    <h3>${product.title}</h3>
  </div>
    `
    })

  });

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Med Kitchen Prep</title>
  <link rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap" rel="stylesheet">
</head>

<body>


  <section id="a">

    <nav id="main-nav">
      <a id="logopic" href="/"><img src="./img/logo.png" alt="logo image"></a>
      <ul>
        <li><a href="index" class="current">Home</a></li>
        <li><a href="#">Meals</a></li>
      </ul>
    </nav>
    <div class="header-content">
      <h1>
        Mediterranean Kitchen Prep
      </h1>
      <p class="lead">
        Mediterranean Meals Delivered To Your Doorstep
      </p>
      <ul>
        <li><a id="view-meals" href="#">View Our Meals</a></li>
      </ul>
    </div>

  </section>

  <section id="b">
    <h2>All Meals</h2>
    <div id="result" class="result"></div>
  </section>

您需要 return map 函数中的值。 map 将 return 具有修改值的新数组。

const results = document.getElementById('result');

fetch('http://localhost:1337/products')
.then(response => response.json())
.then((data) =>{
results.innerHTML = data.map(product =>{ 
  console.log(product.meal);
    return `
  <div class="result">
    <h3>${product.meal}</h3>
    <p>${product.description}</p>
    <p>${product.price}</p>
  </div>
    `
  })

});

Answer 3

使用地图时，您必须 return 函数内的某些内容- 意味着您应该 return 将值绑定到的字符串。

results.innerHTML = data.map(product => {
    console.log(product.meal);
    return `
        <div class="result">
            <h3>${product.meal}</h3>
            <p>${product.description}</p>
            <p>${product.price}</p>
        </div>
    `;
})

将获取数据添加到 DOM

Adding Fetch data to DOM

html

javascript

arrays

dom

innerhtml