我想从数组中制作 HTML 表格

Question

任务是用来自数组 id、name 和 price 的数据填充表格。 我做错了什么？

var data = {"id":["1986","1990","1989","1985","1988","1987"],"name":["name1","name2 ","name3 ","name4","латунь матовая ","name5"],"price":[1148,1396,2775,1270,1396,1270]};
var i = 0;
var table = '<table class="mainTable"><tr><th>id</th><th>name</th><th>price</th></tr>';
$.each(data, function(index, value){ 

                table += ('<tr>');
                table += ('<td>' + value.id + '</td>');
                table += ('<td><img src="' + value.name + '"></td>');
                table += ('<td>' + value.price + '</td>');
                table += ('</tr>');
            });

            table += '</table>'; 
$('#tableContainer').html(table);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tableContainer">
</div>

Answer 1

它不起作用，因为您的输入数据不是作为对象数组组织的，而是作为数组对象组织的（OOP 较少）。

由于我更喜欢​​将对象数组作为数据结构，我建议（暂时）转换为该结构，然后您的循环将按预期工作：

var data = {"id":["1986","1990","1989","1985","1988","1987"],"name":["name1","name2 ","name3 ","name4","латунь матовая ","name5"],"price":[1148,1396,2775,1270,1396,1270]};
var array = data.id.map((id, i) => ({ id, name: data.name[i], price: data.price[i] }));
var i = 0;
var table = '<table class="mainTable"><tr><th>id</th><th>name</th><th>price</th></tr>';
$.each(array, function(index, value){ 

                table += ('<tr>');
                table += ('<td>' + value.id + '</td>');
                table += ('<td><img src="' + value.name + '"></td>');
                table += ('<td>' + value.price + '</td>');
                table += ('</tr>');
            });

            table += '</table>'; 
$('#tableContainer').html(table);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tableContainer">
</div>

作为一个无关的评论，我建议在构建表格的过程中更多地使用 jQuery。这也将避免当您的数据中包含 < 或 & 字符后紧跟字母时可能遇到的问题，因为这将被解释为 HTML：

var data = {"id":["1986","1990","1989","1985","1988","1987"],"name":["name1","name2 ","name3 ","name4","латунь матовая ","name5"],"price":[1148,1396,2775,1270,1396,1270]};
var array = data.id.map((id, i) => ({ id, name: data.name[i], price: data.price[i] }));
var i = 0;

$('#tableContainer').empty().append($("<table>").addClass("mainTable").append(
    $("<tr>").append(
        $("<th>").text("id"),
        $("<th>").text("name"),
        $("<th>").text("price")
    ),
    ...array.map(value =>
        $("<tr>").append(
            $("<td>").text(value.id),
            $("<td>").append($("<img>", { src: value.name })),
            $("<td>").text(value.price)
        )
    )
));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tableContainer">
</div>

Answer 2

您的数据结构不可迭代。因此，您需要将数据结构更改为列表[{id: '1111', name: 'name1', price: 1111}]，或者您需要假设所有列表（id、name、price）的长度相同，并使用该长度进行迭代。

由于其他答案详细说明了如何使用可迭代数据结构，我将处理另一种方法，您的数据已经采用这种格式并且不会改变。

对于此方法，查找一个属性（id、名称或价格）的长度，并使用索引遍历所有属性。这是一个例子。

var data = {"id":["1986","1990","1989","1985","1988","1987"],"name":["name1","name2 ","name3 ","name4","латунь матовая ","name5"],"price":[1148,1396,2775,1270,1396,1270]};
var i = 0;
var table = '<table class="mainTable"><tr><th>id</th><th>name</th><th>price</th></tr>';
data.id.forEach((value, index) => {
    table += ('<tr>');
    table += ('<td>' + data.id[index] + '</td>');
    table += ('<td><img src="' + data.name[index] + '"></td>');
    table += ('<td>' + data.price[index] + '</td>');
    table += ('</tr>');
});
table += '</table>'; 
$('#tableContainer').html(table);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tableContainer">
</div>

Answer 3

您正在处理数据，就好像它被构造为单个数组一样，如下所示：

data = [
  {
    id: 1986,
    name: "name1",
    price: 1148
  }
]

