Navigating through nested arrays in JavaScript

Question

Navigating through nested arrays in JavaScript

There is a JavaScript object structured like this:

let hogwartsHeirarchy = {
  Headmaster: [
    {
      name: "Professor Dumbledore",
      key: 1,
      Headmistress: [
        {
          name: "Minerva McGonagall",
          key: 2,
          StandByProfessor: [
            {
              name: "Rubeus Hagrid",
              subject: "Potions Master",
              key: 3,
              Professor: [
                { name: "Horace Slughorn", key: 4 },
                { name: "Severus Snape", key: 4 },
              ],
            },
            {
              name: "Alastor Moody",
              subject: "Defense Against the Dark Arts",
              key: 3,
              Professor: [
                { name: "Remus Lupin", key: 4 },
                { name: "Gilderoy Lockhart", key: 4 },
              ],
            },
          ],
        },
      ],
    },
  ],
};

I am trying to retrieve and display each node value [headmaster, headmastress,..] along with their child values. I have attempted different methods such as looping through the array using a for loop and recursion, but so far have not been successful in extracting any data from the nodes. Can someone provide assistance?

For example, I used the following function:

printArray(hogwartsHeirarchy);

function printArray(arr){
    for(var i = 0; i < arr.length; i++){
        if(arr[i] instanceof Array){
            console.log("true: ");

            console.log("intermediate one : ",arr[i]);

            printArray(arr[i]);

        }else{
            console.log("final one : ",arr[i]);
        }
    }
}

The desired output format is as follows:

Headmaster - name : Professor Dumbledore, key : 1
.
.
StandByProfessor - name : Robeus Hagrid, subject : Potion Master, key : 3
StandByProfessor - name : Alastor Moody, subject : Defence against the dark arts, key : 3
.
.
Professor - ...
Professor - ...
Professor - ...
Professor - ...

javascript arrays loops recursion nested

Answer 1

Answer №1

To improve the structure, I recommend organizing subordinates consistently under a single key for easier access. Additionally, I modified the hierarchy so that each node represents a person without any non-person objects at the top level. The variable name remains, now directly referring to Dumbledore.

let hogwartsHeirarchy =
  {
    name: "Professor Dumbledore",
    role: "Headmaster",
    key: 1,
    subordinates: [
      {
        name: "Minerva McGonagall",
        role: "Headmistress",
        key: 2,
        subordinates: [
          {
            name: "Rubeus Hagrid",
            role: "StandByProfessor",
            subject: "Potions Master",
            key: 3,
            subordinates: [
              { name: "Horace Slughorn", key: 4, role: "Professor" },
              { name: "Severus Snape", key: 4, role: "Professor"  },
            ],
          },
          {
            name: "Alastor Moody",
            role: "StandByProfessor",
            subject: "Defense Against the Dark Arts",
            key: 3,
            subordinates: [
              { name: "Remus Lupin", key: 4, role: "Professor" },
              { name: "Gilderoy Lockhart", key: 4, role: "Professor" },
            ],
          },
        ],
      },
    ],
  };
function visitStaff(staffMember) {
    if (staffMember.subordinates) {
        for (const subordinate of staffMember.subordinates) {
            visitStaff(subordinate);
        }
    }
    console.log("Staff member:", staffMember);
}
visitStaff(hogwartsHeirarchy);

When designing a data structure, consider how it will be accessed and its components. Here, nodes represent individuals, while relationships serve as graph edges.

The original code included an object { Headmaster: [...] } — what does this signify? It does not represent a person or a direct relationship, only defining Dumbledoor's job title. As such, it fits better as a property than standalone object.

Aligning objects to clearly represent entities aids in understanding their purpose within the structure.

Answer 2

To improve the structure, I recommend organizing subordinates consistently under a single key for easier access. Additionally, I modified the hierarchy so that each node represents a person without any non-person objects at the top level. The variable name remains, now directly referring to Dumbledore.

