how to add children to existing array in javascript

Question

I have an array in javascript:

var elements = [ // original hierarhical array to display
            {key:10, label:"Web Testing Dep.", open: true, children: [
                {key:20, label:"Elizabeth Taylor"},
                {key:30, label:"Managers",  children: [
                    {key:40, label:"John Williams"},
                    {key:50, label:"David Miller"}
                ]},
                {key:60, label:"Linda Brown"},
                {key:70, label:"George Lucas"}
            ]},
            {key:110, label:"Human Relations Dep.", open:true, children: [
                {key:80, label:"Kate Moss"},
                {key:90, label:"Dian Fossey"}
            ]}
        ];

If I want to add a whole new element I can use a push(). But I want to add a part of an element. for exemple I want to add

var toAdd = {key:100, label:"Johny Dep"}

To the children of key 10 "web testing dep.". Is it also possible with a push()?

You can use push on any array. It does not matter if that array is itself part of a larger data structure. — C3roe
– C3roe, Commented May 11, 2017 at 8:41

Nina Scholz · Accepted Answer · 2017-05-11 09:15:05Z

You could use an iterative and recursive approach for getting the not to insert the new object.

function addToStructure(structure, object, parent) {
    structure.some(function iter(a) {
        if (a.key === parent) {
            a.children = a.children || [];
            a.children.push(object);
            return true;
        }
        return Array.isArray(a.children) && a.children.some(iter);
    });
}

var elements = [{ key: 10, label: "Web Testing Dep.", open: true, children: [{ key: 20, label: "Elizabeth Taylor" }, { key: 30, label: "Managers", children: [{ key: 40, label: "John Williams" }, { key: 50, label: "David Miller" }] }, { key: 60, label: "Linda Brown" }, { key: 70, label: "George Lucas" }] }, { key: 110, label: "Human Relations Dep.", open: true, children: [{ key: 80, label: "Kate Moss" }, { key: 90, label: "Dian Fossey" }] }];

addToStructure(elements, { key: 100, label: "Johny Dep" }, 10);

console.log(elements);

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

prasanth · Accepted Answer · 2017-05-11 08:42:41Z

Try this elements[0].children.push(toAdd)

var elements = [ // original hierarhical array to display
            {key:10, label:"Web Testing Dep.", open: true, children: [
                {key:20, label:"Elizabeth Taylor"},
                {key:30, label:"Managers",  children: [
                    {key:40, label:"John Williams"},
                    {key:50, label:"David Miller"}
                ]},
                {key:60, label:"Linda Brown"},
                {key:70, label:"George Lucas"}
            ]},
            {key:110, label:"Human Relations Dep.", open:true, children: [
                {key:80, label:"Kate Moss"},
                {key:90, label:"Dian Fossey"}
            ]}
        ];
var toAdd = {key:100, label:"Johny Dep"}
elements[0].children.push(toAdd)
console.log(elements)

Sachin Singh · Accepted Answer · 2017-05-11 08:45:29Z

0

You can do this:

elements.filter(function(e) {
    return e.key === 10;
})[0].children.push(toAdd);

Where toAdd is { key: 100, label: "Johny Depp" }

answered May 11, 2017 at 8:45

Sachin Singh

9681 gold badge11 silver badges19 bronze badges

Comments

Wikiti · Accepted Answer · 2017-05-11 08:56:35Z

0

First, you need to find the element that you want to modify:

var element_to_modify = elements.find(function(element) {
  return element.key == 10;
});

Then, modify the item by pushing into their children the new object:

element_to_modify.children.push(toAdd)

answered May 11, 2017 at 8:56

Wikiti

1,63613 silver badges21 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:34:34Z

As CBroe suggest in his comment that we can push an element or object in an array. It does not matter if that array is itself part of a larger data structure.

DEMO

var elements = [ // original hierarhical array to display
            {key:10, label:"Web Testing Dep.", open: true, children: [
                {key:20, label:"Elizabeth Taylor"},
                {key:30, label:"Managers",  children: [
                    {key:40, label:"John Williams"},
                    {key:50, label:"David Miller"}
                ]},
                {key:60, label:"Linda Brown"},
                {key:70, label:"George Lucas"}
            ]},
            {key:110, label:"Human Relations Dep.", open:true, children: [
                {key:80, label:"Kate Moss"},
                {key:90, label:"Dian Fossey"}
            ]}
        ];
        
var toAdd = {key:100, label:"Johny Dep"}

elements[0].children.push(toAdd);

console.log(elements);

Collectives™ on Stack Overflow

how to add children to existing array in javascript

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related