【问题标题】:Javascript Concat Multidimensional ArrayJavascript Concat 多维数组
【发布时间】:2017-07-07 12:56:47
【问题描述】:

我正在尝试连接一个多维数组,以便可以迭代并显示所有数据。关于如何访问嵌套数据here 有一篇非常好的帖子,但我正在寻找一种适用于特定数据结构的解决方案。

这是我的数据:

var data = {
"Nike": [
    {
    "id": "1",
    "name": "test",
    "myimage": "image.gif"},

     {
    "id": "2",
    "name": "test",
    "myimage": "image.gif"}
],

"Adidas": [
    {
    "id": "3",
    "name": "Football Boots",
    "myimage": "image.gif"},

     {
    "id": "4",
    "name": "Running Shoes",
    "myimage": "image.gif"}
]}

如果我这样做,我似乎能够从 Nike 数组中获取值:

var result = data.Adidas;


for (var i = 0; i < result.length; i++) {
 var object = result[i];
 for (property in object) {
    var value = object[property];
    alert(property + "=" + value + "<br>");
 }
}

但是我希望能够显示所有数组项(id 的 1-4)。

我尝试做的是:

var result = [].concat.apply([], data);

... 并使用相同的 for 循环遍历结果变量,但它不起作用。

我理想的最终结果是在每个品牌名称下展示四种产品。我不需要显示实际的品牌名称本身。例如:

 "id": "1",
    "name": "test",
    "myimage": "image.gif"

 "id": "2",
    "name": "test",
    "myimage": "image.gif"

"id": "3",
    "name": "Football Boots",
    "myimage": "image.gif",

"id": "4",
    "name": "Running Shoes",
    "myimage": "image.gif"

任何帮助表示赞赏。

干杯

【问题讨论】:

标签: javascript arrays multidimensional-array


【解决方案1】:

您可以使用reduce 并遍历对象的键,然后创建您的数组:

var mashed = Object.keys(data).reduce(function(arr, key) {
    return arr.concat(data[key]);
}, []);

演示:https://jsfiddle.net/kvd6egn5/

【讨论】:

  • 完美!!完全符合我的要求。非常感谢 tymeJV
【解决方案2】:

reduce 的替代方法是 for in 循环:

let res = [];
for (let key in data) res = res.concat(data[key]);
console.log(res);

【讨论】:

    【解决方案3】:

    你可以使用 lodash mergeWith 函数:

    const object = {
      'a': [{ 'b': 2 }, { 'd': 4 }]
    };
    
    const other = {
      'a': [{ 'c': 3 }, { 'e': 5 }]
    };
    
    _.merge(object, other);
    

    https://lodash.com/docs/4.17.15#mergeWith

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2017-05-24
      • 2022-01-18
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-10-14
      • 1970-01-01
      • 2019-06-13
      相关资源
      最近更新 更多