let hogwartsHeirarchy =
  {
    name: "Professor Dumbledore",
    role: "Headmaster",
    key: 1,
    subordinates: [
      {
        name: "Minerva McGonagall",
        role: "Headmistress",
        key: 2,
        subordinates: [
          {
            name: "Rubeus Hagrid",
            role: "StandByProfessor",
            subject: "Potions Master",
            key: 3,
            subordinates: [
              { name: "Horace Slughorn", key: 4, role: "Professor" },
              { name: "Severus Snape", key: 4, role: "Professor"  },
            ],
          },
          {
            name: "Alastor Moody",
            role: "StandByProfessor",
            subject: "Defense Against the Dark Arts",
            key: 3,
            subordinates: [
              { name: "Remus Lupin", key: 4, role: "Professor" },
              { name: "Gilderoy Lockhart", key: 4, role: "Professor" },
            ],
          },
        ],
      },
    ],
  };
function visitStaff(staffMember) {
    if (staffMember.subordinates) {
        for (const subordinate of staffMember.subordinates) {
            visitStaff(subordinate);
        }
    }
    console.log("Staff member:", staffMember);
}
visitStaff(hogwartsHeirarchy);

When designing a data structure, consider how it will be accessed and its components. Here, nodes represent individuals, while relationships serve as graph edges.

The original code included an object { Headmaster: [...] } — what does this signify? It does not represent a person or a direct relationship, only defining Dumbledoor's job title. As such, it fits better as a property than standalone object.

Aligning objects to clearly represent entities aids in understanding their purpose within the structure.

Answer 3

Answer №2

When considering the data structure provided:

a) It is assumed that each type of "title" will have only one array, and
b) that array will contain objects with a similar structure to its parent

There is a possibility...

to utilize the for..of loop to
cycle through each key in an object and concatenate them into a string. Since there are arrays containing objects,
I can iterate through these arrays and
implement a recursive loop by calling the method within itself.

const hogwartsHierarchy = { Headmaster: [{ name: "Professor Dumbledore", key: 1, Headmistress: [{ name: "Minerva McGonagall", key: 2, StandByProfessor: [{ name: "Rubeus Hagrid", subject: "Potions Master", key: 3, Professor: [{ name: "Horace Slughorn", key: 4 }, { name: "Severus Snape", key: 4 }] }, { name: "Alastor Moody", subject: "Defense Against the Dark Arts", key: 3, Professor: [{ name: "Remus Lupin", key: 4 }, { name: "Gilderoy Lockhart", key: 4 }] }] }] }] };

function printAllWithChilds(obj, prevProp) {
  let listItem = (prevProp) ? ' -- ' + prevProp : '';
  
  for (const property in obj) {    // 1
    if (obj[property] instanceof Array) {
       obj[property].forEach((child_obj) => {                   // 3
         listItem += printAllWithChilds(child_obj, property);   // 4
       });
    } else {
      listItem += `, ${property}: ${obj[property]}`;            // 2
    }
  }
  
  return listItem;
}

let listStr = printAllWithChilds(hogwartsHierarchy);
console.log(listStr);

It would be beneficial to break down hogwartsHierarchy into smaller segments resembling a database structure where each individual has a unique primary_key. These arrays start to make more sense when examining the variable professors and how their corresponding belongs_to key links to the standbyprofessors, illustrating that "Horace Slughorn" belongs to "Rubeus Hagrid".

const headermaster = {
  name: "Professor Dumbledore",
  primary_key: 1
};

const headmistress = {
  name: "Minerva McGonagall",
  primary_key: 2,
  belongs_to: 1
};

const standbyprofessors = [{
    name: "Rubeus Hagrid",
    subject: "Potions Master",
    primary_key: 3,
    belongs_to: 2
  },
  {
    name: "Alastor Moody",
    subject: "Defense Against the Dark Arts",
    primary_key: 4,
    belongs_to: 2
  }
];

const professors = [{
    name: "Horace Slughorn",
    primary_key: 5,
    belongs_to: 3
  },
  {
    name: "Severus Snape",
    primary_key: 6,
    belongs_to: 3
  },
  {
    name: "Remus Lupin",
    primary_key: 7,
    belongs_to: 4
  },
  {
    name: "Gilderoy Lockhart",
    primary_key: 8,
    belongs_to: 4
  },
];

Answer 4

When considering the data structure provided:

a) It is assumed that each type of "title" will have only one array, and
b) that array will contain objects with a similar structure to its parent

There is a possibility...

to utilize the for..of loop to
cycle through each key in an object and concatenate them into a string. Since there are arrays containing objects,
I can iterate through these arrays and
implement a recursive loop by calling the method within itself.

