Problem when I try to display a json (array into an object ) in angular 2

Question

Im try to create a simple page and I have this problem when I I try to show my json file in my component.html

This is the json file.

{
  "example": {
    "cat": [
      {
        "title": "title 1",
        "href": "#cat0"
      },
      {
        "title": "title 1",
        "href": "#cat1"
      },
      {
        "title": "title 1",
        "href": "#cat1"
      },
      {
        "title": "title 1",
        "href": "#cat1"
      },
      {
        "title": "title 1",
        "href": "#cat1"
      }
    ]
  }
}

This is the Interface.

export interface menuExample {
    example?:{
        cat?:{
            title: string,
            href: string
        }
    }
}

This is the Service.

export class serviceMenu {

    info: menuExample= {};
    cargada = false;
    team: any[] = [];

    constructor( private http: HttpClient) { 

      this.loadMenu();

    }


    private loadMenu() {

      this.http.get('assets/json/file.json')
      .subscribe( (resp: any[]) => {

        this.cargada = true;
        this.team = resp;

      });  
    }
  }

And this is the html file

<li *ngFor="let menudetails of serviceMenu.info.example?.cat" class="side-nav__item">
 <a href="{{menudetails.href}}" class="side-nav__link">
    <span>{{menudetails.title}}</span>
 </a>
</li>

Then I import my file and I did all but I don't understand the mistake :S

ERROR Error: StaticInjectorError(AppModule)[HeaderComponent -> serviceMenu ]: StaticInjectorError(Platform: core)[HeaderComponent -> serviceMenu ]: NullInjectorError: No provider for serviceMenu !

Only I try to show my json with an NgFor and show the title and href, nothing else. Someone could help me or provide a better and easy solution? Thanks a lot!

Estefa

have you include provider in `AppModule` for `serviceMenu `? — Abhishek, Apr 16 '19 at 05:52

score 0 · Answer 1 · answered Apr 16 '19 at 05:57

0

You need add @Injectable() in serviceMenu class and add providers: [ serviceMenu ] in AppModule class

answered Apr 16 '19 at 05:57

Hien Nguyen

24,551
7
52
62

Thanks Hien, I fixed one part with your solution! @Injectable() :D – Estefa77 Apr 17 '19 at 04:57

score 0 · Answer 2 · answered Apr 16 '19 at 06:00

0

you need to add your service in your appmodule or in your component

import {serviceMenu} from '<your service path>'
@Component({
    selector: 'componentName',
    templateUrl: './componentName.html',
    providers: [serviceMenu]
})

or you can also add your service in providers section in appmodule.ts

import {serviceMenu} from '<your service path>'
providers: [serviceMenu]

answered Apr 16 '19 at 06:00

Yash Rami

2,276
1
10
16

Thanks a lot Yash I fix one part with your solution, i'm very beginner with angular :D – Estefa77 Apr 17 '19 at 04:59
it would be great if you accept my answer :) :) – Yash Rami Apr 17 '19 at 04:59
this was my first question, I don't have permission for do this for the moment :P only I have 4 points – Estefa77 Apr 18 '19 at 04:43

score 0 · Answer 3 · answered Apr 16 '19 at 06:00

0

Error look like you have missed providers in AppModule. you need to add service in AppModule

@NgModule({
declarations: [];
imports: [];
providers: [ serviceMenu ]  // like this
})

answered Apr 16 '19 at 06:00

Abhishek

1,742
2
14
25

@Estefa77 its my pleasure to help you – Abhishek Apr 17 '19 at 05:01

Problem when I try to display a json (array into an object ) in angular 2

3 Answers3