Reputation: 139
I have a GET request where if I add the creator to the post as a param like api/watchlist/?creator=5dac9d3567aca81e40bfc0 and test it in Postman, the results return all posts by that creator with the following code correctly.
app.js
app.get('/api/watchlist',(req, res, next)=>{
Watching.find({ creator: req.query.creator})
.then(documents => {
console.log("Creator value: " + req.query.creator);
res.status(200).json({
message: 'User\'s watchlist items retrieved!',
posts: documents
});
});
});
If I try and pull the GET request into angular, then it returns nothing.
Also the front end when I open the relevant webpage says frontend is saying ERROR TypeError: "retrievedData.posts is undefined"
getWatchListItems watch-list.service.ts:72
watch-list.service.ts
getWatchListItems(creator: string) {
this.http
.get<{ message: string; posts: any; maxPosts: number; watchlist: string }>(
"http://localhost:3000/api/watchlist?creator=" + creator
)
.pipe(
map(retrievedData => {
console.log(retrievedData.watchlist);
return {
posts: retrievedData.posts.map(post => {
console.log(retrievedData.watchlist);
return {
title: post.title,
cost: post.cost,
listingOwner: post.listingOwner,
id: post._id
};
}),
maxPosts: retrievedData .maxPosts
};
})
)
.subscribe(transformedPostData => {
console.log(transformedPostData);
this.posts = transformedPostData.posts;
this.postsUpdated.next({
listing: [...this.posts],
postCount: transformedPostData.maxPosts
});
});
}
watching.component.ts
ngOnInit() {
this.userId = localStorage.getItem("userId: ");
// this.userId = this.authService.getUserId();
this.watchListService.getWatchListItems(this.userId);
this.postsSub = this.watchListService
.getPostUpdateListener()
.subscribe((postData: { listing: Watching[]; postCount: number }) => {
this.totalPosts = postData.postCount;
this.posts = postData.listing;
});
}
Upvotes: 0
Views: 1176
Reputation: 17898
You are sending the create as a route parameter in angular service.
So you need to modify your api like this:
app.get('/api/watchlist/:creater', (req, res, next) => {
Watching.find({ creator: req.params.creator })
.then(documents => {
console.log("Creator value: ", req.params.creator);
res.status(200).json({
message: 'User\'s watchlist items retrieved!',
watchlist: documents
});
});
});
And if you dont want to change the api, you should send the creator as a query param like this:
return this.http
.get<{ message: string; posts: any; maxPosts: number }>(
"http://localhost:3000/api/watchlist?creator=" + creator
)
After this, you must handle the response data in angular, and transform to your needs.
Can you update the question, by including this console.log result with this code? (as I know in the service you don't need to subscribe, you are subscribing in your component)
getWatchListItems(creator: string) {
return this.http("http://localhost:3000/api/watchlist?creator=" + creator)
.pipe(
map(retrievedData => {
console.log("retrievedData: ", retrievedData);
//todo: transform retrievedData
return retrievedData;
})
)
}
Don't forget your api returns the data in this format, so you should
{
"watchlist": ...
"message": ...
}
Upvotes: 1