JavaScript:将三维数组连接到二维数组中,将值包装在html标记中
JavaScript: Concatenate 3D array into 2D array, wrapping values in html tags
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个对象,但不知道如何通过编程实现。如果你能使用我现有的变量,我将不胜感激!谢谢
您可以使用map
。首先将数据放入多维数组中,然后为每个数字创建li
:
var listData = x.line
.map(function(obj){return obj.data})
.map(function(ns){return '<li>'+ ns.join('</li><li>') +'</li>'})
这将适用于任意数量的数据对象,其中包含任意数量项的数组。
相关文章:
- 如何在输入中选择的文本周围包装html标记
- 如何使用jquery检测包装的纯文本并应用html标记
- 用Javascript包装HTML字符串中未包装的部分
- 调用一个按钮点击,该按钮被包装在html页面内的另一个html标记中
- 将字符串列表包装在复杂的 HTML 标记中
- 我正在尝试使用 html 元素包装函数的返回值
- 使用 jQuery 将一个 HTML 标记包装在另一个标签中
- 使用 Javascript 的 replace() 方法用 html 包装单词
- 使用 jquery / javascript 在 Wordpress 中包装一系列 HTML 元素
- 包装 HTML 标记以使所有标记都可单击
- 如何使用jQuery将所有HTML元素包装在DIV中,具体取决于这些HTML元素的总高度
- 反应:将事件侦听器添加到没有包装器 html 标记的道具中
- 如何截断非包装HTML表单元格中多余的文本并以“…”结尾&”;
- 包装html选择选项
- 用prototype.js在span中包装html内容-这可能吗?
- 指令内容在包装html之前呈现
- 如何包装html标签为jquery鼠标选择单词
- 使用jQuery包装html的某些部分
- Regexp用于包装HTML页面上的每个单词
- 在React.js中包装HTML时,避免使用危险的setinnerhtml