Loop over array of objects, and generate new array by certain conditions

Question

I have an Javascript object that looks like this:

const obj = [
{
  name: "Ali",
  userID: 123,
  type: "photo",
  photo: {
    "title": "Me",
    "src": "/cool.jpg",
  }
},
{
  name: "Ali",
  userID: 123,
  type: "photo",
  photo: {
    "title": "Photo",
    "src": "/photo.jpg"
  }
},
{
  name: "John",
  userID: 1234,
  type: "photo",
  photo: {
    "title": "Photo",
    "src": "/photo.jpg"
  }
},
{
  name: "John",
  userID: 1234,
  type: "photo",
  photo: {
    "title": "Photo",
    "src": "/photo.jpg"
  }
}];

I need to loop over it and return an array that will look like:

const obj = [
  {
    name: "Ali",
    userID: 123,
    type: "photo",
    photos: [
      {
        title: "Me",
        src: "/cool.jpg"
      },
      {
        title: "Photo",
        src: "/photo.jpg"
      }
    ]
  },
  {
    name: "John",
    userID: 1234,
    type: "photo",
    photos: [
      {
        "title": "Me",
        "src": "photo.jpg"
      },
      {
        title: "Photo",
        src: "/photo.jpg"
      }
    ]
  }
]

Note that the first object can contain an object with the same name over 100 times, I need it only once and inside an array of all of his photos.. How would I do that? What type of loop should i use? Thanks...

@RokoC.Buljan the array i am trying to achieve is totally different from this — Ilanus
– Ilanus, Commented Aug 25, 2016 at 23:03
yah... misread. Not totally but close. You actually want to merge photo of a user into multiple photos (which can be excerpt from here). What have you tried? You question as it stands shows no effort from your side. Do you have any code you already tried with a specific issue? Or you're trying to find someone to code this for you? — Roko C. Buljan
– Roko C. Buljan, Commented Aug 25, 2016 at 23:05
I have some code, but it's not doing exactly what i want, i need to stack those photos by the user id, i will add me code — Ilanus
– Ilanus, Commented Aug 25, 2016 at 23:07
Are wanting a new array of the data, or modifying the original obj? — Xotic750
– Xotic750, Commented Aug 25, 2016 at 23:13

Community · Accepted Answer · 2020-06-20 09:12:55Z

Here is another ES6 script:

function merge(input) {
    return [...input.reduce( (acc, {name, userID, type, photo} ) => {
        let obj = acc.get(name) || {name, userID, type, photos: []};
        obj.photos.push(photo);
        return acc.set(name, obj);
    }, new Map()).values()];
}

// Sample data
var input = [{
  name: "Ali",
  userID: 123,
  type: "photo",
  photo: {
    "title": "Me",
    "src": "/cool.jpg",
  }
},
{
  name: "Ali",
  userID: 123,
  type: "photo",
  photo: {
    "title": "Photo",
    "src": "/photo.jpg"
  }
},
{
  name: "John",
  userID: 1234,
  type: "photo",
  photo: {
    "title": "Photo",
    "src": "/photo.jpg"
  }
},
{
  name: "John",
  userID: 1234,
  type: "photo",
  photo: {
    "title": "Photo",
    "src": "/photo.jpg"
  }
}];

// convert
result = merge(input);

// output result
console.log(result);

Explanation:

input.reduce iterates over the input, and accumulates a value that is initialised as a new Map (second argument to reduce).

In each iteration the accumulated value is passed as first argument, and the second argument receives the input element. By a destructuring assignment, we get variables for each of the name, userID, type and photo properties.

There are three statements executed in each iteration:

obj is defined either as the accumulated object we have for the name value, or (||) if we have none yet, as the given input element, but without the photo property and with a new photos array: {name, userID, type, photos: []}.
The current photo is added to it.
The resulting object is assigned back to the accumulated Map object, which itself is returned to the reduce internals. It will be passed as first argument for the next iteration, etc.

