JSON Parsing in .TS modules

Ionic Framework ionic-v3
1

What I need ?

Read the return codes from REST API Response and show a success or failure message on template

Problem
Unable to read the return codes returned in JSON format
Sample response

image
image.png1366×768 90.3 KB

Code

module.ts file
addKYC(){

this.movieService.addKYCService().subscribe(
data => {
this.movies = data.results;

				console.log(data);
			},
			err => {
				console.log(err);
			},
			() => console.log('Movie Search Complete')
		);

}

Service.ts

addKYCService() {

   var url = 'https://kycdetails.mybluemix.net/banking/icicibank/addKYC?client_id=??&cust_id=987654321&token=??&KYC_type=age_Proof&Document_type=passport&Document_number=1234999a&Name_on_document=gokul1&Expirydate_on_document=29-08-1992'

    var response = this.http.get(url).map(res => res.json());
	return response;
}

Anyone …please help !!!

2

instead of res.json() try using
JSON.parse(res.text());
That is what I use in my code and am able to read the JSON

3

I think this is silly. The json() method does that behind the scenes, with some extra optimizations. Do you really have an example where JSON.parse(res.text()) works and res.json() doesn’t?

4

Agree, the various blogs I have visited says the same but all the examples I have seen have a structure in JSON that is structured .

Please refer the screen shot the JSON structure ({code:200 },{account : xxxx , balance : yyy})

image
image.png1366×768 153 KB

I want to first read the code ,if code is 200 then show the balance on html

5

No, I don’t do screenshots of textual data. You have the data that is coming back from the API. Use JSON.stringify if necessary, but post it as text.

6

here is the data returned by API

For Success
[{“code”:200}, {“Name on Document”:“gokul”,“Document Number”:“1234999a”,“Document Type”:“PASSPORT”,“KYC Type”:“AGE_PROOF”,“Expirydate on document”:“29-08-1992”}]

For failure
[{“code”:503,“description”:“Document Details does not exist”,“message”:“No Data Found”}]

Service Layer
checkKYCService() {

    var url ='https://api.....'
   var response = this.http.get(url).map(res => res.json());
 		return response;
}

Component

addKYC(){

//this.navCtrl.push(Page2);
this.Servicemodule.addKYCService().subscribe(
data => {
this.movies = data.results;

				console.log(data);
      
			},
			err => {
				console.log(err);
			},
			() => console.log('call complete')
		);

need to access data to code something like show document name on template
let result = movies
if result.code == 200 then code>>
}

objective

read the status code , set some variables and show the values on template

7

This appears to be a naked array (which is a bad idea for security purposes), but so if you call res.json() you should get a one-element array so res.json()[0].code should be what you are looking for.

8

thanks for your response shall i change the code in the service layer or component ( where i am calling the service ).

I am assuming that i should access the code in component layer
movies : Array

addKYC(){
this.movieService.checkKYCService().subscribe(
data => {
this.movies = data.results;
returnedcode = this.movies[0].code ? , plus how i can bind other elements directly to template
//let movie of movies
console.log(data);

			},
			err => {
				console.log(err);
			},
			() => console.log('Movie Search Complete')
		);

}

I am very new ionic and typescripting so might be asking basic questions…so really appreciate your help !!

9

In the future, please fence your code with triple backticks so readers’ eyes will bleed less.

Normally, backend APIs return objects like this:

{
  "movies": [
    { "title": "Raiders of the Lost Ark", "director": "Ridley Scott"},
    { "title": "Ghostbusters", "director": "Steven Spielberg"}
  ]
}

, and you do something like this:

this.http.get("/movies").subscribe(movies => this.movies = movies);

<div *ngFor="let movie of movies">
{{movie.title}} directed by {{movie.director}}
</div>

Your API seems to be (to put it politely) unusual. The fact that the HTTP status code is in a single element of a naked array suggests that there is not an array of elements in the JSON. You need to sort it out with whoever is responsible for the backend.