title: How can I add rows from JSON data to my table?
body: <p>I retrieve a JSON file from a backend function and I need to take some values from it and put them into some inputs as values that are contained within table cells and in different rows. I need to add this dynamically based on the amount of data retrieved.</p>
  
  <p>JSON</p>
  
  <pre><code> [
      { "Type":"Ford", "Model":"mustang" },
      { "Type":"Dodge", "Model":"ram" }
    ]
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;!-- Something like this with a different JS approach? --&gt;
  &lt;table id="tableID"&gt;
  &lt;tr&gt;
  &lt;td&gt;&lt;input type="text" value="res[i].Type" /&gt;&lt;/td&gt;
  &lt;td&gt;&lt;input type="text" value="res[i].Model" /&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td&gt;&lt;input type="text" value="res[i].Type" /&gt;&lt;/td&gt;
  &lt;td&gt;&lt;input type="text" value="res[i].Model" /&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>myMethod: function () {
              var res = this;
              fetch('/cont/func', {
                  method: 'POST',
                  headers: { 'Content-Type': 'application/json' }
              })
                  .then(function (response) {
                      return response.json();
                  })
                  .then(function (data) {
                      res.type = data.Type;
                      res.model = data.Model;
                      console.log(data);
                      var html = [];
                      data.forEach(function (dats) {
                          html.push(dats.Type, dats.Model)
                      });
                      document.getElementById('tableID').innerHTML = /*???*/;
                  });
          }
  </code></pre>