How to create a new array from an array using forEach

Question

I'm sorry for my poor English.

groups: [
 {
 id: 1,
 smallGroups: [
 {name: "vegetable"},
 {name: "meat"}
 ]
 },
 {
 id: 2,
 smallGroups: [
 {name: "car"},
 {name: "train"}
 ]
 }
]

From the above array, I am trying to sort the names alphabetically by the associative array directly under groups.

let arr = [];
 groups.forEach(element => {
 arr = element.smallGroups.sort((a,b) => {
 let textA = a.name.toUpperCase();
 let textB = b.name.toUpperCase();
 return (textA < textB) ? 1 : (textA > textB) ? -1 : 0;
 })
});

I was able to sort them alphabetically, but I cannot store all the arrays from forEach in an array called arr.

If there is a better way to do this, please let me know.

• user15388024: Use Array.prototype.map instead of Array.prototype.forEach.
• trincot: sort is inplace, so groups will reflect the change after the loop is finished. No need to have arr at all. If you really want it in arr, then do arr = groups after the loop... but that looks like not very useful.

Answer 1

Use Array.prototype.map instead of Array.prototype.forEach. I used destructuring to avoid modifications in the original array because Array.prototype.sort changes in place and modifies the input array.

const groups = [
 {
 id: 1,
 smallGroups: [
 {name: "vegetable"},
 {name: "meat"}
 ]
 },
 {
 id: 2,
 smallGroups: [
 {name: "car"},
 {name: "train"}
 ]
 }
]
let arr = groups.map(element => [...element.smallGroups].sort((a,b) => {
 let textA = a.name.toUpperCase();
 let textB = b.name.toUpperCase();
 return (textA < textB) ? 1 : (textA > textB) ? -1 : 0;
}));
 
console.log(arr);
console.log(groups);

Answer 2

You should use push() to add new item in the array, though I think you can use Array.prototype.map() here:

The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.

Code Example:

let groups = [
 {
 id: 1,
 smallGroups: [
 {name: "vegetable"},
 {name: "meat"}
 ]
 },
 {
 id: 2,
 smallGroups: [
 {name: "car"},
 {name: "train"}
 ]
 }
];
let arr = groups.map(element => {
 return element.smallGroups.sort((a,b) => {
 let textA = a.name.toUpperCase();
 let textB = b.name.toUpperCase();
 return (textA < textB) ? 1 : (textA > textB) ? -1 : 0;
 })
});
console.log(arr);

Answer 3

I used array destructuring:

let groups= [
 {
 id: 1,
 smallGroups: [{ name: "vegetable" }, { name: "meat" }],
 },
 {
 id: 2,
 smallGroups: [{ name: "car" }, { name: "train" }],
 },
];
let arr = [];
// sort each and combine 
groups.forEach((element) => {
 let temp = element.smallGroups.sort((a, b) => {
 let textA = a.name.toUpperCase();
 let textB = b.name.toUpperCase();
 return textA < textB ? 1 : textA > textB ? -1 : 0;
 });
 arr = [...arr, ...temp];
});

Answer 4

If I understand your question right you need to create a copy groups array because you do not want to modify it and sort by alphabetical order the new array called arr.

let arr = [...groups];
arr.forEach((el) => {
 el.smallGroups.sort(function (a, b) {
 const first = a.name.toUpperCase();
 const second = b.name.toUpperCase();
 if (first > second) {
 return 1;
 }
 if (first < second) {
 return -1;
 }
 return 0;
 });
})