const hogwartsHierarchy = { Headmaster: [{ name: "Professor Dumbledore", key: 1, Headmistress: [{ name: "Minerva McGonagall", key: 2, StandByProfessor: [{ name: "Rubeus Hagrid", subject: "Potions Master", key: 3, Professor: [{ name: "Horace Slughorn", key: 4 }, { name: "Severus Snape", key: 4 }] }, { name: "Alastor Moody", subject: "Defense Against the Dark Arts", key: 3, Professor: [{ name: "Remus Lupin", key: 4 }, { name: "Gilderoy Lockhart", key: 4 }] }] }] }] };

function printAllWithChilds(obj, prevProp) {
  let listItem = (prevProp) ? ' -- ' + prevProp : '';
  
  for (const property in obj) {    // 1
    if (obj[property] instanceof Array) {
       obj[property].forEach((child_obj) => {                   // 3
         listItem += printAllWithChilds(child_obj, property);   // 4
       });
    } else {
      listItem += `, ${property}: ${obj[property]}`;            // 2
    }
  }
  
  return listItem;
}

let listStr = printAllWithChilds(hogwartsHierarchy);
console.log(listStr);

It would be beneficial to break down hogwartsHierarchy into smaller segments resembling a database structure where each individual has a unique primary_key. These arrays start to make more sense when examining the variable professors and how their corresponding belongs_to key links to the standbyprofessors, illustrating that "Horace Slughorn" belongs to "Rubeus Hagrid".

const headermaster = {
  name: "Professor Dumbledore",
  primary_key: 1
};

const headmistress = {
  name: "Minerva McGonagall",
  primary_key: 2,
  belongs_to: 1
};

const standbyprofessors = [{
    name: "Rubeus Hagrid",
    subject: "Potions Master",
    primary_key: 3,
    belongs_to: 2
  },
  {
    name: "Alastor Moody",
    subject: "Defense Against the Dark Arts",
    primary_key: 4,
    belongs_to: 2
  }
];

const professors = [{
    name: "Horace Slughorn",
    primary_key: 5,
    belongs_to: 3
  },
  {
    name: "Severus Snape",
    primary_key: 6,
    belongs_to: 3
  },
  {
    name: "Remus Lupin",
    primary_key: 7,
    belongs_to: 4
  },
  {
    name: "Gilderoy Lockhart",
    primary_key: 8,
    belongs_to: 4
  },
];

Answer 5

Answer №3

If you strip out known keys from the object and analyze the type hierarchy, then loop through the properties to retrieve the tuple consisting of type, name, subject, and key only if the type is present.

const
    getValues = (object, type) => [
        ...(type ? [`${type} - name : ${object.name}, ${object.subject ? `subject : ${object.subject}, ` : ''}key : ${object.key}`] : []),
        ...Object
            .keys(object)
            .filter(k => !['name', 'subject', 'key'].includes(k))
            .flatMap(k => object[k].flatMap(o => getValues(o, k)))
        ],
    hogwartsHierarchy = { Headmaster: [{ name: "Professor Dumbledore", key: 1, Headmistress: [{ name: "Minerva McGonagall", key: 2, StandByProfessor: [{ name: "Rubeus Hagrid", subject: "Potions Master", key: 3, Professor: [{ name: "Horace Slughorn", key: 4 }, { name: "Severus Snape", key: 4 }] }, { name: "Alastor Moody", subject: "Defense Against the Dark Arts", key: 3, Professor: [{ name: "Remus Lupin", key: 4 }, { name: "Gilderoy Lockhart", key: 4 }] }] }] }] };

console.log(getValues(hogwartsHierarchy));

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

Answer 6

If you strip out known keys from the object and analyze the type hierarchy, then loop through the properties to retrieve the tuple consisting of type, name, subject, and key only if the type is present.

const
    getValues = (object, type) => [
        ...(type ? [`${type} - name : ${object.name}, ${object.subject ? `subject : ${object.subject}, ` : ''}key : ${object.key}`] : []),
        ...Object
            .keys(object)
            .filter(k => !['name', 'subject', 'key'].includes(k))
            .flatMap(k => object[k].flatMap(o => getValues(o, k)))
        ],
    hogwartsHierarchy = { Headmaster: [{ name: "Professor Dumbledore", key: 1, Headmistress: [{ name: "Minerva McGonagall", key: 2, StandByProfessor: [{ name: "Rubeus Hagrid", subject: "Potions Master", key: 3, Professor: [{ name: "Horace Slughorn", key: 4 }, { name: "Severus Snape", key: 4 }] }, { name: "Alastor Moody", subject: "Defense Against the Dark Arts", key: 3, Professor: [{ name: "Remus Lupin", key: 4 }, { name: "Gilderoy Lockhart", key: 4 }] }] }] }] };

