Angular 2 - get datas from a json file

Question

How can I get my datas from a JSON in an angular 2 project? I tried (code below) but this doesn't work. Maybe I forgot some details... thanks a lot for an answer

Ps. I need to display on my html that "uno" included in json file.

app.component.ts:

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

    @Component({
        selector: 'app-header',
        templateUrl: '../partials/app.header.html',
        styleUrls: ['../css/partials/app.header.css']
    })
        export class AppComponent {
          title = 'app works!';
          data;
          constructor(private http:Http) {
                this.http.get('app/header.json')
               .subscribe(res => this.data = res.json());
          }
        }

app.module.ts:

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { FormsModule } from '@angular/forms';
    import { HttpModule } from '@angular/http';
    import { AppComponent } from './app.component';

    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule,
        FormsModule,
        HttpModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

app.header.html:

<header>
    {{title}}//this works
    {{elemento}}//here i want to show "uno" included in json file
    ...
</header>

header.json:

    {
        "elemento": "uno" 
    }

you should give preference to the answer posted first – Sajeetharan Jun 05 '17 at 09:15 — Sajeetharan, Jun 05 '17 at 09:15

Rahul Singh · Accepted Answer · 2017-06-05T09:01:40.233

1

just do this

{{data?.elemento}}

edited Jun 05 '17 at 09:01

answered Jun 05 '17 at 08:52

Rahul Singh

19,030
11
64
86

in my opinion there is no reason – Picci Jun 05 '17 at 08:55
1

@Jamil89 put a elvis operator and try updated answer – Rahul Singh Jun 05 '17 at 09:01
THANKS! Now it works...i needed to write "?" next to data. How i can find documentation about this particular to improve my knowledge? thanks – Jamil89 Jun 05 '17 at 09:04
1

until the `get` request is successful, `this.data` is undefined. So when you try to access `data.elemento`, the error occurs. More on `safe-navigation operator` https://stackoverflow.com/a/34911295/3082296 – adiga Jun 05 '17 at 09:08
just to add on it by @adiga any http call is an async call so it takes some time by the time the template is rendered the data is not yet back from http call.so we use the elvis operator for the same – Rahul Singh Jun 05 '17 at 09:34

Sajeetharan · Answer 2 · 2017-06-05T09:08:56.240

0

Just do,

<header>
    {{title}}
    {{data?.elemento}}
</header>

edited Jun 05 '17 at 09:08

answered Jun 05 '17 at 08:51

Sajeetharan

216,225
63
350
396

score 0 · Answer 3 · answered Jun 05 '17 at 09:17

get method should be returned so use RX js observable pattern just like this :http://davidpine.net/blog/angular-2-http/

   import { Component } from '@angular/core';
     import {Http} from '@angular/http';
     import * from rxjs;

    @Component({
        selector: 'app-header',
        templateUrl: '../partials/app.header.html',
        styleUrls: ['../css/partials/app.header.css'],
        providers:[]
    })
       
  export class AppComponent {
          title = 'app works!';
          data :any;
          constructor(private http:Http) {
                this.http.get('app/header.json')
               .subscribe(res => this.data = res.json())
                .map((res: Response) => <observable[]>response.json())            
                            .catch(this.handleError);
          }
        }

<header>
    {{title}}
    {{data?.elemento}}
</header>

Angular 2 - get datas from a json file

3 Answers3