如何提取嵌套的多層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; }