为了账号安全,请及时绑定邮箱和手机立即绑定

单击按钮时循环遍历数组

单击按钮时循环遍历数组

至尊宝的传说 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>

<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">


希望能帮助到你


查看完整回答
反对 回复 2021-12-24
  • 2 回答
  • 0 关注
  • 280 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信