任務是用來自陣列 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 ><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>uj5u.com熱心網友回復：
它不起作用，因為您的輸入資料不是作為物件陣列組織的，而是作為陣列物件組織的（這是較少的 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 ><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>uj5u.com熱心網友回復：
您的資料結構不可迭代。因此，您需要將資料結構更改為 list [{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 ><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>uj5u.com熱心網友回復：
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 ><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>uj5u.com熱心網友回復：
有多種方法可以按照您定義的方式迭代資料，但我認為最好以適當的方式定義它，作為物體陣列（$.each是遍歷陣列）：
[
{
"id": "1986",
"name": "name1",
"price": 1148
},
{
"id": "1990",
"name": "name2",
"price": 1396
},
];
uj5u.com熱心網友回復：
您正在處理資料，就好像它被構造為單個陣列一樣，如下所示：
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 并像您已經在做的那樣訪問屬性。
uj5u.com熱心網友回復：
無需更改輸入即可執行此操作。
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/341035.html
標籤：javascript 查询 json