Display the entire pathway of objects in the array

Question

Display the entire pathway of objects in the array

Hello everyone

I am facing a challenge with an array of objects. I need to display the path of each node value and ultimately print the key and value for a specific node by name.

Presenting the following array of objects in JSON format:

[{
    "Name": "2007",
    "Elements": [{
            "Name": "country1",
            "Elements": [{
                "House": "house1",
                "water": 1.8
            }],
            "Data": {}
        },
        {
            "Name": "country2",
            "Elements": [{
                "Name": "city2",
                "Elements": [{
                    "Name": "neighbourhood2",
                    "Elements": [{
                        "House": "house2",
                        "water": 2.8
                    }]
                }],
                "Data": {}

            }],
            "Data": {}
        },
        {
            "Name": "country3",
            "Elements": [{
                "House": "house2",
                "uni bill": 3.8
            }],
            "Data": {}
        }
    ],
    "Data": {}
}]

The desired output should resemble this:

2007 > country1 > house > water: 1.8
2007 > city2 > neighbourhood2 > house2 > electricity: 2.8
2007 > country3 > house > uni bill: 3.8

++++++++++++++ updated +++++++++++++++

function objectToPaths(data) {
    var validId = /^[a-z_$][a-z0-9_$]*$/i;
    var result = [];
   doIt(data, "");
    return result;

    function doIt(data, s) {
      if (data && typeof data === "object") {
       if (Array.isArray(data)) {
          for (var i = 0; i < data.length; i++) {
            doIt(data[i], s + "");
          }
        } else {
          for (var p in data) {
            if (validId.test(p)) {

              doIt(data[p], s + " > " + data[p]);
             } else {
              doIt(data[p], s + "");
           }
          }
        }
      } else {
        result.push(s);
      }
   }
 }

This is my attempt at rewriting a found function, but I'm not getting the expected outcome.

+++++++++++++++++++++++ end of update +++++++++++++++++++++++

Your assistance would be greatly appreciated.

Many thanks in advance

javascript arrays json object

Answer 1

Answer №1

To achieve your goal, you need to implement a Depth First Traversal function that recursively prints properties:

function display(arr, path) {                              // display function takes an array and an accumulated path from which it will start displaying
  arr.forEach(function(obj) {                            // iterate through each object obj in the array
    if(obj.Elements) {                                   // check if the object obj has sub elements
      display(obj.Elements, path + " > " + obj.Name);      // call display on those elements, providing the absolute path to this object
    } else {                                             // if it is a leaf node
      const details = Object.keys(obj)
        .filter(key => key !== "House")
        .map(key => `${key}: ${obj[key]}`)
        .join(', ')
      console.log(path.slice(3) + " > " + obj.House + " > " + details);    // print the accumulated path along with the House property of this object (removing the first 3 characters from path)
    }
  });
};

var data = [{"Name":"2007","Elements":[{"Name":"country1","Elements":[{"House":"house1","water":1.8}],"Data":{}},{"Name":"country2","Elements":[{"Name":"city2","Elements":[{"Name":"neighbourhood2","Elements":[{"House":"house2","water":2.8}]}],"Data":{}}],"Data":{}},{"Name":"country3","Elements":[{"House":"house2","uni bill":3.8}],"Data":{}}],"Data":{}}];

display(data, "");

Answer 2

To achieve your goal, you need to implement a Depth First Traversal function that recursively prints properties:

function display(arr, path) {                              // display function takes an array and an accumulated path from which it will start displaying
  arr.forEach(function(obj) {                            // iterate through each object obj in the array
    if(obj.Elements) {                                   // check if the object obj has sub elements
      display(obj.Elements, path + " > " + obj.Name);      // call display on those elements, providing the absolute path to this object
    } else {                                             // if it is a leaf node
      const details = Object.keys(obj)
        .filter(key => key !== "House")
        .map(key => `${key}: ${obj[key]}`)
        .join(', ')
      console.log(path.slice(3) + " > " + obj.House + " > " + details);    // print the accumulated path along with the House property of this object (removing the first 3 characters from path)
    }
  });
};

