CODEWITHSUNDEEP
javascriptreactjs
Pranav
Pranav

Reputation: 1646

How to get data from one object when mapped two objects based on its id?

In a certain project, I've two objects obj1 and obj2.

obj1 (Items Data) is as follows:

obj1 = [
{"_id": "abscdfg1234","blur_photo": [{"potrait": "https://img.jpg"}]}, <-- Images here are blur
{"_id": "pqrst54678","blur_photo": [{"potrait": "https://img2.jpg"}]},
{"_id": "uioyt12321","blur_photo": [{"potrait": "https://img3.jpg"}]},
{"_id": "rtye33452","blur_photo": [{"potrait": "https://img4.jpg"}]},
]

obj2 (Purchase Data) is as follows:

obj2 = [
{"_id": "pqrst54678", "photo": [{"cover":"https://newimg2.jpg"}]} <-- Images here are normal
]

What I've done is:

{
obj1.map((data) => (
<img src={(obj2.some(purchaseItem => purchaseItem._id === data._id)) ? (obj2.filter(purchaseItem => purchaseItem._id === data._id)) : data.blur_photo.potrait} height="100%" width="100%" />
))
}

How shall I get image data from obj2 object when mapped obj1's id with obj2's id?

Upvotes: 0

Views: 59

Answers (1)

geoffrey
geoffrey

Reputation: 2454

I am not surprised that you can't find your cubs with all this JS inlined.

You can use Array.find to actually get the matching element. Array.some returns a Boolean.

Then it's a matter of accessing the data with the correct path. You had made a mistake: blur_photo holds an array of portraits.

const getSrc = itemData => {
    const matchingId = item => item._id === itemData._id;
    const match = purchaseData.find(matchingId);
    return match
        ? match.photo[0].cover
        : itemData.blur_photo[0].potrait
};

const srcs = itemsData.map(getSrc);

{
srcs.map(src => (
    <img src={src} height="100%" width="100%" />
))
}

Upvotes: 1

Related Questions