Creating dynamic JSON with JavaScript is a powerful feature

Question

Creating dynamic JSON with JavaScript is a powerful feature

I have been struggling to dynamically create a JSON object in JavaScript with a nested structure like this. Despite my attempts, I keep encountering errors due to the complexity of the nesting. Can someone please assist me in generating this JSON format?

    {
     "name": "flare",
     "children": [
       {
         "name": "analytics",
        "children": [
         {
           "name": "cluster",
           "children": [
      {"name": "AgglomerativeCluster", "size": 3938},
      {"name": "CommunityStructure", "size": 3812},
      {"name": "HierarchicalCluster", "size": 6714},
      {"name": "MergeEdge", "size": 743}
     ]
    },
    {
     "name": "graph",
     "children": [
      {"name": "BetweennessCentrality", "size": 3534},
      {"name": "LinkDistance", "size": 5731},
      {"name": "MaxFlowMinCut", "size": 7840},
      {"name": "ShortestPaths", "size": 5914},
      {"name": "SpanningTree", "size": 3416}
     ]
    },
    {
     "name": "optimization",
     "children": [
      {"name": "AspectRatioBanker", "size": 7074}
      ]
      }
     ]
    }
   ]}

This pattern repeats throughout the structure, creating a complex and intricate hierarchy. Any guidance on how to generate this type of JSON would be greatly appreciated.

javascript json

Answer 1

Answer №1

Is this what you had in mind?

const result = [];
function parseJson(data) { 
    const obj = {
        "name": data.name            
    };
    data.find("children").each(() => {
        if (!obj.hasOwnProperty("children")) {
            obj.children = [];
        }
        obj.children.push(parseJson($(this)));
    });
    return obj;
}

$.each(input, (i, item) => {
  result.push(parseJson(input[i]));
});

Finally, display the JSON with JSON.stringify(result)

Answer 2

Is this what you had in mind?

const result = [];
function parseJson(data) { 
    const obj = {
        "name": data.name            
    };
    data.find("children").each(() => {
        if (!obj.hasOwnProperty("children")) {
            obj.children = [];
        }
        obj.children.push(parseJson($(this)));
    });
    return obj;
}

$.each(input, (i, item) => {
  result.push(parseJson(input[i]));
});

Finally, display the JSON with JSON.stringify(result)

Answer 3

Answer №2

To easily create each node, you can utilize the following function

function Node(element){
 $.extend(this, element);
 this.children = [];
 this.addChild = function(newElement){
   var newNode = new Node(newElement); 
  this.children.push(newNode);
  return newNode;
 }
}

Creating a dynamic tree is now simplified

var tree = new Node({});
tree
.addChild({name:'branch'})
.addChild({name:'data'})
.addChild({name:'category'})
.addChild({name: "LeafCluster", size: 1234})

You have the ability to add children to any node.

Answer 4

To easily create each node, you can utilize the following function

function Node(element){
 $.extend(this, element);
 this.children = [];
 this.addChild = function(newElement){
   var newNode = new Node(newElement); 
  this.children.push(newNode);
  return newNode;
 }
}

Creating a dynamic tree is now simplified

var tree = new Node({});
tree
.addChild({name:'branch'})
.addChild({name:'data'})
.addChild({name:'category'})
.addChild({name: "LeafCluster", size: 1234})

You have the ability to add children to any node.

Creating dynamic JSON with JavaScript is a powerful feature

Answer №1

Answer №2

Similar questions

Is there a way to retrieve a List object from JSON rather than a LinkedHashMap?

Uncovering the secrets of navigating a JSON hierarchy

Using MySQL's JSON_OBJECT() function with certain fields pre-populated with JSON strings

What is the most efficient way to extract JSON data from a list and transform it into columns in Python?

Collect all chosen items within a form along with their concealed inputs in preparation for submission

Secure authentication in Windows Communication Foundation using HTTPS

Tips for transferring JavaScript values to PHP through AjaxWould you like to learn how to

Using JavaScript to validate birth date selection along with three drop down menus in ASP.Net

Rendering nested JSON using React Native

How can I create a customizable grid in ext4 designer that can be manipulated remotely?

What is the process for linking an HTML document to another HTML document within a div using jQuery?

Using React to fetch data and then mapping it inside a function

Converting an object into Json format

Yet another interactive JQuery feature found within the JQuery UI Tabs framework, utilizing seamless Ajax page loading

Struggling with populating a table in MVC using Ajax/Json

The synopsis cannot be displayed by the RottenTomatoes API

"Assigning an array as a value to an object key when detecting duplicates in a

What is the best approach for resolving this asynchronous task sequencing issue in JavaScript?

Image Filter: Only Display Selected Images, Not All

Iterate through an array while only mapping X number of elements during each iteration