遍历包含对象的 arrays 数组并从对象中获取所有特定值，然后显示到页面 JQuery

Question

对于名为data的数组中的以下arrays中的每一个，都会有一个li（目前有3个li，所以有3个数组）
我需要遍历下面的 arrays 并从每个 object 获取所有“命名空间”值和“当前值”值。

然后将第一个数组中所有对象的第一组“命名空间和当前值值”显示为第一个 li 中的文本，然后对第三个等执行相同操作……我评论了一个示例，说明它应该如何查看HTML。

谢谢你的帮助！

这是我到目前为止所得到的：

 let data = [ [{_id: "5e9d", namespace: "Effect", currentvalue: "comet",}, { _id: "1169", namespace: "HazCode", currentvalue: "50",}, { _id: "1269", namespace: "Duration", currentvalue: "10s",}], [{_id: "6e9d", namespace: "Effect", currentvalue: "comet/flair",}, { _id: "1119", namespace: "HazCode", currentvalue: "50",}], [{_id: "7e9d", namespace: "Effect", currentvalue: "flair",},{ _id: "1178", namespace: "HazCode", currentvalue: "29",},] ] var els = $('.hideMe > li') // loop through array for(var i = 0; i < data.length; i++){ $.each(data[i], function(index, d){ els.text(d.namespace + ":" + d.currentvalue + ", ") }) }

 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <ul class="hideMe"> <:-- First Should be <li> Effect, comet: HazCode, 50: Duration: 10s</li> --> <li>lorem</li> <,-- Second Should be <li> Effect: comet. HazCode. 29</li> --> <.-- etc... --> <li>lorem</li> <li>lorem</li> </ul> </body> </html>

Answer 1

为了实现您的要求，您可以使用forEach循环遍历data中的每个数组。 然后，您可以使用map()构建包含所有namespace和currentvalue属性的格式化字符串，您可以使用text()添加到相关的li中。 尝试这个：

var $els = $('.hideMe > li')
data.forEach((arr, i) => $els.eq(i).text(arr.map(o => `${o.namespace}: ${o.currentvalue}`).join(', ')));

 let data = [ [ { _id: "5e9d", namespace: "Effect", currentvalue: "comet" }, { _id: "1169", namespace: "HazCode", currentvalue: "50" }, { _id: "1269", namespace: "Duration", currentvalue: "10s" } ], [ { _id: "6e9d", namespace: "Effect", currentvalue: "comet/flair" }, { _id: "1119", namespace: "HazCode", currentvalue: "50" } ], [ { _id: "7e9d", namespace: "Effect", currentvalue: "flair" }, { _id: "1178", namespace: "HazCode", currentvalue: "29" } ] ] var $els = $('.hideMe > li') data.forEach((arr, i) => $els.eq(i).text(arr.map(o => `${o.namespace}: ${o.currentvalue}`).join(', ')));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="hideMe"> <li>lorem</li> <li>lorem</li> <li>lorem</li> </ul>

顺便说一句，请注意不要在对象和 arrays 中留下逗号。 大多数现代浏览器都可以处理它，但一些旧版浏览器会因此而引发错误。 我已经从上面的示例中删除了它们。

Answer 2

你可以通过这种方式实现你的目标

var els = $('.hideMe > li');
  // loop through array
  for(var i = 0; i < data.length; i++){
    let result = '';
    $.each(data[i], function(index, d){
      result += d.namespace + ":" + d.currentvalue + ", ";
    });
    els.eq(i).text(result);
  }

遍历包含对象的 arrays 数组并从对象中获取所有特定值，然后显示到页面 JQuery

问题描述

2 个解决方案

解决方案1
1 已采纳 2020-04-20 14:52:08

解决方案2
1 2020-04-20 15:01:22

遍历包含对象的 arrays 数组并从对象中获取所有特定值，然后显示到页面 JQuery

问题描述

2 个解决方案

解决方案1 1 已采纳 2020-04-20 14:52:08

解决方案2 1 2020-04-20 15:01:22

解决方案1
1 已采纳 2020-04-20 14:52:08

解决方案2
1 2020-04-20 15:01:22