getting json data into an array angular2

Question

I am not sure what i am missing from my code but currently i am not presented with any errors when i run it but i am also not seeing the results that i am expecting. I have a json file that i am loading into an array and would like to loop through that array and display parts of its data onto the page.

Here is what i have so far:

Service file

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

@Injectable()

export class AddressDataService{
    addressData: Array<any>;

    constructor(private http:Http){ }
    getAddressData(){
        return this.http.get('./api/addressData.json')
                 .map((res:Response) => res.json());
    }
}

JSON File

[{
    "type": "home",
    "id": 1
}, {
    "type": "apartment",
    "id": 2
}, {
    "type": "homeless",
    "id": 3
}]

Component File

import { Http } from '@angular/http';
import { AddressDataService } from './address.service';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';

@Component({
  selector: 'my-app',
  templateUrl: '....',
  styleUrls: ['./styles.css'],
  providers: [AddressDataService]
})

constructor(private addressDataService: AddressDataService) {}
  addressData = [];
  getAddressData() {
  this.addressDataService.getAddressData()
                   .subscribe(data => this.addressData = data);
}

HTML File

<div *ngFor="let addressDetail of addressData">
    {{addressDetail.type}}
</div>

Am i doing this the right way?

@ExplosionPills now that you brought it to my attention i actually don't see that i do call getAddressData in my component - would i do that in oninit function that i will have to create? — bluePearl
– bluePearl, Commented Mar 28, 2017 at 18:50

AVJT82 · Accepted Answer · 2017-03-28 18:52:43Z

3

You need to call your getAddressData for example in your OnInit, I assume you want to fetch the data when navigated to page.

So:

ngOnInit() {
  this.getAddressData();
}

When this is handled, you will face another issue. Http-requests don't allow relative paths, so

return this.http.get('./api/addressData.json')

will cause an error, you need to replace the dot in your "url" with the actual complete path for the json file, starting from the top level folder.

answered Mar 28, 2017 at 18:52

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

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

4 Comments

bluePearl Over a year ago

Thanks - but i wanted to ask about the actual complete path: i have tried the following but i get a 404 for the file: './src/api/addressData.json' and the full path is /Users/userName/Projects/Angular2/quickstart/src/api/addressData

AVJT82 Over a year ago

Then you should use it like: return this.http.get('src/api/addressData.json') So you were almost correct, just remove the dot :)

bluePearl Over a year ago

Thanks! - i also used http://myjson.com/ and worked nicely for storing my json.

AVJT82 Over a year ago

Great! Glad to hear :)

Akash Agrawal · Accepted Answer · 2017-03-28 18:44:34Z

0

In your component file:

.subscribe(
      data => {
        const helperArray = [];
        for (let key in data) {
          helperArray.push(data[key]);
        }
      }
);

answered Mar 28, 2017 at 18:44

Akash Agrawal

2,2991 gold badge21 silver badges41 bronze badges

Comments

DeborahK · Accepted Answer · 2017-03-28 18:55:14Z

0

Something in your component class needs to call your getAddressData method. Either the constructor, or a better option is to implement OnInit and call it from there.

answered Mar 28, 2017 at 18:55

DeborahK

60.9k12 gold badges115 silver badges135 bronze badges

Collectives™ on Stack Overflow

getting json data into an array angular2

3 Answers 3

4 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Related