首頁猿問單擊按鈕時循環遍歷數組

單擊按鈕時循環遍歷數組

JavaScript

至尊寶的傳說 2021-12-24 09:20:12

我有一個數組，我通過 json_encode() 放入我的文件中；來自我的 .php 文件。該數組如下所示：{ "15800175": { "posID": "159469", "scanID": "22597", "anr": "15800175", "TVanr": "", "code": "G-09-27-2E", "ean": "4710069680575", "marke": "fox", "bez": "jersey yellow", "bez2": "size xl", "menge": "1", "ve": "St\u00fcck", "Dimensionstext": "TT9857BG\r\n", "Langtext": "" }, "15100027": { "posID": "159471", "scanID": "22597", "anr": "15100027", "TVanr": "", "code": "G-11-03-2A", "ean": "4712511825411", "marke": "fox", "bez2": "jersey L", "menge": "1", "ve": "St\u00fcck", "Dimensionstext": "blue\r\n", "Langtext": "" },例如，我想在看起來像這樣的表中顯示值Pos | code | bez | anr | qty | ve我希望它首先顯示數組的第一個位置，這將等于 15800175，對嗎？然后當我按下“下一步”按鈕時，它應該切換 div，隱藏第一個位置并顯示第二個位置的值。我如何通過一鍵按下來顯示相應的值？真的堅持這一點。謝謝！

查看完整描述

2 回答

飲歌長嘯

TA貢獻1951條經驗獲得超3個贊

在javascript中，afaik，“數組”和你在那里擁有的東西之間存在區別，我們稱之為“對象”。在 PHP 中，我想它們都被稱為“數組”，當你有數組值的鍵時，它被稱為“關聯數組”，但在 Javascript 中，我們稱這些“對象”是為了將它們與看起來像的數組區分開來[1,2,3]

所以第一步是將你的對象真正變成一個數組。我會做這樣的事情：

var obj = {

"15800175": {

"posID": "159469",

"scanID": "22597",

"anr": "15800175",

"TVanr": "",

"code": "G-09-27-2E",

"ean": "4710069680575",

"marke": "fox",

"bez": "jersey yellow",

"bez2": "size xl",

"menge": "1",

"ve": "St\u00fcck",

"Dimensionstext": "TT9857BG\r\n",

"Langtext": ""

"15100027": {

"posID": "159471",

"scanID": "22597",

"anr": "15100027",

"TVanr": "",

"code": "G-11-03-2A",

"ean": "4712511825411",

"marke": "fox",

"bez2": "jersey L",

"menge": "1",

"ve": "St\u00fcck",

"Dimensionstext": "blue\r\n",

"Langtext": ""

}

var arr = Object.keys(obj).map(key => obj[key]);

最終arr看起來像：

[{"posID":"159471","scanID":"22597","anr":"15100027","TVanr":"","code":"G-11-03-2A","ean":"4712511825411","marke":"fox","bez2":"jersey L","menge":"1","ve":"Stück","Dimensionstext":"blue\r\n","Langtext":""},{"posID":"159469","scanID":"22597","anr":"15800175","TVanr":"","code":"G-09-27-2E","ean":"4710069680575","marke":"fox","bez":"jersey yellow","bez2":"size xl","menge":"1","ve":"Stück","Dimensionstext":"TT9857BG\r\n","Langtext":""}]

然后，您可以arr使用 forEach 回調遍歷每個對象，arr.forEach(item => {});并根據需要渲染它們。

反對回復 2021-12-24

小怪獸愛吃肉

TA貢獻1852條經驗獲得超1個贊

這里使用@Tkol 方法是一種將元素 1 一 1 附加到 html 表的解決方案；

html：

var obj = {

"15800175": {

"posID": "159469",

"scanID": "22597",

"anr": "15800175",

"TVanr": "",

"code": "G-09-27-2E",

"ean": "4710069680575",

"marke": "fox",

"bez": "jersey yellow",

"bez2": "size xl",

"menge": "1",

"ve": "St\u00fcck",

"Dimensionstext": "TT9857BG\r\n",

"Langtext": ""

"15100027": {

"posID": "159471",

"scanID": "22597",

"anr": "15100027",

"TVanr": "",

"code": "G-11-03-2A",

"ean": "4712511825411",

"marke": "fox",

"bez2": "jersey L",

"menge": "1",

"ve": "St\u00fcck",

"Dimensionstext": "blue\r\n",

"Langtext": ""

}

var counter = 0;

var arr = Object.keys(obj).map(key => obj[key]);

document.getElementById("btnAdd").onclick = function(event){

//variables

let tbody = document.getElementById("tbodyExample");

//logic

let element = arr[counter] != undefined ? arr[counter] : undefined;

if(element !== undefined){

var row = document.createElement('tr');//'<tr id="'+element.posID+'"></tr>';

row.setAttribute("id",element.posID);

row.innerHTML = '<td>'+element.posID+'</td><td>'+element.code+'</td><td>'+(element.bez == undefined? element.bez2 : element.bez)+'</td><td>'+element.anr+'</td><td>'+element.menge+'</td><td>'+element.ve+'</td>';

tbody.appendChild(row);

counter++;

}else{

alert("No more items found");

}

<h2>Table example</h2>

<thead>

</thead>

</tbody>

</table>

<br>

希望能幫助到你

反對回復 2021-12-24

2 回答
0 關注
310 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

單擊按鈕時循環遍歷數組

單擊按鈕時循環遍歷數組

2 回答

添加回答