I'm trying to build a blog application using Angular on frontend with node, express in the backend and mongodb as database. Now I'm trying to make a component called blog-categories where there should be a method to iterate the whole database and search by the key category and return the values in the component such that all the category values are now shown in the component and when someone will click the values all blogs having such categories will get displayed. In case if you want to have a better look at the project you can check out my git repository https://github.com/tridibc2/blog-admin-mean . But it seems that the route is not able to catch the category. In the header it is going null. localhost:4000/api/v1/blogs/view/by/category/null The typical database looks somewhat like this:
{
"error": false,
"message": "All Blogs found Successfully",
"status": 200,
"data": [
{
"title": "Blog Title 2 Custom edited",
"description": "Blog description 2 Custom Edited",
"bodyHtml": "<h3>Heading of the body CUSTOM</h3><p>This is the first blog data getting uploaded n blog project</p>\nedited",
"views": 9,
"isPublished": true,
"category": "Comedy",
"author": "Decardo",
"tags": [
"english movies, action movies, comedy"
],
"blogId": "nbfO8hJp",
"created": "2020-01-04T23:33:38.000Z",
"lastModified": "2020-01-04T23:33:38.000Z"
},
{
"title": "Blog Title 2",
"description": "Blog description 2",
"bodyHtml": "",
"views": 1,
"isPublished": true,
"category": "tech",
"author": "Xtremator",
"tags": [
"english movies",
" action movies",
" comedy"
],
"blogId": "ZW8OR7vc",
"created": "2020-01-04T23:34:08.000Z",
"lastModified": "2020-01-04T23:34:08.000Z"
}
]
}
blog-category.component.ts
import { Component, OnInit } from '@angular/core';
import { BlogpostService } from '../blogpost.service';
import { Router, ActivatedRoute} from '@angular/router';
@Component({
selector: 'app-blog-category',
templateUrl: './blog-category.component.html',
styleUrls: ['./blog-category.component.css']
})
export class BlogCategoryComponent implements OnInit {
public categories;
constructor(private blogpostService: BlogpostService, private route: ActivatedRoute,
private router: Router) { }
ngOnInit() {
let myBlogcatrgory = this.route.snapshot.paramMap.get('category');
this.blogpostService.viewByCategory(myBlogcatrgory).subscribe(
data =>{
console.log(data);
this.categories = data["category"];
},
error =>{
console.log("some error occured");
console.log(error.errorMessage);
}
);
}
}
blog-category.component.html
<h3>Categories</h3>
<ul>
<li *ngFor="let category of categories">
{{category.name}}
</li>
</ul>
</div>
console.log(data);
appear in your console?data.data
or something. Have a good look at what's logged (ignore the error)