單擊按鈕循環遍歷數組

Question

我有一個數組，可以通過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，隱藏第一個位置並向我顯示第二個位置的值。

我如何通過一鍵操作來顯示相應的值？ 真的卡在這上面。 謝謝！

Answer 1

在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":""}]

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

Answer 2

您好，使用@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\ück", "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\ück", "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> <table id="example" border=1> <thead> <th>Post</th> <th>code</th> <th>bez</th> <th>anr</th> <th>qty</th> <th>ve</th> </thead> <tbody id="tbodyExample"> </tbody> </table> <br> <input type="button" id="btnAdd" value="add Row"> 

希望能幫助到你