Adding Fetch data to DOM

I am trying to pull 7 products from an API and display them in the DOM. When I try create a div for each product and insert to the HTML I get one div with ',,,,,,,' inside it. It looks like the request is working as I am able to console log the data from the 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>

Solution

Try by using 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>

If you intend to use map then instead of accessing dom for appending each element , you can join with , delimiter and then append dom after iteration is complete

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>