How to read Angular2 json map object in angular2

Question

I am trying to fetch a json object in angular 2 which has key value pair.

That's not a lot of information. Please add some code that demonstrates what you try to accomplish and what you have tried and where you failed. How does the JSON look like? — Günter Zöchbauer, May 25 '16 at 06:13

Rahal Kanishka · Answer 1 · 2017-02-08T12:58:51.890

Your question is not very clear. But I will demonstrate some things as I understood from this question.

Here's a sample code (Assuming the value pair as username & password)

  let params:URLSearchParams = new URLSearchParams();
        params.set('username', username);
        params.set("password", password);
  return this.http.post(this.baseUrl + '/auth/credential', '', {search: params}).map((res:Response) => res.json());

I defined above method getUserDetails() as a Global service and I import it as the dataservice to my particular component which mentioned below,Assuming the server send the reply inside a array called results(cant say much about that with out looking at the back-end implementation of your project)

 this.dataService.getUserDetails().subscribe(
            (data) => {
                console.log('fetched userdata for edit', data.results)
                this.modify_users = data.results;
                console.log(data.results);
                console.log(this.modify_users);
            },
            (error) => {
                console.log('Failure viewUserDetails');
                alert('Error getting user Details to edit');
            });

So if I simply describe on what I'm doing here is,

(data) =>{}: to define what to do next when you receive any kind of Data from the server.
(error)=>{}: to define what to do next when the server replied withan error

I get a response from rest service API as {"1":"Health care","2":"Public services","3":"Government"} I am getting this in my service class getSectors():Observable{ return this.http.get("http://localhost:8080/getSectors") .map(res =>res.json()); } Now I am trying to fetch the json object from the keys — Vaibhav, May 25 '16 at 07:03
@Vabs see my Updated answer for response also with working demo — Pardeep Jain, May 25 '16 at 07:07
the in the (data)=> {} access the server response data as "data.results[n]" in a itearation and convert this to a String by using "data.results[n].toString()" and the you can separate the values by calling on split(":") method. Hope this helps! — Rahal Kanishka, May 25 '16 at 07:10

score 0 · Answer 2 · edited May 23 '17 at 12:25

you have to use http request to make get request like this :-

import {Injectable} from '@angular/core';
import {Http, Response, RequestOptions, Headers, Request, RequestMethod} from '@angular/http';

@Injectable()
export class GlobalService {
    constructor(public http: Http) { }

    MethodName(): any {
        return this.http.get('your_json_Path')
            .map(res=> res.json())
            .subscribe(res => {
                // your stuff here
            });
    }
}

Working Example of Response

How to read Angular2 json map object in angular2

2 Answers2