In the world of JavaScript, encountering a nested forEach loop may lead

Question

In the world of JavaScript, encountering a nested forEach loop may lead

Encountering a typeError while attempting to reconstruct another object using double forEach:

const users = [
    {teacher: [
        {file: 'chemistry', size: '2MB'},
        {file: 'math', size: '1MB'}]
    }, {student: [
        {file: 'chemistry', size: '3MB'},
        {file: 'math', size: '4MB'}]
    }
];

let final = {};

users.forEach(function(i) {

    i.forEach(function(j){
        let filesizestring = 'newfilesize'+j.size;
        final[j] = j;
        final.j[j.file] = filesizestring;
    })
})

Desired output:

{teacher: {
        chemistry: 'newfilesize2MB',
        math: 'newfilesize1MB'
    }, 
student: {
        chemistry: 'newfilesize3MB',
        math: 'newfilesize4MB'
    }
}

Any suggestions for fixing this issue?

update

If nested forEach is not feasible, how can I achieve the same result?

javascript arrays for-loop foreach ecmascript-6

Answer 1

Answer №1

When running a loop over i -> i.forEach(function(j), remember that i is an object. To iterate through the key-value pairs of the object, use for (key in i). For each key, access the array by using i[key].

const users = [{
  teacher: [{
      file: 'chemistry',
      size: '2MB'
    },
    {
      file: 'math',
      size: '1MB'
    }
  ]
}, {
  student: [{
      file: 'chemistry',
      size: '3MB'
    },
    {
      file: 'math',
      size: '4MB'
    }
  ]
}];

let finalResult = {};

users.forEach(function(item) {
  for (key in item) {
    var obj = {};
    item[key].forEach(function(element) {
      let fileSizeString = 'newfilesize' + element.size;
      obj[element.file] = fileSizeString;
    });
    finalResult[key] = obj;
  }
});

console.log(finalResult);

I hope this explanation helps!

Answer 2

When running a loop over i -> i.forEach(function(j), remember that i is an object. To iterate through the key-value pairs of the object, use for (key in i). For each key, access the array by using i[key].

const users = [{
  teacher: [{
      file: 'chemistry',
      size: '2MB'
    },
    {
      file: 'math',
      size: '1MB'
    }
  ]
}, {
  student: [{
      file: 'chemistry',
      size: '3MB'
    },
    {
      file: 'math',
      size: '4MB'
    }
  ]
}];

let finalResult = {};

users.forEach(function(item) {
  for (key in item) {
    var obj = {};
    item[key].forEach(function(element) {
      let fileSizeString = 'newfilesize' + element.size;
      obj[element.file] = fileSizeString;
    });
    finalResult[key] = obj;
  }
});

console.log(finalResult);

I hope this explanation helps!

Answer 3

Answer №2

To achieve this, you can utilize the reduce method as shown below:

const usersList = [{
    teacher: [{
            subject: 'chemistry',
            fileSize: '2MB'
        },
        {
            subject: 'math',
            fileSize: '1MB'
        }
    ]
}, {
    student: [{
            subject: 'chemistry',
            fileSize: '3MB'
        },
        {
            subject: 'math',
            fileSize: '4MB'
        }
    ]
}];

let processedData = usersList.reduce((accumulator, user) => (key = Object.keys(user)[0], { ...accumulator,
    [key]: user[key].reduce((acc, subjectDetails) => ({ ...acc,
        [subjectDetails.file]: 'newfilesize' + subjectDetails.size
    }), {})
}), {})

console.log(processedData)

Answer 4

To achieve this, you can utilize the reduce method as shown below:

const usersList = [{
    teacher: [{
            subject: 'chemistry',
            fileSize: '2MB'
        },
        {
            subject: 'math',
            fileSize: '1MB'
        }
    ]
}, {
    student: [{
            subject: 'chemistry',
            fileSize: '3MB'
        },
        {
            subject: 'math',
            fileSize: '4MB'
        }
    ]
}];

let processedData = usersList.reduce((accumulator, user) => (key = Object.keys(user)[0], { ...accumulator,
    [key]: user[key].reduce((acc, subjectDetails) => ({ ...acc,
        [subjectDetails.file]: 'newfilesize' + subjectDetails.size
    }), {})
}), {})

console.log(processedData)

Answer 5

Answer №3

i is not an array object in the forEach loop, so you cannot call forEach on an object. Instead, you can extract the array from the object and then apply the forEach method on that array.

const users = [
        {teacher: [{ file: 'chemistry', size: '2MB' },{ file: 'math', size: '1MB' }]}, 
        {student: [{ file: 'chemistry', size: '3MB' },{ file: 'math', size: '4MB' }]}
];

let final = {};

users.forEach(function (user) {
    let key = Object.keys(user)[0];
    let obj = {};
    user[key].forEach(function(file){
        obj[file.file] = 'newfilesize' + file.size;
    });

    final[key] = obj;
});

console.log(final);

Answer 6

i is not an array object in the forEach loop, so you cannot call forEach on an object. Instead, you can extract the array from the object and then apply the forEach method on that array.

const users = [
        {teacher: [{ file: 'chemistry', size: '2MB' },{ file: 'math', size: '1MB' }]}, 
        {student: [{ file: 'chemistry', size: '3MB' },{ file: 'math', size: '4MB' }]}
];

let final = {};

users.forEach(function (user) {
    let key = Object.keys(user)[0];
    let obj = {};
    user[key].forEach(function(file){
        obj[file.file] = 'newfilesize' + file.size;
    });

    final[key] = obj;
});

console.log(final);

Answer 7

Answer №4

I simply cannot tolerate not having a function, even if it's named strangely.
The main issue here is similar to what other answers have touched on: your top-level variable users is an array with a forEach method. However, this array contains objects that do not have a forEach method. Instead, you can use for in for iteration (link intended) to access teacher/student data. Furthermore, the last level is once again an array, which can be iterated using forEach.
Therefore, there is indeed a nested forEach, but it is nested within a for in.

const users = [
    {teacher: [
        {file: 'chemistry', size: '2MB'},
        {file: 'math', size: '1MB'}]
    },
    {student: [
        {file: 'chemistry', size: '3MB'},
        {file: 'math', size: '4MB'}]
    }
];

function magic(coll){
  var res={};
  coll.forEach(function(user){
    for(misc in user){
      user[misc].forEach(function(subject){
        this[subject.file]="newfilesize"+subject.size;
      },res[misc]={});
    }
  });
  return res;
}

console.log(magic(users));

(If someone has a better word than misc, please suggest)

Answer 8

I simply cannot tolerate not having a function, even if it's named strangely.
The main issue here is similar to what other answers have touched on: your top-level variable users is an array with a forEach method. However, this array contains objects that do not have a forEach method. Instead, you can use for in for iteration (link intended) to access teacher/student data. Furthermore, the last level is once again an array, which can be iterated using forEach.
Therefore, there is indeed a nested forEach, but it is nested within a for in.

const users = [
    {teacher: [
        {file: 'chemistry', size: '2MB'},
        {file: 'math', size: '1MB'}]
    },
    {student: [
        {file: 'chemistry', size: '3MB'},
        {file: 'math', size: '4MB'}]
    }
];

function magic(coll){
  var res={};
  coll.forEach(function(user){
    for(misc in user){
      user[misc].forEach(function(subject){
        this[subject.file]="newfilesize"+subject.size;
      },res[misc]={});
    }
  });
  return res;
}

console.log(magic(users));

(If someone has a better word than misc, please suggest)

Answer 9

Answer №5

Have you considered using a data structure similar to this instead?

const users = [
    {type: "teacher",
     files: [
        {file: 'chemistry', size: '2MB'},
        {file: 'math', size: '1MB'}]
    }, {type: "student",
        files: [
        {file: 'chemistry', size: '3MB'},
        {file: 'math', size: '4MB'}]
    }
];

let final = {};

users.forEach(function(i) {

    i.files.forEach(function(j){
        let filesizestring = 'newfilesize'+j.size;
        final[j] = j;
        final[j][j.file] = filesizestring;  // <-- Can you explain this line?
    })
})

I'm curious about the commented line, could you offer some insight into its purpose?

Answer 10

Have you considered using a data structure similar to this instead?

const users = [
    {type: "teacher",
     files: [
        {file: 'chemistry', size: '2MB'},
        {file: 'math', size: '1MB'}]
    }, {type: "student",
        files: [
        {file: 'chemistry', size: '3MB'},
        {file: 'math', size: '4MB'}]
    }
];

let final = {};

users.forEach(function(i) {

    i.files.forEach(function(j){
        let filesizestring = 'newfilesize'+j.size;
        final[j] = j;
        final[j][j.file] = filesizestring;  // <-- Can you explain this line?
    })
})

I'm curious about the commented line, could you offer some insight into its purpose?

Answer 11

Answer №6

Converting an array into an object without verifying the number of items can be risky. The approach taken in this response accounts for multiple items and returns an array with the desired structure. If you are certain there will only be one item, you can simply use final[0] as the resulting array will also contain a single element.

const users = [{
  teacher: [{
    file: 'chemistry',
    size: '2MB'
  }, {
    file: 'math',
    size: '1MB'
  }]
}, {
  student: [{
    file: 'chemistry',
    size: '3MB'
  }, {
    file: 'math',
    size: '4MB'
  }]
}];

final = [];
users.forEach(item => {
  let obj = {};
  let userType = item.teacher ? "teacher" : "student";
  obj[userType] = {};
  item[userType].forEach(subItem => obj[userType][subItem.file] = 'newfilesize' + subItem.size);
  final.push(obj);
});

console.log(final);

Answer 12

Converting an array into an object without verifying the number of items can be risky. The approach taken in this response accounts for multiple items and returns an array with the desired structure. If you are certain there will only be one item, you can simply use final[0] as the resulting array will also contain a single element.

const users = [{
  teacher: [{
    file: 'chemistry',
    size: '2MB'
  }, {
    file: 'math',
    size: '1MB'
  }]
}, {
  student: [{
    file: 'chemistry',
    size: '3MB'
  }, {
    file: 'math',
    size: '4MB'
  }]
}];

final = [];
users.forEach(item => {
  let obj = {};
  let userType = item.teacher ? "teacher" : "student";
  obj[userType] = {};
  item[userType].forEach(subItem => obj[userType][subItem.file] = 'newfilesize' + subItem.size);
  final.push(obj);
});

console.log(final);

Answer 13

Answer №7

In order to improve the efficiency of your data, I suggest restructuring it as follows:

const usersData = [
  {
    role:"teacher",
    documents: [
      {name: 'chemistry', fileSize: '2MB'},
      {name: 'math', fileSize: '1MB'}
    ]
  }, {
    role:"student",
    documents: [
      {name: 'chemistry', fileSize: '3MB'},
      {name: 'math', fileSize: '4MB'}
    ]
  }
];

This new structure allows for easier access and manipulation of user roles and their respective documents:

for(const userData of usersData){
  for(const document of userData.documents){
    document.fileSize = "newFileSizeValue" + document.fileSize;
  }
}

Answer 14

In order to improve the efficiency of your data, I suggest restructuring it as follows:

const usersData = [
  {
    role:"teacher",
    documents: [
      {name: 'chemistry', fileSize: '2MB'},
      {name: 'math', fileSize: '1MB'}
    ]
  }, {
    role:"student",
    documents: [
      {name: 'chemistry', fileSize: '3MB'},
      {name: 'math', fileSize: '4MB'}
    ]
  }
];

This new structure allows for easier access and manipulation of user roles and their respective documents:

for(const userData of usersData){
  for(const document of userData.documents){
    document.fileSize = "newFileSizeValue" + document.fileSize;
  }
}

In the world of JavaScript, encountering a nested forEach loop may lead

update

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Similar questions

Iterate over a JSON object to calculate the total sum of values based on distinct nested properties

Occasionally, the system may mistakenly flag a password as invalid even though it is indeed correct

When a function is passed as an argument in Javascript code, the setTimeout function may behave in unique ways

Loading the JS file after waiting on Lib (IronRouter) causes the HTML not to load properly

Navigating Highcharts within jQuery

The program encountered an error: Unable to access the 'toDate' property of an undefined value

Dispatching actions to update the Redux state is not reflecting any changes

Parsing JSON sub-objects with individual names autonomously

Error in React Material UI: 'theme' variable is not defined - no-undef

What is the best method for preventing a specific .CSS file from being included in the output when using

Integrate new HTML elements into the React component structure

Using angular.copy function to copy an array with a custom property

How can JavaScript mimic type-specific extension methods?

Fixed Array of String in Kotlin

Retrieve Django imagefield file name using jQuery before submitting

Tips for using jest toHaveBeenCalled with multiple instances

Should all pages in React be rendered on the server side?

What is the best way to retrieve nested ng-include scope/fields within a form?

Encountered a CPU-side conversion issue causes Browser to crash when attempting to load an object using threejs

Making sure to consistently utilize the service API each time the form control is reset within Angular 4