Not able to push object in an array

Question

I am trying to iterate over two array of objects and trying to push combined object in a new array. I have two arrays, allData and users. I am iterating over these array and if author from allData matches the id of users array then I am pushing data into newData array.

But I am not able to access imageURL while pushing into the newData array. Can someone point out why it is happening and what is solution

let allData = [{
    "id": 5,
    "message": "bnnnbnb",
    "parentId": 1,
    "author": 2
}];

let users = [{
    "id": 1,
    "name": "abc",
    "imageUrl": "avatar1.jpg"
}, {
    "id": 2,
    "name": "def",
    "imageUrl": "avatar2.jpg"
}, {
    "id": 3,
    "name": "qwe",
    "imageUrl": "avatar3.jpg"
}];

let newData = [];
allData.map((dataItem) => {
    users.map((user) => {
        if(dataItem.author === user.id){
            newData.push({...dataItem, user.imageUrl})
        }
    })
})

I am expecting below result:

let newData = [{
    "id": 5,
    "message": "bnnnbnb",
    "parentId": 1,
    "author": 2,
    "imageUrl": "avatar2.jpg"
}];

Start by checking the JS error console …? Chrome at least gives me a syntax error with what you have shown. — C3roe
– C3roe, Commented May 19, 2020 at 9:45

Dipyamanbiswas · Accepted Answer · 2020-05-19 09:51:52Z

1

newData.push({...dataItem, imageUrl: user.imageUrl})

This would fix the problem. The name definition is missing from your code

answered May 19, 2020 at 9:51

Dipyamanbiswas

713 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sudhir Ojha · Accepted Answer · 2020-05-19 09:49:26Z

1

You need to define property imageUrl in map and then push into array.

let allData = [{
    "id": 5,
    "message": "bnnnbnb",
    "parentId": 1,
    "author": 2
}];

let users = [{
    "id": 1,
    "name": "abc",
    "imageUrl": "avatar1.jpg"
}, {
    "id": 2,
    "name": "def",
    "imageUrl": "avatar2.jpg"
}, {
    "id": 3,
    "name": "qwe",
    "imageUrl": "avatar3.jpg"
}];

let newData = [];
allData.map((dataItem) => {
    users.map((user) => {
        if(dataItem.author === user.id){
            dataItem.imageUrl = user.imageUrl;
            newData.push(dataItem);
        }
    })
})
console.log(newData);

answered May 19, 2020 at 9:49

Sudhir Ojha

3,3053 gold badges16 silver badges28 bronze badges

Comments

Luke Garrigan · Accepted Answer · 2020-05-19 09:51:11Z

1

You're really close, you'd want something like this:

    let newData = [];
    allData.map(dataItem => {
        users.map(user => {
            if(dataItem.author === user.id){
                let imageUrl = user.imageUrl;  // define the name of the property
                newData.push({...dataItem, imageUrl})
            }
        })
    })

So json output would look like this:

[
  {
    "id": 5,
    "message": "bnnnbnb",
    "parentId": 1,
    "author": 2,
    "imageUrl": "avatar2.jpg"
  }
]

answered May 19, 2020 at 9:51

Luke Garrigan

5,0811 gold badge26 silver badges32 bronze badges

Comments

Max · Accepted Answer · 2020-05-19 09:52:34Z

1

Better if you use find like this:

const newData = allData.map((dataItem) => 
  ({
    ...dataItem, 
    imageUrl: (users.find(user => dataItem.author === user.id)||{}).imageUrl 
  }))

answered May 19, 2020 at 9:52

Max

1,0487 silver badges14 bronze badges

Comments

joy08 · Accepted Answer · 2020-05-19 09:56:38Z

1

Map over the array of objects using map and then match id's using find and then push the matched record to the resultant array

let allData = [
  {
    id: 5,
    message: "bnnnbnb",
    parentId: 1,
    author: 2
  }
];

let users = [
  {
    id: 1,
    name: "abc",
    imageUrl: "avatar1.jpg"
  },
  {
    id: 2,
    name: "def",
    imageUrl: "avatar2.jpg"
  },
  {
    id: 3,
    name: "qwe",
    imageUrl: "avatar3.jpg"
  }
];

let newData = [];
let output = allData.map((dataItem, i) => {
  let temp = users.find(user => dataItem.author === user.id);
  newData.push({ ...dataItem, imageUrl: temp.imageUrl });
  return newData;
});

console.log(newData);

answered May 19, 2020 at 9:56

joy08

9,6729 gold badges43 silver badges81 bronze badges

Comments

Pablo CG · Accepted Answer · 2020-05-19 09:47:32Z

0

You should use newData.push({...dataItem, imageUrl: user.imageUrl}) instead.

You need to define the name of the property imageUrl in the new object you're pushing.

answered May 19, 2020 at 9:47

Pablo CG

8166 silver badges19 bronze badges

Collectives™ on Stack Overflow

Not able to push object in an array

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related