JavaScript：将 3D 数组连接成 2D 数组，将值包装在 html 标签中答案

【问题标题】：JavaScript: Concatenate 3D array into 2D array, wrapping values in html tagsJavaScript：将 3D 数组连接成 2D 数组，将值包装在 html 标签中
【发布时间】：2014-10-05 11:15:12
【问题描述】：

3D 阵列

// Array

var x = {
  "letter": [ "a", "b", "c", "d", "e", "f", "g", "h", "i" ],
  "line": [
    { "data": [ 306, 830, 377, 651, 547, 369, 300, 148, 494 ] },
    { "data": [ 88, 339, 298, 87, 96, 108, 93, 182, 64 ] },
    { "data": [ 3157, 2943, 2724, 2116, 3700, 2980, 2449, 2494, 1057 ] },
    { "data": [ 2006, 1921, 2030, 615, 273, 415, 680, 286, 730 ] }
    ]
  };

一些变量

// Variables

var line = x.line;
var data = [];
for (var i = 0; i < line.length; i++) {
  data.push(line[i].data);
  }

有问题的实际代码

// Existing code (only works on fixed number of array objects, but I want something that will work on any number of objects)

var listData = [];
for (var i = 0; i < line.length; i++) { listData.push(''); }
for (var i = 0; i < data[0].length; i++) {
  listData[0] += '<li>' + data[0][i] + '</li>';
  listData[1] += '<li>' + data[1][i] + '</li>';
  listData[2] += '<li>' + data[2][i] + '</li>';
  listData[3] += '<li>' + data[3][i] + '</li>';
  }

// Perhaps something like this? This is where I got stuck...

var listData = [];
for (var i = 0; i < line.length; i++) {
  listData.push('');
  listData[i] += '<li>' + data[i][/* ??? */] + '</li>';
  }

我想将line[data] 对象简化为一个数组，将每个data 对象的值包装在一个html <li> 标记中，然后将它们连接成每个对象的一个字符串。所以listData 如下所示：

想要的结果

listData == [
"<li>306</li><li>830</li><li>377</li><li>651</li><li>547</li><li>369</li><li>300</li><li>148</li><li>494</li>",
"<li>88</li><li>339</li><li>298</li><li>87</li><li>96</li><li>108</li><li>93</li><li>182</li><li>64</li>",
"<li>3157</li><li>2943</li><li>2724</li><li>2116</li><li>3700</li><li>2980</li><li>2449</li><li>2494</li><li>1057</li>",
"<li>2006</li><li>1921</li><li>2030</li><li>615</li><li>273</li><li>415</li><li>680</li><li>286</li><li>730</li>"
]

但我想这样做的方式不仅适用于 4 个数据对象，而且适用于最初在 x 中的任意数量的数据对象。

您可以看到我是用那里的 4 个对象完成的，但不知道如何以编程方式完成。如果您可以使用我现有的变量，我将不胜感激！谢谢。

【问题讨论】：

你想要<li>306></li>...<li>88</li>...吗？
@AmitJoki 没有；见 CodePen。
如果您将所需的输出添加到您的问题中，会更容易提供帮助；必须在其他地方查看您的演示是不必要的步骤：演示是为了支持您的问题，而不是替代它们。
@DavidThomas 正好 +1
@DavidThomas 我尝试通过代码片段工具添加我的代码，但它不起作用。这就是我最初包含 CodePen 的原因。根据您的建议，我现在已经用我的代码和所需的输出块更新了问题。

标签： javascript arrays multidimensional-array

【解决方案1】：

您可以使用map。首先将数据放入多维数组，然后为每个数字创建li：

var listData = x.line
  .map(function(obj){return obj.data})
  .map(function(ns){return '<li>'+ ns.join('</li><li>') +'</li>'})

这将适用于任意数量的数据对象，包含任意数量的项目的数组。

【讨论】：