I am trying to iterate over two array of objects and trying to push bined 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"
}];

I am trying to iterate over two array of objects and trying to push bined 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"
}];

• javascript
• arrays

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

6 Answers 6

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

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

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);

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"
  }
]

Better if you use find like this:

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

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);

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.