Create a nested array in Javascript

Question

Any suggestions on how to get nested arrays / objects from the following array of objects?

[
{COLOR: "Black", FABRIC_DESIGN: "Leather", SIZE: "S"}
{COLOR: "Black", FABRIC_DESIGN: "Leather", SIZE: "L"}
{COLOR: "Black", FABRIC_DESIGN: "Velvet", SIZE: "S"}
{COLOR: "Black", FABRIC_DESIGN: "Velvet", SIZE: "M"}
{COLOR: "Red", FABRIC_DESIGN: "Velvet", SIZE: "S"}
]

What I am trying to get is:

[
      {
        label: "Black",
        children: [
          { label: "Leather", children: [{ label: "S" }, { label: "L" }] },

          { label: "Velvet", children: [{ label: "S" }, { label: "M" }] }
        ]
      },

      {
        label: "Red",
        children: [{ label: "Velvet", children: [{ label: "S" }] }]
      }
];

I managed to do it for objects with 2 properties but not more than that, and I cant figure out how to do it for objects with N properties.

Build a function that can group an array of objects (with no "sub"-arrays) for a given key: function groupBy(array, key) { /* ... */ return groupedArray; }. If this works then just use this same function for the childrens of the grouped labels — Andreas
– Andreas, Commented May 13, 2020 at 18:59
@Olian04 I generated one object for each COLOR and and added the FABRIC_DESIGN children accordingly just by watching to which COLOR it belongs. But when I get to the SIZE I cant continue because a SIZE belongs to a combination of COLOR and FABRIC_DESIGN, worse still if there are more properties. Sorry if I am not clear, I am quite new — btowers
– btowers, Commented May 13, 2020 at 19:11
@brako thats fine, but please add your code to the question. — Olian04
– Olian04, Commented May 13, 2020 at 19:20

Nenad Vracar · Accepted Answer · 2020-05-13 19:21:07Z

1

You could do this using reduce and forEach methods and one object to keep the data of each level.

const data = [{COLOR: "Black", FABRIC_DESIGN: "Leather", SIZE: "S"},{COLOR: "Black", FABRIC_DESIGN: "Leather", SIZE: "L"},{COLOR: "Black", FABRIC_DESIGN: "Velvet", SIZE: "S"},{COLOR: "Black", FABRIC_DESIGN: "Velvet", SIZE: "M"},{COLOR: "Red", FABRIC_DESIGN: "Velvet", SIZE: "S"}]

const result = []
const levels = {result}
const keys = ['COLOR', 'FABRIC_DESIGN', 'SIZE']

data.forEach(o => {
  keys.reduce((r, k, i, a) => {
    const label = o[k];

    if (!r[label]) {
      const value = {label}

      if (a[i + 1]) {
        r[label] = {result: []}
        value.children = r[label].result
      }

      r.result.push(value)
    }

    return r[label]
  }, levels)
})

console.log(result)

answered May 13, 2020 at 19:21

Nenad Vracar

122k16 gold badges160 silver badges184 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Andreas Over a year ago

@brako Why did you accept a non-recursive answer when you explicitly ask for a recursive solution?

Nenad Vracar Over a year ago

@brako Feel free to accept the answer that works best for you and helps you to solve your problem. If you think you don't need recursion you can always edit your question.

wawan · Accepted Answer · 2020-05-14 06:14:47Z

0

EDIT : Now, you can specify the hierarchy.

var data = [
  {COLOR: "Black", FABRIC_DESIGN: "Leather", SIZE: "S"},
  {COLOR: "Black", FABRIC_DESIGN: "Leather", SIZE: "L"},
  {COLOR: "Black", FABRIC_DESIGN: "Velvet", SIZE: "S"},
  {COLOR: "Black", FABRIC_DESIGN: "Velvet", SIZE: "M"},
  {COLOR: "Red", FABRIC_DESIGN: "Velvet", SIZE: "S"}
]
var hierarchy = ['COLOR', 'FABRIC_DESIGN', 'SIZE'];

// temporary object to make uniqu entries
var structuredDatas = {};

data.forEach(el => {
  var editedDatas = structuredDatas;
  for (depth of hierarchy) {
    if (typeof el[depth] === 'undefined') {
      break;
    }
    if (!editedDatas[el[depth]]) {
      editedDatas[el[depth]] = { label: el[depth], children: {} };
    }
    editedDatas = editedDatas[el[depth]].children;
  }
});
// all data are structured

// next, we format data as expected
var formattedDatas = Object.values(structuredDatas).map(formatLevel)

function formatLevel(datas) {
  datas.children = Object.values(datas.children).map(formatLevel)
  return datas
}
console.log(JSON.stringify(formattedDatas, null, 2));

edited May 14, 2020 at 6:14

answered May 13, 2020 at 19:16

wawan

4876 silver badges11 bronze badges

3 Comments

btowers Over a year ago

it works for this specific example, but if the size of the objects is not 3 or the property name change it doesnt. What I am trying to achieve is for arrays with objects that have a variable number of properties and unknown property names.

wawan Over a year ago

I understand, but Json ‘s key order can’t be used, because keys are not ordered. You must specify somewhere the hierarchy.

btowers Over a year ago

I created the objects out of arrays like: ` [ { id: "COLOR", name: "Color", value_name: "Black" }, { id: "FABRIC_DESIGN", name: "Fabric", value_name: "Leather" }, { id: "SIZE", name: "Size", value_name: "S" } ]` Do you think I´d better work with the arrays insted of creating the objects?

Collectives™ on Stack Overflow

Create a nested array in Javascript

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related