title: Nativescript application-settings to persist a JSON value
body: <p>I'm new to nativescript and angular 2 development. Currently, in the application that i'm building, HTTP post returns a JSON object like </p>
  
  <pre><code>    [
    {
      "firstname": "test",
      "isauth": true,
      "lastname": "client",
      "roleid": 10,
      "rolename": "",
      "userid": 3507,
      "username": ""
    }
  ]
  </code></pre>
  
  <p>I'm required to somehow save the userid (returned by Backendservice.apiUrl) value from the above response in login.component.ts and use that to pass to another API (Backendservice.requesturl ) that I'll be calling from another component(invoked  clientmaster.component.ts). How do I do this on {N} + angular2.</p>
  
  <p>Can I use applicationsettings setstring to persist the userid value and use it when I make the next call?If that's possible how do I parse the JSON response from the observable and save the userid value ? </p>
  
  <p>I know that I can use flatmap to make chained http requests. But I'm not quite sure about how to do it and i'm very new to angular 2 development and RxJs observable concepts. </p>
  
  <p>Here's my code:
  <strong>login.service.ts</strong></p>
  
  <pre><code>login(user: User) {
      let headers = new Headers();
      //In the headers object, the Content-Type specifies that the body represents JSON.
      headers.append("Content-Type", "application/json");
      let urlSearchParams = new URLSearchParams();
      urlSearchParams.append('username', user.username);
      urlSearchParams.append('pwd', user.password);
      let body = urlSearchParams.toString();
      console.log("body"+body);
  
      return this.http.post(
       BackendService.apiUrl,
       body,
      {headers: headers })
      .map((response ) =&gt; { 
                  response.json();
                  // login successful if there's a jwt token in the response
                  console.log("RESPONSE: "+response.url);    
                  console.log("response json "+response.status);
                  var body = response.json();
                  console.log("JSON BODY: ",JSON.stringify(body));
  
                }
                  )
  
  
      .catch(this.handleErrors);
    }
  
  getAssociatedRequest(){
  let headers = new Headers();
      //call made to the next URL
      return this.http.get(
       BackendService.requestUrl
    )
      .map((response: Response) =&gt; { 
                  // login successful if there's a jwt token in the response
                  console.log("RESPONSE: ",response);
                  var body = response.json();
                  console.log("JSON BODY: ",JSON.stringify(body));
                 alert(JSON.stringify(body));}
                  )
  
      .catch(this.handleErrors);
    }
  
    logoff() {
      BackendService.token = "";
    }
  
  
  
    handleErrors(error: Response) {
      console.log(JSON.stringify(error.json()));
      return Observable.throw(error);
    }
  }
  </code></pre>
  
  <p><strong>login.component.ts</strong></p>
  
  <pre><code>import { Component, ElementRef, OnInit, ViewChild } from "@angular/core";
  .....
  .....
  
  
  @Component({
    selector: "vp-login",
    moduleId: module.id,
    providers: [LoginService],
    templateUrl: "./login.component.html",
    styleUrls: ["./login.component.css", "./login.css"],
  })
  
  
  
  export class LoginComponent implements OnInit {
    user: User;
    isAuthenticating = false;
  
    constructor(private router: Router,
      private loginService : LoginService,
      private page: Page) {
      this.user = new User();
    }
  
     ngOnInit() {
      this.page.actionBarHidden = true;
    }
  
  
    login() {
  
        if (getConnectionType() === connectionType.none) {
          alert("Vessel-Pro requires an internet connection to log in.");
          return;
           }
  
       try {
        this.loginService.login(this.user)
        .subscribe(
  
          () =&gt; {
  
             this.isAuthenticating = false;
             this.router.navigate(["/clientMaster"]);
           },
          (error) =&gt; {
            alert("Unfortunately we could not find your account.");
            this.isAuthenticating = false;
  
          }
  
  
      );
  
      } catch (error) {
        console.log(error.message);
      }
     }
  }
  </code></pre>
  
  <p><strong>clientmaster.component.ts</strong></p>
  
  <pre><code>import { Component, ElementRef, OnInit, ViewChild } from "@angular/core";
  import { alert, LoginService, User } from "../shared";
  ...
  
  
  @Component({
    selector: "clientMaster",
    moduleId: module.id,
    templateUrl: './clientmaster.component.html',
    styleUrls: ["./clientmaster.component.css"],
    providers: [LoginService]
  })
   export class ClientMasterComponent implements OnInit{
  
    isLoading = false;
  
     constructor(private router: Router,
     private LoginService: LoginService,
     private page: Page) {}
  
     ngOnInit(){
       this.page.actionBarHidden = true;
     }
  
  
  
  /**
   * gotoSRTPage
   */
  public gotoSRTPage() {
    this.router.navigate(["srtDetails"])
  }
  loadsrt(){
   // alert("OK");
      if (getConnectionType() === connectionType.none) {
          alert("Oops!! looks like your device is not connected to the internet ");
          return;
        }
  
          this.LoginService.getAssociatedRequest()
          .subscribe(
            (response) =&gt; { 
          console.log("Success Response" + response)
  
          },
  
          (error) =&gt; { console.log("Error happened", error.message)},
          () =&gt; { console.log("srt is completed")
         }
      );
  </code></pre>