Reputation: 35
I am trying to get data from the backend and display the data in the frontend. To do that I tried this code.
function Posts() {
const [notes, getNotes] = useState([]);
useEffect(()=>{
getAllNotes();
}, []);
const getAllNotes = async () => {
await axios.get(`/buyerPosts`)
.then ((response)=>{
const allNotes=response.data.existingPosts;
getNotes(allNotes);
})
.catch(error=>console.error(`Error: ${error}`));
}
console.log(notes);
const buyerId=(localStorage.getItem("userId"));
console.log(buyerId);
const [offers, getOffers] = useState([]);
useEffect(()=>{
getAllOffers();
}, []);
const getAllOffers = async () => {
await axios.get(`/viewPendingSellerOffers`)
.then ((response)=>{
const allNotes=response.data.existingOffers;
getOffers(allNotes);
})
.catch(error=>console.error(`Error: ${error}`));
}
console.log(offers);
const wasteItem = offers?.filter(wasteItem => wasteItem.status==='accepted' && wasteItem.buyerId===buyerId && wasteItem.wasteItemsListId==='completePost');
console.log(wasteItem);
return(
<main className="grid-b">
{notes.map((note,index)=> {
if(note._id===wasteItem.postId)
return (
<article>
<div className="text-b">
<h3>Post ID: {index + 1}</h3>
<p>Location: {note.address}</p>
<p>Post Type: {note.postType}</p>
<p>Address: {note.address}</p>
<p>Telephone No: {note.contact}</p>
</div>
</article>
);
})}
</main>
);
}
export default Posts;
Hare, I call the first API and get a length 7 array of objects. This is an image of this result.
Then I call a second API and get a length 6 array of objects. This is an image of this result.
Then I try to filter second API call results like this const wasteItem = offers?.filter(wasteItem => wasteItem.status==='accepted' && wasteItem.buyerId===buyerId && wasteItem.wasteItemsListId==='completePost');
and I get length 2 array of objects as the result of this filter function.
Then I try to map the first API call data in a map function. To do that I used this condition if(note._id===wasteItem.postId)
. But this map function is not working. Maybe it does not work because wasteItem
is an array of objects. How do I solve this problem?
Upvotes: 0
Views: 30
Reputation: 270
wasteItem
is an array of objects, but you treated it as object here if(note._id===wasteItem.postId)
. You would need to iterate through wasteItem
array first, or use find()
.
{notes.map((note,index)=> {
if(wasteItem.find(o=>o.postId === note._id) !== undefined)
return (
<article>
...
</article>
);
})}
Upvotes: 2