angular2 read json file using http

Question

trying to read json file from my local project for some basic config.

code:

myM: any;

constructor(private http: Http) {
     this.http.get('config.json')
        .map((res: Response) => res.json())
        .subscribe(res => {
            this.parseHeaderJSON(res);
        });
}
parseHeaderJSON(res) {
    this.myM = res;
}

HTML:

<li><a href="{{myM.home_header.whatis.link_url}}" class="ripple-effect">{{myM.home_header.whatis.link_name}}</a></li>

but it always logs on console as undefined..

if I place console.dir(res) instead of value assign then it prints my object data but don't know why it does not assign to variable !!!

can anyone tell me where am I wrong ?

UPDATE

json file content:

{
  "home_header": 
  {   
  "servicesweoffer":
      {
        "lable_name":"SERVICES WE OFFER",
        "link_url":""        
      },
  "pricing":
      {
        "lable_name":"PRICING",
        "link_url":""
      },      
  "contacutus":
      {
        "lable_name":"CONTACT US",
        "link_url":""
      }
  }
}

eko · Accepted Answer · 2016-12-12 12:27:26Z

1

console.dir(this.myM) will print undefined because

this.http.get('config.json')
    .map((res: Response) => res.json())
    .subscribe(res => this.myM = res);

is an async operation. Meaning http.get will return you something after a time (depending on network speed and other stuff) and you can do something with this response inside the http callback which is inside subscribe.

That is why if you place console.dir(res) inside the callback it prints the value. So when you are assigning this.myM = res; you are not doing anything wrong, it just takes a little time to do this operation.

Example:

constructor(private http: Http) {
    this.http.get('config.json')
        .map((res: Response) => res.json())
        .subscribe((res) => {
             //do your operations with the response here
             this.myM = res;
             this.someRandomFunction(res);  
        );
}

someRandomFunction(res){
    console.dir(res);
}

<li><a href="{{myM?.home_header?.whatis?.link_url}}" class="ripple-effect">{{myM?.home_header?.whatis?.link_name}}</a></li>

edited Dec 12, 2016 at 12:27

answered Dec 12, 2016 at 6:14

eko

40.8k11 gold badges79 silver badges104 bronze badges

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

13 Comments

Java Curious ღ Over a year ago

still it's undefined.. I have tried to print myM in ngOnInit as well but though also not getting it.

eko Over a year ago

@JavaCuriousღ ngOnInit executes little after the constructor. If you want to do an operation with this response, you have to do it inside the callback.

eko Over a year ago

@JavaCuriousღ Where do you want to read the values? Show me a use case.

Java Curious ღ Over a year ago

I want to make all this read json file and all using service.. so I just have to call it's function that readHeader so it will give me it's values.. I will add further config and error data text inside my json so everything will be there in json gradually. so for to read and json and process content I want to have a service..

eko Over a year ago

@JavaCuriousღ then call the services functions inside the http.get callback?

|

anshuVersatile · Accepted Answer · 2016-12-12 06:13:31Z

0

Scope of this not working in subscribe

myM: any;

constructor(private http: Http) {
    let _self = this;
     this.http.get('config.json')
     .map((res: Response) => res.json())
     .subscribe(
        res => _self.myM = res
     );
        console.dir(this.myM);
}

answered Dec 12, 2016 at 6:13

anshuVersatile

2,0761 gold badge11 silver badges18 bronze badges

2 Comments

Java Curious ღ Over a year ago

still it's undefined.

J J B Over a year ago

@anshuVersatile You can use this inside the function because it's an ES6 Arrow Function which is non-binding of this.

Collectives™ on Stack Overflow

angular2 read json file using http

2 Answers 2

13 Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

13 Comments

2 Comments

Linked

Related