CODEWITHSUNDEEP
jsonangulartypescript
Tonyukuk
Tonyukuk

Reputation: 6215

how to get component of JSON String which returns by webservice request

I am using angular2 typeScript to get json returned from webservice.I can get the value from WebService by calling get but I can not get component of JSON.For instance I want to get status of the returned JSON. I can get whole JSON but not the exact status of JSON. You can see the sample code and the JSON that returned by webservice below.

Regards Alper

Sample Code :

this.http.get(this.webServiceUrlGet)
  .subscribe(
    function (data) {
      this.tradeShows = JSON.stringify(data);
      console.log(this.tradeShows);

    },
    error => this.errorMessage = <any>error);

    JSON : 
   "_body":"{\n  \"args\": {}, \n  \"headers\": {\n    \"Accept\":      \"application/json, text/plain, */*\", \n    \"Accept-Encoding\": \"gzip, deflate, sdch, br\", \n    \"Accept-Language\": \"tr-TR,tr;q=0.8,en-US;q=0.6,en;q=0.4\", \n    \"Connect-Time\": \"0\", \n    \"Connection\": \"close\", \n    \"Host\": \"httpbin.org\", \n    \"Origin\": \"http://localhost:3000\", \n    \"Referer\": \"http://localhost:3000/navigation\", \n    \"Total-Route-Time\": \"0\", \n    \"User-Agent\": \"Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Mobile Safari/537.36\", \n    \"Via\": \"1.1 vegur\", \n    \"X-Request-Id\": \"db6c93bd-99dd-4410-a709-5bc2dd4150fb\"\n  }, \n  \"origin\": \"212.175.18.38\", \n  \"url\": \"https://httpbin.org/get\"\n}\n","status":200,"ok":true,"statusText":"OK","headers":{"Content-Type":["application/json"]},"type":2,"url":"https://httpbin.org/get"}

Upvotes: 0

Views: 202

Answers (3)

n00dl3
n00dl3

Reputation: 21584

If you want to get the status AND the json you can do this :

this.http.get(this.webServiceUrlGet)
  .map(resp=>[resp.status,resp.json()])
  .subscribe(([status,data]) => {
      this.tradeShows = data;
      this.status = status;
      console.log(this.tradeShows,this.status);
    },
    error => this.errorMessage = <any>error);

you need to call resp.json() because what is sent by the Http service is a Response object

Upvotes: 1

Jesse Carter
Jesse Carter

Reputation: 21207

Just do this:

this.tradeShows = data.json();

The object you get back from an HTTP call when you subscribe is a Response object which has information about all aspects of the HTTP call including headers, body, etc. The json() method automatically takes the body field and turns it into an object you can use.

By the way, JSON.stringify() takes an object and converts it into a string. If you were going to do manual JSON parsing you would need to use JSON.parse().

If you want to get the HTTP status code sent back you can access that on the status property of the response: data.status

Upvotes: 1

Venkateswaran R
Venkateswaran R

Reputation: 478

While using typescript you need map the value and subscribe it in component page for example

Service call to api

import { Http, Response, Headers, RequestOptions, URLSearchParams } from "@angular/http";
constructor(
        private authHttp: Http) {}
let url= `this.webServiceUrlGet`;
      let params = new URLSearchParams;
      params.append('id', id);
     return this.authHttp.post( url,  { headers:headers,  search:params })
    .map( res =>  res.json());

Component

this.service.get(this.id)
                .subscribe(
                res => this.item= res,
                error => this.errorMessage = error
                );

Upvotes: -1

Related Questions