Transforming a JSON structure into a tree model for use with the angular-tree-control component

Question

Transforming a JSON structure into a tree model for use with the angular-tree-control component

I need help converting a complex JSON schema into a format compatible with Angular Tree Control. The issue is that the schema does not follow the required treemodel structure for Angular Tree Control, particularly because the children in the schema are not in an array. How can I transform this JSON schema into a treemodel format?

This is how the schema currently looks (although it's actually more intricate with multiple levels of nesting):

{
    "type": "object",
    "properties": {
        "firstName": {
            "type": "string"
        },
        "lastName": {
            "type": "string"
        },
        "address": {
            "type": "object",
             "properties": {
                 "addressLine1": {
                      "type": "string"
                  },
                  "addressLine2": {
                       "type": "string"
                  }
             }
         }
     }
 }

To display correctly in the Angular Tree Control, it should be structured like this:

{
        "type": "object",
        "properties": [
            {
                "name": "firstName",
                "type": "string"
            },
            {
                "name": "lastName",
                "type": "string"
            },
            {
                "name": "address",
                "type": "object",
                "properties": [
                      {
                          "name": "addressLine1",
                          "type": "string"
                      },
                      {
                           "name": "addressLine2",
                           "type": "string"
                      }
                ]
            }
        ]
    }

javascript angularjs json jsonschema

Answer 1

Answer №1

This example showcases the potential for refactoring code to enable recursion into deeper levels.

var objectData = {
    "type": "object",
    "properties": {
        "firstName": {
            "type": "string"
        },
        "lastName": {
            "type": "string"
        },
        "address": {
            "type": "object",
             "properties": {
                 "addressLine1": {
                      "type": "string"
                  },
                  "addressLine2": {
                       "type": "string"
                  }
             }
         }
     }
};

function createTreeModel(obj){
var treeModel = {};

for (var prop in obj) {
if(prop === 'properties'){
treeModel[prop] = []
var index = 0;
var count = 0;
for(subProp in obj[prop]){
if(obj[prop][subProp].type === 'object'){
treeModel[prop][index] = {name: subProp, type: obj[prop][subProp].type, properties: []};
for(innerProp in obj[prop][subProp].properties){
treeModel[prop][index].properties.push({name: innerProp, type: obj[prop][subProp].properties[innerProp].type});
count++;
}
} else {
treeModel[prop][index] = {name: subProp, type: obj[prop][subProp].type};
}
index++;
}
} else {
treeModel[prop] = obj[prop];
}
}
return treeModel;
}

var tree = createTreeModel(objectData);
// console.log(tree);
document.getElementById("output").innerHTML = JSON.stringify(tree, undefined, 2);

<pre id="output">
</pre>

Answer 2

This example showcases the potential for refactoring code to enable recursion into deeper levels.

var objectData = {
    "type": "object",
    "properties": {
        "firstName": {
            "type": "string"
        },
        "lastName": {
            "type": "string"
        },
        "address": {
            "type": "object",
             "properties": {
                 "addressLine1": {
                      "type": "string"
                  },
                  "addressLine2": {
                       "type": "string"
                  }
             }
         }
     }
};

function createTreeModel(obj){
var treeModel = {};

for (var prop in obj) {
if(prop === 'properties'){
treeModel[prop] = []
var index = 0;
var count = 0;
for(subProp in obj[prop]){
if(obj[prop][subProp].type === 'object'){
treeModel[prop][index] = {name: subProp, type: obj[prop][subProp].type, properties: []};
for(innerProp in obj[prop][subProp].properties){
treeModel[prop][index].properties.push({name: innerProp, type: obj[prop][subProp].properties[innerProp].type});
count++;
}
} else {
treeModel[prop][index] = {name: subProp, type: obj[prop][subProp].type};
}
index++;
}
} else {
treeModel[prop] = obj[prop];
}
}
return treeModel;
}

var tree = createTreeModel(objectData);
// console.log(tree);
document.getElementById("output").innerHTML = JSON.stringify(tree, undefined, 2);

<pre id="output">
</pre>

Answer 3

Answer №2

This piece of code snippet is capable of handling nested structures as well

var details = {
      "type": "object",
      "properties": {
        "available": {
          "type": "boolean",
        },
        "size": {
          "type": "object",
          "properties": {
            "length": {
              "type": "integer",
            },
            "width": {
              "type": "integer",
            },
            "height": {
              "type": "integer",
            }
          }
   ...
}
    </div></answer2>
<exanswer2><div class="answer" i="57296988" l="4.0" c="1564587195" a="dmlqYXkga3VtYXI=" ai="7369067">
<p>This also includes support for nested structures</p>

<pre><code>var data = {
      "type": "object",
      "properties": {
        "checked": {
          "type": "boolean",
        },
        "dimensions": {
          "type": "object",
          "properties": {
            "width": {
              "type": "integer",
            },
            "height": {
              "type": "integer",
            },
            "volume": {
              "type": "object",
              "properties": {
                "length": {
                  "type":"integer",
                },
                "breadth":{
                  "type": "integer"
                }
              }
            }
          }
        },
        "id": {
          "type": "integer",
        },
        "name": {
          "type": "string",
        },
        "price": {
          "type": "number",
        }
      }
    }

// Function to find properties recursively
function findProperties(obj){
  let properties = []
  for(key in obj){
    if(obj[key].properties){
      properties.push({name: key, datatype: obj[key].type, properties: findProperties(obj[key].properties)})
    }else{
      properties.push({ name: key, datatype: obj[key].type});
    }
  }
  return properties;
}

// Function to parse the data and find properties
function findData(data){
  let result = "";
  for(key in data){
    if(key == 'properties'){
      result = findProperties(data.properties)
    }
  }
  return result;
}

console.log(JSON.stringify(findData(data)));

Answer 4

This piece of code snippet is capable of handling nested structures as well

var details = {
      "type": "object",
      "properties": {
        "available": {
          "type": "boolean",
        },
        "size": {
          "type": "object",
          "properties": {
            "length": {
              "type": "integer",
            },
            "width": {
              "type": "integer",
            },
            "height": {
              "type": "integer",
            }
          }
   ...
}
    </div></answer2>
<exanswer2><div class="answer" i="57296988" l="4.0" c="1564587195" a="dmlqYXkga3VtYXI=" ai="7369067">
<p>This also includes support for nested structures</p>

<pre><code>var data = {
      "type": "object",
      "properties": {
        "checked": {
          "type": "boolean",
        },
        "dimensions": {
          "type": "object",
          "properties": {
            "width": {
              "type": "integer",
            },
            "height": {
              "type": "integer",
            },
            "volume": {
              "type": "object",
              "properties": {
                "length": {
                  "type":"integer",
                },
                "breadth":{
                  "type": "integer"
                }
              }
            }
          }
        },
        "id": {
          "type": "integer",
        },
        "name": {
          "type": "string",
        },
        "price": {
          "type": "number",
        }
      }
    }

// Function to find properties recursively
function findProperties(obj){
  let properties = []
  for(key in obj){
    if(obj[key].properties){
      properties.push({name: key, datatype: obj[key].type, properties: findProperties(obj[key].properties)})
    }else{
      properties.push({ name: key, datatype: obj[key].type});
    }
  }
  return properties;
}

// Function to parse the data and find properties
function findData(data){
  let result = "";
  for(key in data){
    if(key == 'properties'){
      result = findProperties(data.properties)
    }
  }
  return result;
}

console.log(JSON.stringify(findData(data)));

Transforming a JSON structure into a tree model for use with the angular-tree-control component

Answer №1

Answer №2

Similar questions

Using HTML5 video with cue points and stop points

Date range within a conditional statement

Is there a way to have the ng-option initialize with the selected object value?

Show JSON data in an HTML table using C# programming language

Controlling the maximum number of components displayed on each row in a loop or map using React

AngularJS dual-stage resolution for resolving dependencies

send a message to all clients using socket.io

Leveraging Multiple MongoDB Databases in Meteor.js

Dealing with multi-line strings in Javascript

Seamless scrolling experience achieved after implementing a header that appears when scrolling up

Variations in CSS behavior for select and option elements

When a div is clicked, the text inside the button changes. If another div is clicked, the previous text is reset

Issue with AngularJS Cross-Origin Resource Sharing (CORS) when making HTTP requests, whereas standard Ajax and jQuery are

Exclude chosen API responses prior to presenting them in the Table View

Re-activate external script following a language update in Next.js

"After executing a loop in JavaScript using jquery.ajax, the success function does not perform

Adjusting the label on the Formik toggler

Tips for properly showcasing images on a webpage after ensuring all other content has loaded

Creating a diverse layout by dynamically adding divs without achieving uniformity in the grid

Utilizing Bootstrap combobox to easily select values by typing them in