receiving a null value in the JSON response

Preparing for the client to register. This function is responsible for registering a client.

  registerAsClient(){
  this.loading =this.loadingCtrl.create({
   content:"Setting up Account"
  });
this.loading.present();
this.buildClientData();
console.log(this.clientData);
this.auth.store('clients', this.clientData).subscribe((response)=>{

  this.clients = response.json();

This section displays the server response on the console after registration.

  console.log("Client ID : " + this.clients['clientId']);
  console.log("Savings Account ID : " + this.clients['savingsAccountId']);

  localStorage.setItem('clientID', this.clients['clientId']);
  localStorage.setItem('officeID', this.clients['officeId']);
  localStorage.setItem('savingsAccountID', this.clients['savingsAccountId']);

  setTimeout(()=>{
    this.loading.dismissAll();
    this.toastrCtrl.messenger('Successfully Registered'); 
    localStorage.setItem('registered', 'true');
    this.navCtrl.push(HomePage);
       },5000)
  },error=>{
    if(error.status === 403){
      this.loading.dismissAll();
      this.toastrCtrl.messenger("Phone number already exists. Please use another");
    }else {
     this.loading.dismissAll();
     this.toastrCtrl.messenger('Service unavailable. Please try again later'); 
     console.log(error);
    }
})
}

This part shows the console response during registration. Client id can be retrieved, but savings account id appears as undefined.

Client ID : 104 
Savings Account ID : undefined

Here is the complete json response when testing with the endpoints.

{
"id": 89,
"accountNo": "000000089",
 "status": {
"id": 300,
"code": "clientStatusType.active",
"value": "Active"
 },
 "subStatus": {
"active": false,
"mandatory": false
 },
"active": true,
"activationDate": [
  2018,
  8,
 13
 ],
 "firstname": "Albertina",
 "lastname": "Ben-Patterson",
 "displayName": "Albertina Ben-Patterson",
 "mobileNo": "0201234598",
 "gender": {
  "active": false,
  "mandatory": false
 },
 "clientType": {
 "active": false,
 "mandatory": false
  },
  "clientClassification": {
"active": false,
"mandatory": false
 },
"isStaff": false,
 "officeId": 10,
 "officeName": "Greater Accra Region",
 "timeline": {
 "submittedOnDate": [
  2018,
  8,
 13
 ],
"submittedByUsername": "admin",
"submittedByFirstname": "App",
"submittedByLastname": "Administrator",
"activatedOnDate": [
  2018,
  8,
 13
],
"activatedByUsername": "admin",
"activatedByFirstname": "App",
"activatedByLastname": "Administrator"
},
"savingsAccountId": 8,
"groups": [],
"clientNonPersonDetails": {
 "constitution": {
  "active": false,
  "mandatory": false
 },
  "mainBusinessLine": {
  "active": false,
  "mandatory": false
 }
}
}

Your assistance is greatly appreciated.

Thank you.

Answer №1

I tested the code on my own system, but I didn't notice anything unusual. It might be worth double-checking the spelling of savingsAccountId when retrieving it. Maybe it should be ID --> Id?

localStorage.setItem('savingsAccountID', this.clients['savingsAccountId'])

localStorage.getItem('savingsAccountID');

Furthermore, it's always a good idea to have error messages generated from the backend as it can prevent issues down the line.

Answer №2

Upon reviewing the json body, it appears that the attribute with key clientId is not present, but instead, there is a key called id. It seems like you may be attempting to access data from a different json body that has the clientId key and lacks the savingsAccountId key.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Setting up Ionic on a Mac Operating System

I am attempting to set up ionic, but every time I try to install it shows the message: npm WARN deprecated [email protected]: Use uuid module instead Unfortunately, I am unable to verify the version using ionic -v as it is not yet installed. Howev ...

Assign a dynamic class to an element within an ngFor iteration

I am working with a template that includes an app-subscriber component being iterated over using *ngFor: <app-subscriber *ngFor="let stream of streams" [stream]="stream" [session]="session" (speakEvents)='onSpeakEvent($event)'> ...

What are the steps to gather user data and generate a roster of individuals currently online?

I am currently working on a way to gather information about the users who are currently logged into my website. Here's how it works: When a user enters my website, they have the option to choose a nickname using an input box. Then, there are five diff ...

Once the Ionic platform is prepared, retrieve from the Angular factory