console.log(getValues(hogwartsHierarchy));

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

Answer 7

Answer №4

According to the object model created by 1j01:

const magicSchoolHierarchy =
{  name: "Headmaster Dumbledore", role: "Headmaster", key: 1,
    subordinates: [{ name: "Minerva McGonagall", role: "Headmistress", key: 2,
        subordinates: [
          { name: "Rubeus Hagrid", role: "StandByProfessor", subject: "Potions Master", key: 3,
            subordinates: [
              { name: "Horace Slughorn", key: 4, role: "Professor" },
              { name: "Severus Snape", key: 4, role: "Professor"  }]},
          { name: "Alastor Moody", role: "StandByProfessor", subject: "Defense Against the Dark Arts", key: 3,
            subordinates: [
              { name: "Remus Lupin", key: 4, role: "Professor" },
              { name: "Gilderoy Lockhart", key: 4, role: "Professor" }]}]}]};
  
  
const visitStaff = (staffMember) => {
  const iter = (obj) => {
    const { name, role, key, subordinates } = obj;
    const subject = obj.subject ? `, subject : ${obj.subject}` : '';
    const line = `${role} - name : ${name}${subject}, key : ${key}`;
    const sublines = (Array.isArray(subordinates)) ? subordinates.flatMap(iter) : [];
    return [line, ...sublines];
  }
  return iter(staffMember).join('\n');
}
console.log(visitStaff(magicSchoolHierarchy));

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

Answer 8

According to the object model created by 1j01:

const magicSchoolHierarchy =
{  name: "Headmaster Dumbledore", role: "Headmaster", key: 1,
    subordinates: [{ name: "Minerva McGonagall", role: "Headmistress", key: 2,
        subordinates: [
          { name: "Rubeus Hagrid", role: "StandByProfessor", subject: "Potions Master", key: 3,
            subordinates: [
              { name: "Horace Slughorn", key: 4, role: "Professor" },
              { name: "Severus Snape", key: 4, role: "Professor"  }]},
          { name: "Alastor Moody", role: "StandByProfessor", subject: "Defense Against the Dark Arts", key: 3,
            subordinates: [
              { name: "Remus Lupin", key: 4, role: "Professor" },
              { name: "Gilderoy Lockhart", key: 4, role: "Professor" }]}]}]};
  
  
const visitStaff = (staffMember) => {
  const iter = (obj) => {
    const { name, role, key, subordinates } = obj;
    const subject = obj.subject ? `, subject : ${obj.subject}` : '';
    const line = `${role} - name : ${name}${subject}, key : ${key}`;
    const sublines = (Array.isArray(subordinates)) ? subordinates.flatMap(iter) : [];
    return [line, ...sublines];
  }
  return iter(staffMember).join('\n');
}
console.log(visitStaff(magicSchoolHierarchy));

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

Navigating through nested arrays in JavaScript

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Unable to successfully display AJAX data on success

Can you explain how time.localtime() functions and provide some tips on how to use it effectively? Simple inquiry on understanding its operations

Tips for avoiding the automatic transition to the next slide in SwiperJS

BufferGeometry does not have a defined position attribute

Time well spent with The Mighty Ajax

Combining two lists of lists with varying index lengths

Using ng-repeat with an AJAX-called JSON is not possible

Basic jQuery request for JSON data

The conventional method for including React import statements

Performing optimized searches in Redis

JQuery loader & amazing animations

Steps for making a dynamic number animation

Utilizing NextJS to retrieve cookie data within React components

Error encountered while making an http get request for a node that returns JSON

Callbacks for AJAX responses that are asynchronous

Is there a way for me to include a prefix in the path where Vue pulls its component chunks from?

Step-by-step guide on interacting with a JavaScript menu: Click to open the menu and close it by moving

Tips for limiting the size of image uploads to under 2 megabytes

Testing an ExpressJS route and their corresponding controller individually: a step-by-step guide

Is there a way to populate rows in a data table on subsequent pages using JavaScript?