0

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>
6
  • So what's the issue :)? Any error? Commented Jan 8, 2020 at 15:02
  • 1
    does the console.log(data); appear in your console? Commented Jan 8, 2020 at 15:04
  • it's showing "Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays." Commented Jan 8, 2020 at 15:08
  • to add to @PierreDuc if you can show the data from console.log(data), that will help. I suspect your data is not an array, and you may need to do something like this.categories = data.categories
    – Farasi78
    Commented Jan 8, 2020 at 15:19
  • 1
    Then data is not the data you expect yet, it's probably data.data or something. Have a good look at what's logged (ignore the error) Commented Jan 8, 2020 at 15:19

0

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.