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遍历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\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>
<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">

希望有帮助

单击按钮循环遍历数组

2 个答案: