Reputation: 443
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"
}];
Upvotes: 2
Views: 4378
Reputation: 9662
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);
Upvotes: 1
Reputation: 1048
Better if you use find like this:
const newData = allData.map((dataItem) =>
({
...dataItem,
imageUrl: (users.find(user => dataItem.author === user.id)||{}).imageUrl
}))
Upvotes: 1
Reputation: 71
newData.push({...dataItem, imageUrl: user.imageUrl})
This would fix the problem. The name definition is missing from your code
Upvotes: 1
Reputation: 5021
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"
}
]
Upvotes: 1
Reputation: 3305
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);
Upvotes: 1
Reputation: 816
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.
Upvotes: 0