Добавление данных Fetch в DOM - PullRequest
Новая
       32

Добавление данных Fetch в DOM

0 голосов
/ 03 мая 2020

Я пытаюсь извлечь 7 продуктов из API и отобразить их в 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>

Ответы [ 3 ]

0 голосов
/ 03 мая 2020

Вы можете использовать forEach и добавить внутренний HTML следующим образом. Я использую мокапи для показа демокода.

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 вернет новый массив с измененными значениями. 

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>
    `
  })

});
0 голосов
/ 03 мая 2020

При использовании map вы должны возвращать что-то внутри функции. Это означает, что вы должны вернуть строку, в которую вы связываете значения. 

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>
    `;
})
0 голосов
/ 03 мая 2020

Попробуйте с помощью 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>
...