reduce returns the final accumulated object, i.e. a Map. As this is not the desired output format, it is converted to an array, which is done by taking its values (we don't need the keys any more), and converting that to an array with the spread operator ([... ]).

Niles Tanner · Accepted Answer · 2016-08-25 23:13:43Z

This does most of what you want:

var sorted = {};
obj.forEach(function(element){
  if(sorted[element.name]){
    sorted[element.name].photos.push(element.photo)
  }else{
    sorted[element.name] = {
      name: element.name,
      userID: element.userID,
      type: element.type,
      photos:[element.photo]
    }
  }
});

This doesn't create an array it creates a object with the names as keys.

const obj = [
{
  name: "Ali",
  userID: 123,
  type: "photo",
  photo: {
    "title": "Me",
    "src": "/cool.jpg",
  }
},
{
  name: "Ali",
  userID: 123,
  type: "photo",
  photo: {
    "title": "Photo",
    "src": "/photo.jpg"
  }
},
{
  name: "John",
  userID: 1234,
  type: "photo",
  photo: {
    "title": "Photo",
    "src": "/photo.jpg"
  }
},
{
  name: "John",
  userID: 1234,
  type: "photo",
  photo: {
    "title": "Photo",
    "src": "/photo.jpg"
  }
}];

var sorted = {};
obj.forEach(function(element){
  if(sorted[element.name]){
    sorted[element.name].photos.push(element.photo)
  }else{
    sorted[element.name] = {
      name: element.name,
      userID: element.userID,
      type: element.type,
      photos:[element.photo]
    }
  }
  console.log(sorted);
});


var sortedarray = sorted.map()
console.log(sortedarray);

You can add this bit of code to convert the object into an array:

var sortedarray = Object.keys(sorted).map(function(person){
return sorted[person]});

Richard Schneider · Accepted Answer · 2016-08-25 23:52:12Z

1

A solution is to

transform each user to the new user (with an array of photos)
sort by the user's ID
merge photos based on user's ID

In ES6

// Transform
let new_users = user.map(u => {
  let o = Object.assign({}, u, {photos: [u.photo]}));
  delete o.photo;
  return o;
});

// Sort by user ID
new_users = new_users.sort((a,b) => a.userID - b.userID);

// Merge on userID
let prev = null;
new_user = new_user.filter(u => {
  if (prev && prev.userID === u.userID) {
    prev.photos.push(u.photos[0]);
    return false;
  }
  prev = u;
  return true;
});

edited Aug 25, 2016 at 23:52

answered Aug 25, 2016 at 23:35

Richard Schneider

35.5k9 gold badges59 silver badges74 bronze badges

Comments

Xotic750 · Accepted Answer · 2016-08-25 23:55:22Z

1

Using ES6 and creating a new object with a copy of the data and therefore leaving the original data intact.

Create a temporary Map.
Loop each entry in the object.
If the entry's ID does not exist in the Map then create and set a copy of the entry in the correct format.
If an entry already exists then just push a copy of the photos to the entry.
Return an array from the Map.

function merge(obj) {
  const temp = new Map();
  for (let r of obj) {
    if (temp.has(r.userID)) {
      temp.get(r.userID).photos.push(Object.assign({}, r.photo));
    } else {
      const entry = Object.assign({}, r);
      entry.photos = [Object.assign({}, r.photo)];
      delete entry.photo;
      temp.set(r.userID, entry);
    }
  }
  return Array.from(temp, x => x[1]);
}

const obj = [{
  name: "Ali",
  userID: 123,
  type: "photo",
  photo: {
    "title": "Me",
    "src": "/cool.jpg",
  }
}, {
  name: "Ali",
  userID: 123,
  type: "photo",
  photo: {
    "title": "Photo",
    "src": "/photo.jpg"
  }
}, {
  name: "John",
  userID: 1234,
  type: "photo",
  photo: {
    "title": "Photo",
    "src": "/photo.jpg"
  }
}, {
  name: "John",
  userID: 1234,
  type: "photo",
  photo: {
    "title": "Photo",
    "src": "/photo.jpg"
  }
}];

const merged = merge(obj);
document.getElementById('out').textContent = JSON.stringify(merged, null, 2);
console.log(merged);

<pre id="out"></pre>

edited Aug 25, 2016 at 23:55

answered Aug 25, 2016 at 23:29

Xotic750

23.6k8 gold badges59 silver badges81 bronze badges

2 Comments

Ilanus Over a year ago

This actually works in the way I need it to work except, I don't really understand how it works.. mind explaining? Thanks!

Xotic750 Over a year ago

I've added a textual description of the workings, does that help?

Collectives™ on Stack Overflow

Loop over array of objects, and generate new array by certain conditions

4 Answers 4

Explanation:

Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Explanation:

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related