Home » Javascript » Unable insert element in nested array dynamically

Unable insert element in nested array dynamically

Posted by: admin November 1, 2017 Leave a comment

Questions:

I am working on angular tree which is having a large nested array.

nodes :

public fonts: TreeModel = {
    value: 'Fonts',
    children: [
      {
        value: 'Serif  -  All my children and I are STATIC ¯\_(ツ)_/¯',
        settings: {
          'static': true
        },
        children: [
          { value: 'Antiqua' },
          { value: 'DejaVu Serif' },
          { value: 'Garamond' },
          { value: 'Georgia' },
          { value: 'Times New Roman' },
          {
            value: 'Slab serif',
            children: [
              { value: 'Candida' },
              { value: 'Swift' },
              { value: 'Guardian Egyptian' }
            ]
          }
        ]
      },
      {
        value: 'Sans-serif',
        children: [
          { value: 'Arial' },
          { value: 'Century Gothic' },
          { value: 'DejaVu Sans' },
          { value: 'Futura' },
          { value: 'Geneva' },
          { value: 'Liberation Sans' }
        ]
      }
    ]};

The Tree looks similar to one present in image : enter image description here

Each time user clicks on Any node, an API request goes to bring Child of that node (JSON Array). then i need to append this response array into original tree array .
The problem I’m facing is how do i insert child of nodes dynamically into original array against the parent node user clicked on.

Any better solution of current problem will also be helpful for me.
Currently i am using angular2-tree-component to implement the tree.

Answers: