I'm struggling to figure out how to retrieve a single blog post by its ID, especially since I am new to this.
Currently, my main blog application has an ng-repeat functionality that fetches all posts. What I really want is the ability to click on a post's name and have only that specific post displayed, without any distractions — eventually, I aim to incorporate options for editing and deleting based on the post's ID.
I am aware of the existence of filters, but I am uncertain about enabling a filter through clicking or ensuring that it accurately filters by the _id when clicked.
The code snippet in 'post.html' appears as follows -
<div ng-controller="PostController" class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<strong>
<a href ng-click="selectTab('viewPost')">{{post.title}}</a>
</strong> created on {{post.time | date: 'MM/dd/yy @ h:mma'}}
</h3>
</div>
<div class="panel-body">
{{post.body}} <br>
{{post._id}}
</div>
</div>
For now, the ng-click directive is set up to display this-
<div ng-show="isSelected('viewPost')">
<view-post></view-post>
</div>
This corresponds to a custom directive linked with this file --
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<strong>
<a href>{{postById.title}}</a>
</strong> created on {{postById.time | date: 'MM/dd/yy @ h:mma'}}
</h3>
</div>
<div class="panel-body">
{{postById.body}}
</div>
</div>
However, when this template is displayed, the expressions seem to be missing entirely.
There is a getPost function in my controller 'PostController,' but I am unsure how to utilize it.
$scope.getPost = function () {
$http({method: 'GET', url: '/api/blog/:post_id', data: $scope.postById})
.then(function(response){
//your code in case the post succeeds
console.log(response);
})
.catch(function(err){
//your code in case your post fails
console.log(err);
});
}
The API functions correctly using Postman, allowing me to retrieve/update/delete posts on that route. Currently, I do not have any specific routes set up in the address bar — everything revolves around custom directives displaying the desired templates upon clicking.
I suspect it might be a problem related to the scope of my controllers.
A segment of my HTML could provide more clarity--
<body ng-controller="PanelController">
<div class="site-wrapper">
<div class="site-wrapper-inner">
<div class="cover-container">
<div class="masthead clearfix">
<div class="inner">
<nav-bar></nav-bar>
</div>
<div ng-controller="PostController">
<div ng-show="isSelected('blog')">
<div ng-repeat="post in posts | orderBy: 'time':true">
<blog-post></blog-post>
</div>
</div>
<div ng-show="isSelected('about')">
<about-page></about-page>
</div>
<div ng-show="isSelected('contact')">
<contact></contact>
</div>
<div ng-show="isSelected('createPost')">
<create-post></create-post>
</div>
<div ng-show="isSelected('viewPost')">
<view-post></view-post>
</div>
</div>
</div>
Hoping this information resonates with someone who can assist. Any guidance would be highly appreciated.
UPDATE: To offer additional context, here is the API endpoint for retrieving posts by ID -
router.route('/blog/:post_id')
.get(function(req, res) {
Post.findById(req.params.post_id, function(err, post) {
if (err) {
res.send(err);
} else {
res.json(post);
}
});
})
.put(function(req, res) {
Post.findById(req.params.post_id, function(err, post) {
if (err) {
res.send(err);
} else {
post.title = req.body.title;
post.body = req.body.body;
}
post.save(function(err) {
if (err) {
res.send(err);
} else {
res.json({ message: 'Post updated!' });
}
});
});
})
.delete(function(req, res) {
Post.remove({
_id: req.params.post_id
}, function(err, post) {
if (err) {
res.send(err);
} else {
res.json({ message: 'Successfully deleted' });
}
});
});