Dynamically create nested javascript objects with the same key but different values from an array

Question

Need help figuring this out.. I want to create nested Javascript Object dynamically..

I have got a key, which has multiple values that needs to be nested per value in an array. For example:

{
    "name": [{
        "desc": "A",
        "age": 26,
        "name": [{
            "desc": "B",
            "age": 12,
            "name": [{
                "desc": "C",
                "age": 48
            }]
        }]
    }]
}

So far i have this:

var data = [[{desc:"A", age:26}], [{desc:"B", age:12}], [{desc:"C", age:48}]]
const name = "name"
var json = {};
var current = json;
for (var i = 0; i < data.length; i++) {
    current[name] = data[i];
    current = current[name];
}


console.log(JSON.stringify(json));

Which only returns the first item in the data array.

{
    "name": [{
        "desc": "A",
        "age": 26
    }]
}

There's no JSON in your question. json contains a regular object (hence the name of the variable is wrong). And there's no such thing as a "JSON Object". — Andreas
– Andreas, Commented Nov 29, 2019 at 15:21
Do you want to add a name property to each array,which would contains the next object in the array ? — Nicolas
– Nicolas, Commented Nov 29, 2019 at 15:22
Just be careful, JSON Object != JavaScript Object. They share a lot of similar properties, but one is a language-agnostic data standard and the other is how JavaScript deals with data. — James Whiteley
– James Whiteley, Commented Nov 29, 2019 at 15:22
@Nicolas yes, that is correct! the key for each object is same. — Jay
– Jay, Commented Nov 29, 2019 at 15:27

Wojciech Dynus · Accepted Answer · 2019-11-29 18:35:16Z

2

Below code does what you want:

var data = [[{desc:"A", age:26}], [{desc:"B", age:12}], [{desc:"C", age:48}]]
const value = data.reverse().reduce((acc, item) => {
    return [{
        ...item[0],
        name: acc
    }]
});

console.log(value);

Though if you just had an array of objects instead of an array of arrays containing objects this would be slightly easier:

var data = [{desc:"A", age:26}, {desc:"B", age:12}, {desc:"C", age:48}]
data.reverse().reduce((acc, item) => {
    return [{
        ...item,
        name: acc
    }]
});

edited Nov 29, 2019 at 18:35

answered Nov 29, 2019 at 15:33

Wojciech Dynus

9225 silver badges11 bronze badges

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

8 Comments

Nicolas Over a year ago

I've tested your solution and you might want to check out the last children created, it creates an array rather than an object. I'm not sure that's what OP wants.

Wojciech Dynus Over a year ago

Yes, thank you, I didn't notice that - now this should be what was asked for.

Marios Nikolaou Over a year ago

Can you explain in more detail what ...item and acc is and how they work?

Jay Over a year ago

@WojciechDynus Very interesting..can you please explain?

Wojciech Dynus Over a year ago

Ok, so the idea overall is to start from the deepest point (C in our case) and go up creating objects containing item's properties and name property with previous (deeper) object as a value. That's why there is reverse at the beginning. Next I use reduce function which is beet described here developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…. In my case acc stands for the accumulator. So with the reduce I "iterate" over the array and create proper objects using spread operator (...). I encourage you to play around with reduce and spread operator

|

Nicolas · Accepted Answer · 2019-11-29 15:37:33Z

1

You need to use recursion in this case since your are creating children.
In this code, we reduce the size of the array by removing the first element and passing it back to the same function

var data = [
  [{desc:"A", age:26}],
  [{desc:"B", age:12}],
  [{desc:"C", age:48}]
]

function recursivelyAssignData(array) {
  // we get the current element, to assign it a property "name", 
  const currentElement = array[0][0]
  // we remove the first element, so it wont be pass to subsequent call of the function.
  array.shift();
  // if this is the last element, we don't want to assign the property "name" to it.
  return array.length >= 1 ? Object.assign(currentElement, {
    // we assign the value of same function, but with a different array.
    name: recursivelyAssignData(array),
  }) : currentElement;
}


const result = {request: recursivelyAssignData(data)};
console.log('results:', result , 'json:', JSON.stringify(result ));

P.S
Recursion might not be the most intuitive thing in the world, if you have trouble understand it, please ask question.

edited Nov 29, 2019 at 15:37

answered Nov 29, 2019 at 15:30

Nicolas

8,7364 gold badges25 silver badges58 bronze badges

1 Comment

Jay Over a year ago

Ahh, i see Thank you! I do however, want to array itself to be assigned to the name key. I am going to give it a shot using your code above. Thanks again! :)

Nikhil · Accepted Answer · 2019-11-29 15:45:28Z

1

You are almost there. Since the values are inserted as first item in an array, use index 0 to access them.

const data = [[{desc:"A", age:26}], [{desc:"B", age:12}], [{desc:"C", age:48}]];
const name = "name";
let result = {
  [name]: data[0]
};
let obj = result;

for (let i = 1; i < data.length; i++) {
  let current = obj[name][0];
  current[name] = data[i];
  obj = current;
}

console.log(result);

answered Nov 29, 2019 at 15:45

Nikhil

6,68110 gold badges36 silver badges74 bronze badges

2 Comments

Jay Over a year ago

Thanks @Nikhil! this is such a simple way to achieve what i am looking for.

Nikhil Over a year ago

That's right @Jay. You're welcome. I'm glad it helped.

Collectives™ on Stack Overflow

Dynamically create nested javascript objects with the same key but different values from an array

3 Answers 3

8 Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related