Nsryjdtyk

For my first Angular 6 project, I retrieve a json from this URL : http://localhost:8080/app/categories
it looks like this :

[

  {

    "id": 1,

    "name": "name1",

    "imagepath": "/images/im1.png",

    ...

    "childCategory": [

      {

        "id": 5,

        "name": "name5",

        "imagepath": "/images/im5.png",

        "childCategory": [



        ]

      },

      {

        "id": 6,

        "name": "name6",

        "imagepath": "",

        "childCategory": [



        ]

      }

      ...

    }

]

In Angular I created an interface with the fields of my json

export interface ICategory {

  url : string;

  id: number;

  name: string;

  imagepath: string;

  createdat: Date;

  updatedat: Date;

}

And a class with its constructor that implements the interface :

import {ICategory} from "../intefaces/ICategory";



export class Category implements ICategory{

    constructor(private _url: string, private _id: number, private  _name: string, private _imagepath: string, private _createdat: Date, private  _updatedat: Date) {

}

I also had to create a service :

import { Injectable } from '@angular/core';

import {HttpClient} from "@angular/common/http";

import {Category} from "../../Class/Category";



@Injectable({

  providedIn: 'root'

})

export class CategoriesService {

  url: string = "http://localhost:8080/app/categories";



  constructor(private http: HttpClient) { }



  getAll(): any {

    return this.http.get<Array<Category>>(this.url);

}

I also add the service to the app.module.ts

providers: [CategoriesService],

then in my component I finally inject my service :

import { Component, OnInit } from '@angular/core';

import {Category} from "../../Class/Category";

import {CategoriesService} from "../../services/http/categories.service";



@Component({

  selector: 'app-header',

  templateUrl: './header.component.html',

  styleUrls: ['./header.component.css']

})

export class HeaderComponent implements OnInit {



    categories:Array<Category> = new Array<Category>();



    constructor(private categoryService:CategoriesService) {

    //  this.categoryService.getAll()

    //      .subscribe(res =>

    //          {

    //              this.categories = res;

    //          });

    this.categories = this.categoryService.getAll();

  }

  ngOnInit() { }

}

In my view I use a *ngFor :

My list 

<span *ngFor="let category of categories">

  {{ category}}

</span>

I have 2 issues :

1. I don't have anything displayed at all ...


2. how could i display the categories witch childCategory is not empty and display their childCategory ?

Thanks for your help

Comment : I changed the date onto number and i add childCategory: any
Now i can see [Object Object]. I just had to change my view by adding the element i needed to display : {{ category.name }}