var data = [{"Name":"2007","Elements":[{"Name":"country1","Elements":[{"House":"house1","water":1.8}],"Data":{}},{"Name":"country2","Elements":[{"Name":"city2","Elements":[{"Name":"neighbourhood2","Elements":[{"House":"house2","water":2.8}]}],"Data":{}}],"Data":{}},{"Name":"country3","Elements":[{"House":"house2","uni bill":3.8}],"Data":{}}],"Data":{}}];

display(data, "");

Answer 3

Answer №2

If you utilize a function to iterate through and gather the path to the final object, you can easily navigate through nested data structures.

function iteration(array, path) {
    path = path || [];
    array.forEach(function (o) {
        if (o.Elements) {
            return iteration(o.Elements, path.concat(o.Name));
        }
        Object.keys(o).forEach(function (k) {
            if (k !== 'House') {
                console.log(path.concat(o.House, k).join(' > ') + ': ' + o[k]);
            }
        });            
    });
}

var data = [{ Name: "2007", Elements: [{ Name: "country1", Elements: [{ House: "house1", water: 1.8 }], Data: {} }, { Name: "country2", Elements: [{ Name: "city2", Elements: [{ Name: "neighbourhood2", Elements: [{ House: "house2", water: 2.8 }] }], Data: {} }], Data: {} }, { Name: "country3", Elements: [{ House: "house2", "uni bill": 3.8 }], Data: {} }], Data: {} }];

iteration(data);

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

Answer 4

If you utilize a function to iterate through and gather the path to the final object, you can easily navigate through nested data structures.

function iteration(array, path) {
    path = path || [];
    array.forEach(function (o) {
        if (o.Elements) {
            return iteration(o.Elements, path.concat(o.Name));
        }
        Object.keys(o).forEach(function (k) {
            if (k !== 'House') {
                console.log(path.concat(o.House, k).join(' > ') + ': ' + o[k]);
            }
        });            
    });
}

var data = [{ Name: "2007", Elements: [{ Name: "country1", Elements: [{ House: "house1", water: 1.8 }], Data: {} }, { Name: "country2", Elements: [{ Name: "city2", Elements: [{ Name: "neighbourhood2", Elements: [{ House: "house2", water: 2.8 }] }], Data: {} }], Data: {} }, { Name: "country3", Elements: [{ House: "house2", "uni bill": 3.8 }], Data: {} }], Data: {} }];

iteration(data);

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

Display the entire pathway of objects in the array

Answer №1

Answer №2

Similar questions

ReactJS Components failing to load on initial site visit, only appearing after refreshing for the second time

The dropdown feature stores and displays only the initial value

What is the best way to pass or declare elements of an array in C language?

What is the best way to display a JSON array in Angular 4?

Implementing JSON response in email functionality using Ajax and PHP

Can we enhance this JavaScript setup while still embracing the KISS principle (Keep it simple, Stupid)?

How to attach additional attributes to a Rails model without persisting them in the database in Rails

Arranging routes in node.js like a pro

Navigating a multi-layered associative array

Catch the return of the transition event

Is there a way to send a variable to the alert function using $.ajax()?

What is the mechanism Angular utilizes to determine the exact location of directives within a webpage?

Having trouble with Bootstrap 4 dropdowns: Uncaught TypeError issue?

Guide to updating state within a nested object

Determining browser compatibility with TokBox - a guide

Transforming Json data into an Object using Angular 6

Discovering the wonders of Angular's Heroes Tour: What's the magic behind adding the ID in the addHero function

Updating a particular value within a JSON file

Having trouble retrieving the `Content-Disposition` information from the backend response

What is the best way to send unprocessed JSON strings to the DeployR WebAPI?