但是，您的数据包含三个数组，而不是一个：

data = {
  id: [...],
  name: [...],
  price: [...],
}

如果数据的结构与第一个示例类似，则 value 将包含每个数组元素的对象，并具有可用的属性 id、name 和 price。

一种选择是将第一个数据结构转换为第二个：

var data = {"id":["1986","1990","1989","1985","1988","1987"],"name":["name1","name2 ","name3 ","name4","латунь матовая ","name5"],"price":[1148,1396,2775,1270,1396,1270]};
var mappedData = data.id.map((id, index) => ({
    id: id,
  name: data.name[index],
  price: data.price[index]
}))

然后，使用 mappedData 并像之前一样访问属性，如下所示：

var data = {"id":["1986","1990","1989","1985","1988","1987"],"name":["name1","name2 ","name3 ","name4","латунь матовая ","name5"],"price":[1148,1396,2775,1270,1396,1270]};
var mappedData = data.id.map((id, index) => ({
    id: id,
  name: data.name[index],
  price: data.price[index]
}))
var i = 0;
var table = '<table class="mainTable"><tr><th>id</th><th>name</th><th>price</th></tr>';
$.each(dataMapped, function(index, value){ 

                table += ('<tr>');
                table += ('<td>' + value.id + '</td>');
                table += ('<td><img src="' + value.name + '"></td>');
                table += ('<td>' + value.price + '</td>');
                table += ('</tr>');
            });

            table += '</table>'; 
$('#tableContainer').html(table);

Answer 4

var data = {"id":["1986","1990","1989","1985","1988","1987"],"name":["name1","name2 ","name3 ","name4","латунь матовая ","name5"],"price":[1148,1396,2775,1270,1396,1270]};
var i = 0;
var table = '<table class="mainTable"><tr><th>id</th><th>name</th><th>price</th></tr>';
$.each(data["id"], function(index, value){ 

                table += ('<tr>');
                table += ('<td>' + value + '</td>');
                table += ('<td><img src="' + data["name"][index] + '"></td>');
                table += ('<td>' + data["price"][index] + '</td>');
                table += ('</tr>');
            });

            table += '</table>'; 
$('#tableContainer').html(table);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tableContainer">
</div>

Answer 5

有一些方法可以按照您的定义迭代数据，但我认为最好以适当的方式将其定义为实体数组（$.each 是迭代数组）：

[
 {
   "id": "1986",
   "name": "name1",
   "price": 1148
 },
 {
   "id": "1990",
   "name": "name2",
   "price": 1396
 },
];

Answer 6

您可以在不更改输入的情况下执行此操作。

var data = {
  "id": ["1986", "1990", "1989", "1985", "1988", "1987"],
  "name": ["name1", "name2 ", "name3 ", "name4", "латунь матовая ", "name5"],
  "price": [1148, 1396, 2775, 1270, 1396, 1270]
};


document.getElementById("tableContainer").innerHTML = data.id
  .map((id,i) => `<tr><td>${id}</td>
    <td><img src="${data.name[i]}"></td>
    <td>${data.price[i]}</td></tr>`).join("")

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <table class="mainTable">
    <thead>
      <tr>
        <th>id</th>
        <th>name</th>
        <th>price</th>
      </tr>
    </thead>
    <tbody id="tableContainer"></tbody>
  </table>
</div>

我还建议您将输入更改为对象数组。它使解析更简单

var data = [
  { "id": "1986", "name": "name1", "price": 1148},
  { "id":"1990",  "name": "name2", "price": 1396},
  { "id":"1989",  "name": "name3", "price": 2775},
  { "id":"1985",  "name": "name4", "price": 1270},
  { "id":"1988",  "name": "латунь матовая ", "price": 1396},
  { "id":"1987",  "name": "name5", "price": 1270}
];


document.getElementById("tableContainer").innerHTML = data
  .map(({id,name,price}) => `<tr><td>${id}</td>
    <td><img src="${name}"></td>
    <td>${price}</td></tr>`).join("")

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <table class="mainTable">
    <thead>
      <tr>
        <th>id</th>
        <th>name</th>
        <th>price</th>
      </tr>
    </thead>
    <tbody id="tableContainer"></tbody>
  </table>
</div>