Trouble with Observable and http json Angular

Question

I have a problem because I never draw the variable "datos" in the * nFor, I think the problem is in the render, for this reason implements "Observable", however it still does not work

Thanks for help!

"header-menu.component.ts"

import { Component, Input, OnInit, ChangeDetectionStrategy } from '@angular/core';
    import { Http } from '@angular/http';
    import 'rxjs/add/operator/map';
    import 'rxjs/add/operator/catch';
    import { Observable } from 'rxjs/Observable';

    @Component({
        moduleId: module.id,
        selector: 'as-headermenu',
        templateUrl: 'header-menu.html',
        changeDetection: ChangeDetectionStrategy.OnPush
    })

    export class HeaderMenuComponent implements OnInit {
    datos = []; // Aqui se carga el json
    private ruta = 'assets/json_header_menu.json';  

    constructor(private http: Http) {}

    ngOnInit() {
         this.loadJson().subscribe(
                    vdatos => this.datos = vdatos,
                    err => console.log(err),
        () => console.log(this.datos));
        console.log(this.datos);
    }

loadJson(): Observable<any[]> {
          return this.http.get(this.ruta)
            .map(res => res.json());
}
}

"header-menu.html"

<ul *ngIf="datos"> <li *ngFor="let dato of datos | async; let i =
index"> {{ dato.url }} {{ dato.icono }} {{ dato.titulo }} {{ i }} 
</li>

"header-menu-module.ts"

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';

import { HeaderMenuComponent } from './index';

@NgModule({
    declarations: [
        HeaderMenuComponent
    ],
    imports: [
        RouterModule,
        BrowserModule,
        HttpModule
    ],
    exports: [
        HeaderMenuComponent
    ]
})
export class HeaderMenuModule {
}

Image Console error:Console Error

As addition, that you should indeed remove the async pipe (or don't use subscribe) Seems from your error message where you have console logged your response (I assume) and it shows [ ] so it would be empty? — AVJT82
– AVJT82, Commented Jun 23, 2017 at 15:40

Sajeetharan · Accepted Answer · 2017-06-23 15:18:08Z

1

You don't need the async pipe here, it should work without it,

<ul *ngIf="datos"> <li *ngFor="let dato of datos; let i =
index"> {{ dato.url }} {{ dato.icono }} {{ dato.titulo }} {{ i }} 
</li>

answered Jun 23, 2017 at 15:18

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sajeetharan Over a year ago

just use ngOnInit() { this.datos = this.loadJson(); }

Pankaj Parkar · Accepted Answer · 2017-06-23 15:24:25Z

1

| async pipe does help to unwrap your data from Observable stream. So to make your code work you should assign observable to datos variable.

ngOnInit() {
    this.datos = this.loadJson();
}

answered Jun 23, 2017 at 15:24

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

2 Comments

Santiago Matiz Over a year ago

When i change datos to: datos: Observable<any[]>; and assign this.datos = this.loadJson().subscribe( vdatos => this.datos = vdatos, err => console.log(err), () => console.log(this.datos)); <br> I get the error : Type 'Subscription' is not assignable to type 'Observable<any[]> please help Mr. Pankaj Parkar

Pankaj Parkar Over a year ago

@SantiagoMatiz check my answer.. It should not have part after .subscribe.. ngOnInit will only have this.datos = this.loadJson();

Santiago Matiz · Accepted Answer · 2017-06-24 12:28:06Z

0

I fix it removing the line of code "changeDetection"

 @Component({
        moduleId: module.id,
        selector: 'as-headermenu',
        templateUrl: 'header-menu.html',
        /*changeDetection: ChangeDetectionStrategy.OnPush*/
    })

thanks

answered Jun 24, 2017 at 12:28

Santiago Matiz

311 silver badge6 bronze badges

Collectives™ on Stack Overflow

Trouble with Observable and http json Angular

3 Answers 3

1 Comment

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Related