如何提取嵌套的多层JSON对象/数组的部分并使用JavaScript对其进行展平

Question

我正在使用以下数据结构：

"data": {
    "products": [
        [
            {
                "category": "A",
                "items": [
                    {
                        "name": "Aloe",
                        "price": 10
                    },
                    {
                        "name": "Apples",
                        "price": 5
                    }
                ]
            },
            {
                "category": "B",
                "items": [
                    {
                        "name": "Bread",
                        "price": 5
                    }
                ]
            }
        ],
        [
            {
                "category": "C",
                "items": [
                    {
                        "name": "Candy",
                        "price": 5
                    },
                    {
                        "name": "Crayon",
                        "price": 5
                    }
                ]
            },
            {
                "category": "D",
                "items": [
                    {
                        "name": "Dice",
                        "price": 5
                    },
                    {
                        "name": "Doll",
                        "price": 10
                    }
                ]
            }
        ]
    ]
}

我希望提取其中的一部分以使其扁平化，结果如下：

[
    {
        "name": "Aloe",
        "price": 10
    },
    {
        "name": "Apples",
        "price": 5
    },
    {
        "name": "Bread",
        "price": 5
    },
    {
        "name": "Candy",
        "price": 5
    },
    {
        "name": "Crayon",
        "price": 5
    },
    {
        "name": "Dice",
        "price": 5
    },
    {
        "name": "Doll",
        "price": 10
    }
]

我该怎么做？

我已经试过了：

for (var sets in data.products) {
  for (var categories in sets) {
    for (var items in categories) {
      for (var item in items) { 
        // assemble new array 
      }
    }
  }
}

...但是在遍历子对象时遇到问题。 我发现了另外两个类似的 问题 ，但是它们似乎解决了更简单的数据结构，并展平了整个对象而不是部分对象。

任何指针将不胜感激。

Answer 1

input.data.products. ....

maube在第1行中的更改取决于您的变量名

var result =[]
input.data.products.forEach(function (product){
    product.forEach(function(productinfo){
      productinfo.items.forEach(function (item){


          result.push(item)


      })

    })

})

Answer 2

您将必须尝试这样的事情：

逻辑：

• 循环访问data.products以获取各个产品的详细信息。
• 正弦细节也是数组，在数组上循环并从中返回items 。

诀窍是，您将必须使用Array.prototype.concat合并返回的数组，以将它们展平。

 var data = { "products": [ [{ "category": "A", "items": [{ "name": "Aloe", "price": 10 }, { "name": "Apples", "price": 5 } ] }, { "category": "B", "items": [{ "name": "Bread", "price": 5 }] } ], [{ "category": "C", "items": [{ "name": "Candy", "price": 5 }, { "name": "Crayon", "price": 5 } ] }, { "category": "D", "items": [{ "name": "Dice", "price": 5 }, { "name": "Doll", "price": 10 } ] } ] ] } var result = [].concat.apply([], data.products.map(function(product){ return [].concat.apply([], product.map(function(p){ return p.items })) })) console.log(result) 

Answer 3

我首先将数据的JSON对象分配给了一个变量。 请参见下面的代码：

var pro={
    "products": [
        [
            {
                "category": "A",
                "items": [
                    {
                        "name": "Aloe",
                        "price": 10
                    },
                    {
                        "name": "Apples",
                        "price": 5
                    }
                ]
            },
            {
                "category": "B",
                "items": [
                    {
                        "name": "Bread",
                        "price": 5
                    }
                ]
            }
        ],
        [
            {
                "category": "C",
                "items": [
                    {
                        "name": "Candy",
                        "price": 5
                    },
                    {
                        "name": "Crayon",
                        "price": 5
                    }
                ]
            },
            {
                "category": "D",
                "items": [
                    {
                        "name": "Dice",
                        "price": 5
                    },
                    {
                        "name": "Doll",
                        "price": 10
                    }
                ]
            }
        ]
    ]
}
var flatArray=[];
for(var i=0; i<pro.products.length; i++){
  for(var j=0; j<pro.products[i].length;j++){
    for(var k=0; k<pro.products[i][j].items.length;k++){
      flatArray.push(pro.products[i][j].items[k]);
    }
  }
}

flatArray将是您需要的扁平对象数组。 希望这足够清楚。

Answer 4

您可以使用array#reduce ， array#forEach和array#concat 。

 var input = { data: { products: [[{ category: "A", items: [{ name: "Aloe", price: 10 }, { name: "Apples", price: 5 }] }, { category: "B", items: [{ name: "Bread", price: 5 }] }], [{ category: "C", items: [{ name: "Candy", price: 5 }, { name: "Crayon", price: 5 }] }, { category: "D", items: [{ name: "Dice", price: 5 }, { name: "Doll", price: 10 }] }]] } }; const result = input.data.products.reduce((res, arr) => { arr.forEach( o => res = res.concat(o.items)); return res; },[]); console.log(result); 

 .as-console-wrapper { max-height: 100% !important; top: 0; } 

Answer 5

您可以通过检查items属性来使用递归方法，或者返回归约属性的结果。 这种方法适用于任何深度，最后具有预期的items属性。

 function flat(object) { return object.items || Object.keys(object).reduce(function (r, k) { return r.concat(flat(object[k])); }, []); } var object = { data: { products: [[{ category: "A", items: [{ name: "Aloe", price: 10 }, { name: "Apples", price: 5 }] }, { category: "B", items: [{ name: "Bread", price: 5 }] }], [{ category: "C", items: [{ name: "Candy", price: 5 }, { name: "Crayon", price: 5 }] }, { category: "D", items: [{ name: "Dice", price: 5 }, { name: "Doll", price: 10 }] }]] } } console.log(flat(object)); 

 .as-console-wrapper { max-height: 100% !important; top: 0; }