Iterating over an array and setting the key for a new array

Question

Iterating over an array and setting the key for a new array

I have encountered a challenge while attempting to create a new array where the key is the index of the original array.

var array = [
          {"tom": "red", "part":"green", "brow_id":45},
          {"tom": "red", "part":"yellow", "brow_id":1},
          {"tom": "red", "part":"yellow", "brow_id":2},
          {"tom": "maroon", "part":"cyan", "brow_id":45}
           ];
var newarray = {};

array.forEach(function(elem) {
        newarray[elem.brow_id] = elem;
                    });

The resulting array looks like this

         45: {"tom": "red", "part":"green", "brow_id":45},
         1:  {"tom": "red", "part":"yellow", "brow_id":1},
         2:  {"tom": "red", "part":"yellow", "brow_id":2},

However, I aim for it to include all the IDs from the original array in this format

        45: [{"tom": "red", "part":"green", "brow_id":45},{"tom": "maroon", "part":"yellow", "brow_id":45}]
         1:  {"tom": "red", "part":"yellow", "brow_id":1},
         2:  {"tom": "red", "part":"yellow", "brow_id":2},

What could be causing this issue?

javascript arrays grouping

Answer 1

Answer №1

One way to tackle this is by first checking if the property exists and assigning the element to it. If not, then check if it's an array and if it's not, create one. Then push the element into the array.

var array = [{ tom: "red", part: "green", brow_id: 45 }, { tom: "red", part: "yellow", brow_id: 1 }, { tom: "red", part: "yellow", brow_id: 2 }, { tom: "maroon", part: "cyan", brow_id: 45 }],
    object = {};

array.forEach(function(elem) {
      if (!object[elem.brow_id]) {
          object[elem.brow_id] = elem;
          return;
      }
      if (!Array.isArray(object[elem.brow_id])) {
          object[elem.brow_id] = [object[elem.brow_id]];
      }
      object[elem.brow_id].push(elem);
});

console.log(object);

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

Answer 2

One way to tackle this is by first checking if the property exists and assigning the element to it. If not, then check if it's an array and if it's not, create one. Then push the element into the array.

var array = [{ tom: "red", part: "green", brow_id: 45 }, { tom: "red", part: "yellow", brow_id: 1 }, { tom: "red", part: "yellow", brow_id: 2 }, { tom: "maroon", part: "cyan", brow_id: 45 }],
    object = {};

array.forEach(function(elem) {
      if (!object[elem.brow_id]) {
          object[elem.brow_id] = elem;
          return;
      }
      if (!Array.isArray(object[elem.brow_id])) {
          object[elem.brow_id] = [object[elem.brow_id]];
      }
      object[elem.brow_id].push(elem);
});

console.log(object);

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

Answer 3

Answer №2

To achieve the desired output, you can utilize the reduce function for grouping and building.

var array = [{    "tom": "red",    "part": "green",    "brow_id": 45  },  {    "tom": "red",    "part": "yellow",    "brow_id": 1  },  {    "tom": "red",    "part": "yellow",    "brow_id": 2  },  {    "tom": "maroon",    "part": "cyan",    "brow_id": 45  }];

var result = array.reduce((a, elem) => {
  if (a[elem.brow_id]) {
    if (Array.isArray(a[elem.brow_id])) a[elem.brow_id].push(elem);
    else a[elem.brow_id] = [elem, a[elem.brow_id]];
  } else a[elem.brow_id] = elem; 
  
  return a;
}, {});

console.log(result);

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

Another approach involves using forEach along with a correction to prevent duplicating elements in the new object.

var array = [{    "tom": "red",    "part": "green",    "brow_id": 45  },  {    "tom": "red",    "part": "yellow",    "brow_id": 1  },  {    "tom": "red",    "part": "yellow",    "brow_id": 2  },  {    "tom": "maroon",    "part": "cyan",    "brow_id": 45  }];

var newarray = {};

array.forEach(function(elem) {
  if (newarray[elem.brow_id]) {
    if (Array.isArray(newarray[elem.brow_id])) newarray[elem.brow_id].push(elem);
    else newarray[elem.brow_id] = [elem, newarray[elem.brow_id]];
  } else newarray[elem.brow_id] = elem;  
});

