时间戳

首页 > 解决方案 > 单击按钮时循环遍历数组

javascript - 单击按钮时循环遍历数组

问题描述

我有一个数组，我通过 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，隐藏第一个位置并向我显示第二个位置的值。

如何通过一键按下来向我显示相应的值？真的卡在这上面了。谢谢！

标签： javascriptphphtmlarraysjson

解决方案

在 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 => {});地渲染它们。

推荐阅读