title: Template literal loop in javascript
body: <p>I am trying to build an html table out of a JSON file. When i make my table with template literals in javascript, it loops through my whole table and makes a table header for each array in my json.</p>
  
  <p>I have tried to make two functions for my th and my td but that doesn't seem to work.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var petsData = [{
      name: "Purrsloud",
      species: "Cat",
      favFoods: ["wet food", "dry food", "&lt;strong&gt;any&lt;/strong&gt; food"],
      birthYear: 2016,
      photo: "https://learnwebcode.github.io/json-example/images/cat-2.jpg"
    },
    {
      name: "Barksalot",
      species: "Dog",
      birthYear: 2008,
      photo: "https://learnwebcode.github.io/json-example/images/dog-1.jpg"
    },
    {
      name: "Meowsalot",
      species: "Cat",
      favFoods: ["tuna", "catnip", "celery"],
      birthYear: 2012,
      photo: "https://learnwebcode.github.io/json-example/images/cat-1.jpg"
    }
  ];
  
  
  function foods(foods) {
    return `
  &lt;h4&gt;Favorite Foods&lt;/h4&gt;
  &lt;ul class="foods-list"&gt;
  ${foods.map(food =&gt; `&lt;li&gt;${food}&lt;/li&gt;`).join("")}
  &lt;/ul&gt;
  `;
  }
  
  function petTemplate(pet) {
    return `
      &lt;table&gt;
        &lt;tr&gt;
          &lt;th&gt;Name&lt;/th&gt;
          &lt;th&gt;Species&lt;/th&gt;
          &lt;th&gt;Birth Year&lt;/th&gt;
          &lt;th&gt;Favorite Foods&lt;/th&gt;
        &lt;/tr&gt;
          &lt;td&gt;${pet.name}&lt;/td&gt;
          &lt;td&gt;${pet.species }&lt;/td&gt;
          &lt;td&gt;${pet.birthYear}&lt;/td&gt;
          &lt;td&gt;${pet.favFoods ? foods(pet.favFoods) : ""}&lt;/td&gt;
        &lt;tr&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
    `;
  }
  
  document.getElementById("table").innerHTML = `
    ${petsData.map(petTemplate).join("")}
  `;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="table"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>It just seems like my petTable function is looping again and again until i get all of the arrays in the json file, but that makes a table header for each for each array of json. I just want one table header and then all of the arrays.</p>