I have created a firebase Auth factory that looks like this: app.factory("Auth", ["$firebaseAuth", "FIREBASE_URL","$ionicPlatform", function($firebaseAuth, FIREBASE_URL, $ionicPlatform) { var auth = {}; $ionicPlatform.ready(function(){ ...

Getter and setter methods in Angular Typescript are returning undefined values

I am facing a challenge in my Angular project where I need a property within a class to return specific fields in an object. Although I have implemented this successfully in .Net before, I am encountering an issue with getting an "Undefined" value returned ...

Similar to the getState() function in react-redux, ngrx provides a similar method in Angular 6 with ngrx 6

Recently, I developed an application with react and redux where I used the getState() method to retrieve the state of the store and extract a specific slice using destructuring. Here's an example: const { user } = getState(); Now, I am transitioning ...

I am having trouble getting my custom colors to work with hover effects in Tailwind CSS

The code I have written is for a header component in Next.js with Typescript and Tailwind. I named it Header_2 to represent a component display in a library. Initially, the custom colors were not rendering as expected, but I managed to resolve the issue by ...

How to use Angular 10 forkJoin to manage and cancel multiple requests

Calling all Angular experts! I need help with a simple method that is causing issues when processing multiple products. private addMultiple(products: Product[]): void { let observables: Observable<Product>[] = []; products.forEach((product: ...

Leveraging Angular for Parsing JSON Data

I have a JSON object that I want to use in my code. The goal is to assign the values of certain properties from the JSON object to four variables in my Angular project. These variables are named as follows: authorText : string; titleText : string; duratio ...

Is the component not being initialized when navigating through the router, but only when the browser is refreshed?

I have noticed that when I navigate using the router, the data in the page does not update. However, if I refresh the browser, the updated data is shown in the router page. I am looking for a way to reload only the component without refreshing the entire ...

What setting should I adjust in order to modify the color in question?

Looking to Customize Radar Chart Highlighted Line Colors https://i.sstatic.net/PqWc4.png I am currently working on a Radar Chart and I am trying to figure out which property needs to be edited in order to change the color of the highlighted lines. I have ...

Managing the outcome of numerous asynchronous calls before accessing the database post-result collection

Hey everyone, I'm just getting started with node.js and I'm working on the following tasks: Calling the AWS API to create Cognito users by passing data. After all requests are completed, inserting all the records into the database. In my code, ...

The reason behind the ghost problem - classRef isn't recognized as a constructor

Recently, I encountered an issue where the app was not loading in the browser while running an Angular NX project locally with the command "start-dev": "nx run-many --target=serve --all". The screen would get stuck on our loading animat ...

Creating a feature that automatically determines the data type of a value using the provided key

My object type has keys that map to different types: type Value = { str: string; num: number; }; I am working on creating a universal format function: const format = <K extends keyof Value>(key: K, value: Value[K]): string => { if (key === ...

Tips for Angular4: ensuring ngOnDestroy completion before navigation

My task involves managing a list of objects where the user can choose an object to edit using a child component. However, when the user returns to the list component, the child component needs to clean up in the ngOnDestroy method, which includes making a ...

How does TypeScript interpret the data type 'a' | 'b' as a string?

As a beginner in TypeScript, React, and English, I apologize for any confusion. I have written a function like this: interface ObjectAttrUniqueState { editVisible: boolean; currentId: number; selectedUnique: number[]; name: string; desc: string; ...

Enhancing TypeScript - Managing Variables within Namespace/Scope

Why is the console.log inside the function correctly logging the object, but after the function returns it logs undefined, failing to update the variable? In addition, when using this within testNameSpace, it returns window. Why is that? namespace testNa ...

Utilizing Bootstrap-Table with Ionic Angular for dynamic table functionality

I am looking to incorporate Bootstrap Table into my Ionic project. It seems like a user-friendly and highly responsive option for Hybrid Web Apps. Additionally, I am in the process of transitioning my Angular project to Ionic, which already utilizes Bootst ...

Unable to utilize a generic model in mongoose due to the error: The argument 'x' is not compatible with the parameter type MongooseFilterQuery

Attempting to include a generic Mongoose model as a parameter in a function is my current challenge. import mongoose, { Document, Model, Schema } from 'mongoose'; interface User { name: string; age: number; favouriteAnimal: string; ...

How can I prevent the installation of my Ionic 2 application on devices that have been rooted or jailbroken?

I am currently working on a project involving an Ionic 2 and Angular 2 application. I need to implement a feature that checks whether the device is rooted (in the case of Android) or jailbroken (in the case of iOS). I have experimented with various packag ...