CODEWITHSUNDEEP
javascriptarrays
Bonzo
Bonzo

Reputation: 443

Not able to push object in an array

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

Answers (6)

joy08
joy08

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

Max
Max

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

Dipyamanbiswas
Dipyamanbiswas

Reputation: 71

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

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

Upvotes: 1

Luke Garrigan
Luke Garrigan

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

Sudhir Ojha
Sudhir Ojha

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

Pablo CG
Pablo CG

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

Related Questions