CODEWITHSUNDEEP
javascriptarraysobject
mne_web_dev
mne_web_dev

Reputation: 251

How to create multiple array of objects from single array of objects based on property value

If I have array of objects like this one I want to group it by property value

    const unitsPhotos = [{
    fieldname: 'unit_1',
    name: 'Photo 1',
    size: 324
  },
  {
    fieldname: 'unit_2',
    name: 'Photo 11',
    size: 321
  },
  {
    fieldname: 'unit_1',
    name: 'Photo 41',
    size: 541
  },
  {
    fieldname: 'unit_2',
    name: 'Photo 14',
    size: 123
  },
  {
    fieldname: 'unit_3',
    name: 'Photo 144',
    size: 1223
  }
  ];

How to create three new separate arrays of objects based on fieldname ( or single array that contains those arrays of objects ) something like this

const groupedArray = [
  [{
      fieldname: 'unit_1',
      name: 'Photo 1',
      size: 324
    },
    {
      fieldname: 'unit_1',
      name: 'Photo 132',
      size: 325
    }],
  [{
      fieldname: 'unit_2',
      name: 'Photo 11',
      size: 321
    },
    {
      fieldname: 'unit_2',
      name: 'Photo 14',
      size: 123
    }],
  [{
    fieldname: 'unit_3',
    name: 'Photo 144',
    size: 1223
  }]];

Upvotes: 2

Views: 935

Answers (4)

PeterKA
PeterKA

Reputation: 24638

Use Array#reduce() to produce an object:

const unitsPhotos = [{fieldname: 'unit_1', name: 'Photo 1', size: 324 }, { fieldname: 'unit_2',
    name: 'Photo 11', size: 321 }, { fieldname: 'unit_1', name: 'Photo 41', size: 541 }, { fieldname: 'unit_2', name: 'Photo 14', size: 123 }, { fieldname: 'unit_3', name: 'Photo 144', size: 1223 }];
    
const groupedArray = unitsPhotos.reduce((prev, cur) => 
    ({...prev,[cur.fieldname]:(prev[cur.fieldname] || []).concat(cur)}),{}
);

console.log( groupedArray );
//You can leave it as an object OR 
//if it has to be an array use Object.values()

//Like so: Output is same as your desired output.
console.log( Object.values(groupedArray) );
/*OUTPUT:
[
  [
    {
      "fieldname": "unit_1",
      "name": "Photo 1",
      "size": 324
    },
    {
      "fieldname": "unit_1",
      "name": "Photo 41",
      "size": 541
    }
  ],
  [
    {
      "fieldname": "unit_2",
      "name": "Photo 11",
      "size": 321
    },
    {
      "fieldname": "unit_2",
      "name": "Photo 14",
      "size": 123
    }
  ],
  [
    {
      "fieldname": "unit_3",
      "name": "Photo 144",
      "size": 1223
    }
  ]
]
*/

Upvotes: 2

Issam ABOULFADL
Issam ABOULFADL

Reputation: 31

this example to create an array of objects from multiple arrays, try the following to your existing code.

var ids = [1,2,3]; //Hundreds of elements here
var names = ["john","doe","foo"]; //Hundreds of elements here
var countries = ["AU","USA","USA"]; //Hundreds of elements here

// Create the object array
var items = ids.map((id, index) => {
  return {
    id: id,
    name: names[index],
    country: countries[index]
  }
});

// Result
var items = [
    {id: 1, name: "john", country: "AU"},
    {id: 2, name: "doe", country: "USA"},
    ...
];

Upvotes: 1

sno2
sno2

Reputation: 4183

There are many different approaches to go with this although I would advise using Array.prototype.reduce to avoid having to iterate over the list many times when it is unnecessary. To do this, I created an object then pushed each item into a key of the field name and create the array if it is not present. Here's the code:

const unitsPhotos = [{
    fieldname: 'unit_1',
    name: 'Photo 1',
    size: 324
  },
  {
    fieldname: 'unit_2',
    name: 'Photo 11',
    size: 321
  },
  {
    fieldname: 'unit_1',
    name: 'Photo 41',
    size: 541
  },
  {
    fieldname: 'unit_2',
    name: 'Photo 14',
    size: 123
  },
  {
    fieldname: 'unit_3',
    name: 'Photo 144',
    size: 1223
  }
];

function groupPhotos(photos) {
    return Object.values(photos.reduce((acc, cur) => {
        acc[cur.fieldname] ??= [];
        acc[cur.fieldname].push(cur);
        return acc;
    }, {}));
}

console.log(groupPhotos(unitsPhotos));

TypeScript Playground Link

Upvotes: 2

Sahand Zeynol
Sahand Zeynol

Reputation: 331

you can first unique the array and next push them to groupedArray like this:

 const unitsPhotos = [{
    fieldname: 'unit_1',
    name: 'Photo 1',
    size: 324
  },
  {
    fieldname: 'unit_2',
    name: 'Photo 11',
    size: 321
  },
  {
    fieldname: 'unit_1',
    name: 'Photo 41',
    size: 541
  },
  {
    fieldname: 'unit_2',
    name: 'Photo 14',
    size: 123
  },
  {
    fieldname: 'unit_3',
    name: 'Photo 144',
    size: 1223
  }
  ];
  
const unitsPhotosArr = unitsPhotos.map(item => item.fieldname)
// you can find uniques with this function
const toFindUniques = arry => arry.filter((item, index) => arry.indexOf(item) === index)
const uniques = toFindUniques(unitsPhotosArr);
const groupedArray = [];
for (const element of uniques) {
  const item = unitsPhotos.filter(el => el.fieldname === element);
  groupedArray.push(item)
}

Upvotes: 3

Related Questions