Dynamically created nested array in javascript

Question

I need to dynamically create a nested array in javascript. The array needs to have this structure.

{
  "name": "main",
  "children": [
    {
      "name": "main_topic_1",
      "children": [
        {
          "name": "sub_topic",
          "size": 422
        },
        {
          "name": "sub_topic",
          "size": 422
        }
      ]
    },
    {
      "name": "main_topic_2",
      "children": [
        {
          "name": "sub_topic",
          "size": 422
        },
        {
          "name": "sub_topic",
          "size": 422
        }
      ]
    },
    {
      "name": "main_topic_3",
      "children": [
        {
          "name": "sub_topic",
          "size": 422
        },
        {
          "name": "sub_topic",
          "size": 422
        }
      ]
    }
  ]
}

I need to be able to dynamically choose the number of "main_topic_x" as well as the number of sub_topics that belong to those respective main_topics.

I am trying something like this, but I don't know how to get the structure as above.

main_topics = ['topic 1','topic 2','topic 3'];
    sub_topics = ['subtopic 1','subtopic 2'];

    var a = new Array();
    var b = new Array();

    for(l=0; l<main_topics.length; l++){
      a[l] = b;
      for(j=0; j<sub_topics.length; j++){
        b[l] = sub_topics[j];
      }
    }
  
    console.log(JSON.stringify(a, null, 2));

Why do elements of main_topics and sub_topics include space character in string? Where are name and size properties populated in objects? — guest271314
– guest271314, Commented Jan 6, 2017 at 1:32
You again? lol With the structure as you have it, you will have to iterate over the entire object to look for the key. If the structure doesn't have to be like that, I'd recommend restructuring it using what you want as a key so you can reference it easier. — deweyredman
– deweyredman, Commented Jan 6, 2017 at 1:33
Unfortunately the structure has to be like this since it is feeding a D3 visualization. I just need to be able to dynamically set the number of topics and subtopics; I know how to name them now. — Cybernetic
– Cybernetic, Commented Jan 6, 2017 at 1:36
I'm pretty adept at d3. If you explain which visualization and what you're trying to do I might be able to help you a little more. — deweyredman
– deweyredman, Commented Jan 6, 2017 at 1:40
What i'd probably do is add another variable to the structure like "active" or something of that sort to each level, that way you can reference it in the d3 code that powers your visualization. — deweyredman
– deweyredman, Commented Jan 6, 2017 at 1:43

d3vi4nt · Accepted Answer · 2017-01-06 01:46:54Z

1

Here's something I put together for you:

var JSON_Object = {name:"main", children:[]};
var main_topics = ["main_topic_1", "main_topic_2", "main_topic_3","main_topic_4"];
var sub_topics = [  {parent_topic:0, name:"sub_topic_1", size:422},
                    {parent_topic:0, name:"sub_topic_2", size:422},
                    {parent_topic:0, name:"sub_topic_3", size:212},
                    {parent_topic:1, name:"sub_topic_4", size:322},
                    {parent_topic:1, name:"sub_topic_5", size:422},
                    {parent_topic:2, name:"sub_topic_6", size:322},
                    {parent_topic:2, name:"sub_topic_7", size:125},
                    {parent_topic:3, name:"sub_topic_8", size:422}];
for (let i in main_topics) {
  let tempObj = {name:main_topics[i], children:[]};
  for (let j in sub_topics) {
    if (sub_topics[j].parent_topic==i) {
      tempObj.children.push({name:sub_topics[j].name,size:sub_topics[j].size});
    }
  }
  JSON_Object.children.push(tempObj);
}
console.log(JSON.stringify(JSON_Object, null, 2));

answered Jan 6, 2017 at 1:46

d3vi4nt

1305 bronze badges

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

1 Comment

Cybernetic Over a year ago

Excellent thank you. I had to make a slight change to handle dynamically changing number of sub_topics but it works great. Thanks for the effort!

Jacob · Accepted Answer · 2017-01-06 01:36:52Z

0

I find the easiest way to produce a dynamic data structure is to start by producing the output structure, and transform the input structures inline, like this:

var output = {
  name: 'main',
  children: main_topics.map(topic => ({
    name: topic,
    children: sub_topics.map(subTopic => ({
      name: subTopic,
      size: 422
    })
  })
};

It's not clear where you're expecting to get size from or why the names in your sample output don't match what's in main_topics or sub_topics, but hopefully you get the idea.

answered Jan 6, 2017 at 1:36

Jacob

79k24 gold badges159 silver badges245 bronze badges

2 Comments

Cybernetic Over a year ago

Thank you for the answer. I don't see how the subtopics can be different for each topic thought. Unless I am missing something.

Jacob Over a year ago

Your source data is just an array of sub-topic names; it's not clear where you're wanting to get those different subtopics from. If you have a different source of data, you should add to the question.

Collectives™ on Stack Overflow

Dynamically created nested array in javascript

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related