如何将 JSON 数据中的行添加到我的表中？

Question

我从后端 function 检索 JSON 文件，我需要从中获取一些值并将它们作为包含在表格单元格和不同行中的值放入一些输入中。 我需要根据检索到的数据量动态添加它。

JSON

 [
    { "Type":"Ford", "Model":"mustang" },
    { "Type":"Dodge", "Model":"ram" }
  ]

HTML

<!-- Something like this with a different JS approach? -->
<table id="tableID">
<tr>
<td><input type="text" value="res[i].Type" /></td>
<td><input type="text" value="res[i].Model" /></td>
</tr>
<tr>
<td><input type="text" value="res[i].Type" /></td>
<td><input type="text" value="res[i].Model" /></td>
</tr>
</table>

JS

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 = /*???*/;
                });
        }

Answer 1

var html = 
"<tr>
<td><input type="text" value="data[0].Type" /></td>
<td><input type="text" value="data[0].Model" /></td>
</tr>
<tr>
<td><input type="text" value="data[1].Type" /></td>
<td><input type="text" value="data[1].Model" /></td>
</tr>"

document.getElementById('tableID').innerHTML = html;