Switching out nested loop within JavaScript

Question

Switching out nested loop within JavaScript

I've come across an array of objects that looks like this

let data = [
    {
        "id": 1,
        "name": "Sam",
        "father": true,
        "group": "orange"
    },
    {
        "id": 2,
        "name": "Alex",
        "father": true,
        "group": "red"
    },
    ...
];

The goal is to organize the data so that each father has their children listed in an array under a key named "members". The children should have the same color as their fathers. For example:

{
        "id": 1,
        "name": "Sam",
        "father": true,
        "group": "orange"
        "member":[
            {
                "id": 6,
                "name": "Oliver",
                "father": false,
                "group": "orange"
            }
       };
     // more examples

I have implemented a solution using nested loops, but it's not very efficient and runs slow due to the complexity. Here is my current code:

function sorting(data) {
    data.forEach(fatherObjects => { 
        if (fatherObjects.father) {
            var member = [];
            data.forEach(childrenObjects => {
                if (!childrenObjects.father && childrenObjects.group === fatherObjects.group) {
                    member.push(childrenObjects)
                }
            });
            
            fatherObjects["member"] = member;
            console.log(fatherObjects);
        }
    });
}
sorting(data);

If you have any suggestions on how to make this process more efficient without sacrificing readability, please let me know.

javascript arrays json sorting

Answer 1

Answer №1

To achieve this task, you can use a single loop with the help of the reduce method to group the items by their group property and use Object.values to obtain the desired outcome.

const result = Object.values(data.reduce((acc, i) => {
  if (!acc[i.group]) {
    acc[i.group] = {
      ...i,
      member: []
    }
  } else {
    acc[i.group].member.push(i);
  }
  return acc;
}, {}));

Check out the code in action:

let data = [{
    "id": 1,
    "name": "Sam",
    "father": true,
    "group": "orange"
  },
  {
    "id": 2,
    "name": "Alex",
    "father": true,
    "group": "red"
  },
  {
    "id": 3,
    "name": "Rock",
    "father": true,
    "group": "blue"
  },
  {
    "id": 4,
    "name": "Liam",
    "father": false,
    "group": "red"
  },
  {
    "id": 5,
    "name": "Noah",
    "father": false,
    "group": "red"
  },
  {
    "id": 6,
    "name": "Oliver",
    "father": false,
    "group": "orange"
  },
  {
    "id": 7,
    "name": "Sara",
    "father": false,
    "group": "blue"
  },
  {
    "id": 8,
    "name": "Max",
    "father": false,
    "group": "red",

  }
];

const result = Object.values(data.reduce((acc, i) => {
  if (!acc[i.group]) {
    acc[i.group] = {
      ...i,
      member: []
    }
  } else {
    acc[i.group].member.push(i);
  }
  return acc;
}, {}));

console.log(result);

Answer 2

To achieve this task, you can use a single loop with the help of the reduce method to group the items by their group property and use Object.values to obtain the desired outcome.

const result = Object.values(data.reduce((acc, i) => {
  if (!acc[i.group]) {
    acc[i.group] = {
      ...i,
      member: []
    }
  } else {
    acc[i.group].member.push(i);
  }
  return acc;
}, {}));

Check out the code in action:

let data = [{
    "id": 1,
    "name": "Sam",
    "father": true,
    "group": "orange"
  },
  {
    "id": 2,
    "name": "Alex",
    "father": true,
    "group": "red"
  },
  {
    "id": 3,
    "name": "Rock",
    "father": true,
    "group": "blue"
  },
  {
    "id": 4,
    "name": "Liam",
    "father": false,
    "group": "red"
  },
  {
    "id": 5,
    "name": "Noah",
    "father": false,
    "group": "red"
  },
  {
    "id": 6,
    "name": "Oliver",
    "father": false,
    "group": "orange"
  },
  {
    "id": 7,
    "name": "Sara",
    "father": false,
    "group": "blue"
  },
  {
    "id": 8,
    "name": "Max",
    "father": false,
    "group": "red",

  }
];

const result = Object.values(data.reduce((acc, i) => {
  if (!acc[i.group]) {
    acc[i.group] = {
      ...i,
      member: []
    }
  } else {
    acc[i.group].member.push(i);
  }
  return acc;
}, {}));

console.log(result);

Answer 3

Answer №2

function organizeFamily(data) {
  var newFamiliesArray=[];
    data.forEach(parentObjects => {
           if( parentObjects.parent ) {
             newFamiliesArray.push({
               ...parentObjects,
               children:[]
             });
           }
    });
    data.forEach(childObject => {
       if( !childObject.parent ) {
         newFamiliesArray.filter(f=>f.group===childObject.group)[0].children.push(childObject)
       }
    })

  return newFamiliesArray;
}
organizeFamily(data);

Answer 4

function organizeFamily(data) {
  var newFamiliesArray=[];
    data.forEach(parentObjects => {
           if( parentObjects.parent ) {
             newFamiliesArray.push({
               ...parentObjects,
               children:[]
             });
           }
    });
    data.forEach(childObject => {
       if( !childObject.parent ) {
         newFamiliesArray.filter(f=>f.group===childObject.group)[0].children.push(childObject)
       }
    })

  return newFamiliesArray;
}
organizeFamily(data);

Switching out nested loop within JavaScript

Answer №1

Answer №2

Similar questions

Leverage the hidden glitch lurking within Vue

The Art of Determining the Text's Baseline

Interactive webpages with dynamic HTML content, similar to the design of popular platforms such

Using Golang to generate complex and nested JSON structures

Transforming the elements within an array of objects into individual key-value pairs and then adding them to a fresh array

What seems to be the issue with the data initialization function not functioning properly within this Vue component?

Is there a way to store a class property as a variable using PostCSS?

Arrange an array of objects by making a nested API call in Angular

Shifting divs to different positions upon clicking

When using @mouseover, it is not possible to modify a variable's value

Error in inferring argument types for a generic interface function in Typescript

Provide two values and complete the third one

What is the best way to enable an element to be dragged from just a single point?

Is it possible to create a struct that automatically transforms from serde_json::Value using Deserialize?

Executing multiple Ajax requests on CodeIgniter 3 from two separate pages

What is the process for choosing with multiple attribute selectors?

Struggling to interpret JSON using JavaScript and Ajax

Creating a single object from the union of two arrays with JavaScript

Verify and send form without reloading the page

Removing data using axios in a React project