Get data from json file in Angular 2

Question

I have a json file and I'm trying to put this information in my project with a service in Angular 2. Here is my code:

That is my service:

import { Injectable } from '@angular/core';
import { Http, Response} from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class RecordsService {

data: any;

  constructor(private http: Http) { }

  getRecords(id) {
 return this.http.get('../assets/data/03_data.json')
      .map(data => {
        this.data = data;
      }, err => {
        if (err) {
          return err.json();
        }
      });
  }

}

That is the component:

import { Component, OnInit } from '@angular/core';
import { RecordsService } from '../shared/services/records.service';

@Component({
  selector: 'app-content',
  templateUrl: './content.component.html',
  styleUrls: ['./content.component.css'],
  providers: [RecordsService]
})
export class ContentComponent implements OnInit {

  constructor(private recService: RecordsService) { }

  ngOnInit() {
  }

  getRecords(id) {
    this.recService.getRecords(id)
      .subscribe(data => {
      console.log(data);
      }, err => {
        console.log(err);
      });
  }

}

Can someone help me what I did wrong. Thanks!

AVJT82 · Accepted Answer · 2017-07-15 10:59:20Z

2

You are not calling getRecords() anywhere so it will not be fired at all. We found out that the id wasn't supposed to be a parameter in getRecords() at all. So call the method in OnInit:

ngOnInit() {
   this.getRecords();
}

also you need to return the actual json from the response, i.e .json() so do:

.map(data => {
   this.data = data.json();
   return data.json();
}

edited Jul 15, 2017 at 10:59

answered Jul 15, 2017 at 10:28

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

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

Comments

eko · Accepted Answer · 2017-07-15 08:14:46Z

1

You need to return something from your map statement:

.map(data => {
        this.data = data;
        return data;
      }

answered Jul 15, 2017 at 8:14

eko

40.8k11 gold badges79 silver badges104 bronze badges

11 Comments

vesselin ivanov Over a year ago

I haven't nothing in the console again. :(

AVJT82 Over a year ago

probably should be data.json() ;)

eko Over a year ago

@vesselinivanov when you check your network tab in developer tools, do you see the response?

vesselin ivanov Over a year ago

@echonax nope I didn't see a response for my service.

vesselin ivanov Over a year ago

@AJT_82 I called getRecord() in my component: this.recService.getRecords(id)

|

Collectives™ on Stack Overflow

Get data from json file in Angular 2

2 Answers 2

Comments

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related