console.log(newarray);

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

Answer 4

To achieve the desired output, you can utilize the reduce function for grouping and building.

var array = [{    "tom": "red",    "part": "green",    "brow_id": 45  },  {    "tom": "red",    "part": "yellow",    "brow_id": 1  },  {    "tom": "red",    "part": "yellow",    "brow_id": 2  },  {    "tom": "maroon",    "part": "cyan",    "brow_id": 45  }];

var result = array.reduce((a, elem) => {
  if (a[elem.brow_id]) {
    if (Array.isArray(a[elem.brow_id])) a[elem.brow_id].push(elem);
    else a[elem.brow_id] = [elem, a[elem.brow_id]];
  } else a[elem.brow_id] = elem; 
  
  return a;
}, {});

console.log(result);

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

Another approach involves using forEach along with a correction to prevent duplicating elements in the new object.

var array = [{    "tom": "red",    "part": "green",    "brow_id": 45  },  {    "tom": "red",    "part": "yellow",    "brow_id": 1  },  {    "tom": "red",    "part": "yellow",    "brow_id": 2  },  {    "tom": "maroon",    "part": "cyan",    "brow_id": 45  }];

var newarray = {};

array.forEach(function(elem) {
  if (newarray[elem.brow_id]) {
    if (Array.isArray(newarray[elem.brow_id])) newarray[elem.brow_id].push(elem);
    else newarray[elem.brow_id] = [elem, newarray[elem.brow_id]];
  } else newarray[elem.brow_id] = elem;  
});

console.log(newarray);

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

Answer 5

Answer №3

Utilizing Array.forEach() for grouping:

var items = [{"name":"apple","color":"red","id":1},{"name":"banana","color":"yellow","id":2},{"name":"kiwi","color":"green","id":3},{"name":"grape","color":"purple","id":1}];

var groupedItems = {};

items.forEach(function(item) {
  var key = item['id'];
  
  groupedItems[key] = key in groupedItems ? [].concat(groupedItems[key], item) : item;
});

console.log(groupedItems);

Answer 6

Utilizing Array.forEach() for grouping:

var items = [{"name":"apple","color":"red","id":1},{"name":"banana","color":"yellow","id":2},{"name":"kiwi","color":"green","id":3},{"name":"grape","color":"purple","id":1}];

var groupedItems = {};

items.forEach(function(item) {
  var key = item['id'];
  
  groupedItems[key] = key in groupedItems ? [].concat(groupedItems[key], item) : item;
});

console.log(groupedItems);

Iterating over an array and setting the key for a new array

Answer №1

Answer №2

Answer №3

Similar questions

Rotating the camera around the origin in Three.js

Is it possible to selectively export certain interfaces within a .d.ts file?

JSON is throwing an error because a semi-colon is missing before a statement

Inject the code snippet from CodePen into a WordPress webpage

Struggling to set up the connection between React-Redux connect and the Provider store

What is the best way to transmit two variables in a single message with Socket.io?

Step by step guide on including a JavaScript function in a web worker using importScripts

Maintaining datatype integrity in MongoDB Stitch when decrementing with update statements

During the click event, two distinct $.ajax requests interfere and cancel each other out

Using a JavaScript class rather than an ID for toggling visibility

An expression must be a modifiable lvalue in order to set an element within a dynamic array consisting of fixed-length arrays

"Unexpected compatibility issues arise when using TypeScript with React, causing errors in props functionality

Tips for making an appended element match the height of an image

Is it possible to replicate this JavaScript syntax in C++?

MongoDBError: Unauthorized access attempt for [action] operation by the user is prohibited

Having difficulty in successfully transmitting a dictionary via AJAX (POST) to Python (Django views) resulting in an empty dictionary every time

Incorporating numerous dropdown menus to a table filled with data retrieved from a database

Error: TypeScript encountered an issue while attempting to access a property that is undefined

Troubleshooting problem with chat messages due to Firestore snapshot limit or limitToLast issues

Assistance is required for establishing a connection between php and js. The process begins with executing a sql query to extract the necessary data, which is then encoded into JSON format