How to extract parts of nested multi-level JSON objects / array and flatten it with JavaScript

Question

I'm working with the following data structure:

"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
                    }
                ]
            }
        ]
    ]
}

I'd like extract parts of it to flatten so the results is as follows:

[
    {
        "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
    }
]

How can I accomplish this?

I have tried this:

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

... but had problems looping through the children objects. I've found a couple other similar questions, but they seem to address simpler data structures, and flatten the entire object rather than parts of it.

Any pointers would be appreciated.

you cant use `for(var key in data)` it will work for Object, but for Array it return index, soulotions are `forEach,Map,Reduce` and easiest is `forEach` — Nozar Safari, Nov 16 '17 at 07:57

Nozar Safari · Accepted Answer · 2017-11-16T08:00:23.040

1

input.data.products. ....

maube Change in row 1 depend on your variable name

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


          result.push(item)


      })

    })

})

edited Nov 16 '17 at 08:00

answered Nov 16 '17 at 07:30

Nozar Safari

505
4
17

You shouldn't used x and y as variable names. Otherwise, this seems like the simplest/cleanest way – Chris Phillips Nov 16 '17 at 07:35

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

You will have to try something like this:

Logic:

Loop over data.products to get individual product details.
Sine details are also arrays, loop over them and return items from them.

The trick is, you will have to use Array.prototype.concat to merge arrays returned, to flatten them.

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)

Hey Rajesh, in response to your previous comment (now deleted), I have tried some stuff, and the looping part is where I was having problems: `for (var sets in data.products) { for (var categories in sets) { for (var items in categories) { for (var item in items) { // assemble new array } } } }` — Krush, Nov 16 '17 at 07:26
@P.Krush Adding your effort helps us to understand how far you have reached and how much further you want to go to achieve your goal. We can also point out corrections/ improvements. Just saying *I have this input and want to achieve this* makes the question a requirement. Your effort is what makes it a problem statement. So remember to share it **in question** in future. — Rajesh, Nov 16 '17 at 07:33

score 0 · Answer 3 · answered Nov 16 '17 at 07:28

I have assigned your JSON object for data to a variable first. See the code below:

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]);
    }
  }
}

The flatArray will be your required flattened array of objects. Hope this is clear enough.

score 0 · Answer 4 · answered Nov 16 '17 at 07:37

You can use array#reduce, array#forEach and 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; }

Nina Scholz · Answer 5 · 2017-11-16T07:47:42.917

You could use a recursive approach by checking the items property or return the result of reduced properties. This approach works for any depth with an expected items property at the end.

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; }

How to extract parts of nested multi-level JSON objects / array and flatten it with JavaScript

5 Answers5

Logic: