Async data handling in Angular

Question

I'm trying to load a local JSON into my component, but I can't get the values from my service into my component. I can see the json data in the service but it is undefined in my component. Does anybody see what i'm doing wrong here ? Thanks.

Here is an SS of the console.log in both service and component

interfaces.json

{
  "interfaces": {
    "eth" : {"name" : "eth"},
    "lte" : {"name" : "lte"},
    "wlc" : {"name" : "wlc"},
    "wlap" : {"name" : "wlap"}
  }
}

interfaces.service.ts

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

@Injectable()
export class Interfaces {

  constructor(public http: Http) {};

  public getData() {
    return this.http.get('/assets/interfaces.json')
    .map((res) => {res.json(); console.log(res); });
  };
}

interfaces.component.ts

import { Component, OnInit } from '@angular/core';
import { Interfaces } from './interfaces.service';
import { Observable } from 'rxjs/Rx';

@Component({
  selector: 'interfaces',
  providers: [
    Interfaces
  ],
  template: `
    <ul *dropdownMenu class="dropdown-menu" role="menu">
      <li *ngFor="let interface of interfaces | async" role="menuitem">
        <a [routerLink]=" ['./interfaces/eth'] "routerLinkActive="active"
        [routerLinkActiveOptions]= "{exact: true}" class="dropdown-item" href="#">
        {{interface.name}}Main Ethernet
        </a>
      </li>
    </ul>
  `,
})

export class InterfacesComponent implements OnInit {

  constructor(public interfaces: Interfaces) {}

  public ngOnInit() {
    this.interfaces.getData().subscribe((data) => { this.data = data; console.log(data); });

  }
}

eko · Accepted Answer · 2017-04-11 12:01:30Z

5

The reason that it's undefined is that you are not returning your response inside the map not that map is not working..

.map((res) => {console.log(res); return res.json(); }); // missing return here

or without brackets:

.map((res) => res.json());

answered Apr 11, 2017 at 12:01

eko

40.8k11 gold badges79 silver badges104 bronze badges

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

Comments

Mansi Parekh · Accepted Answer · 2017-04-11 11:51:16Z

1

I don't know what is wrong as I'm new to angular2, but this works for me.

interfaces.service.ts

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

@Injectable()
export class Interfaces {

  constructor(public http: Http) {};

  public getData() {
    return this.http.get('/assets/interfaces.json');
  }
}

interfaces.component.ts

import { Component, OnInit } from '@angular/core';
import { Interfaces } from './interfaces.service';
import { Observable } from 'rxjs/Rx';

export class InterfacesComponent implements OnInit {

  constructor(public interfaces: Interfaces) {}

  public ngOnInit() {
    this.interfaces.getData().subscribe((data) => {
          this.data = data;
          console.log(data);
    });
  }
}

answered Apr 11, 2017 at 11:51

Mansi Parekh

5192 silver badges13 bronze badges

1 Comment

LordStryker Over a year ago

Hey! You're right, without the .map() it works. I guess I have to use it just once in either the component or the service, otherwise it will mess up the data...Thank you for the quick response !

Collectives™ on Stack Overflow

Async data handling in Angular

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related