Unable to retrieve values from nested objects in component.html

Question

Unable to retrieve values from nested objects in component.html

Hey fellow tech enthusiasts, I'm currently dealing with a complex nested JSON object retrieved from an API. Here's a snippet of the object:

profile : {
    title:"Mr",
    personalInfo:{
       fullNames: "John Doe",
       id: "569"
   }
   Address:{
    line1:"addd one",
    line2:"addd two" 
   }
}

As for my HTML component:

<ion-input placeholder="Full Names" [(ngModel)]="profile.personalInfo.fullNames"  ></ion-input>

Upon compiling the code, I encountered an error message stating

TypeError: Cannot read property 'personalInfo' of undefined

Interestingly, when I access the non-nested title property in my HTML component, everything works fine.

Any insights on how to tackle this issue?

json angular typescript ionic4

Answer 1

Answer №1

The JSON data appears to be incorrect, have you reviewed it? You seem to have forgotten a comma before the address key

{
  "title": "Mrs",
  "personalInfo": {
    "fullName": "Jane Smith",
    "id": "897"
  },
  "Address": {
    "street1": "123 Main Street",
    "street2": "Apt 4B"
  }
}

Answer 2

The JSON data appears to be incorrect, have you reviewed it? You seem to have forgotten a comma before the address key

{
  "title": "Mrs",
  "personalInfo": {
    "fullName": "Jane Smith",
    "id": "897"
  },
  "Address": {
    "street1": "123 Main Street",
    "street2": "Apt 4B"
  }
}

Answer 3

Answer №2

Have you saved this data in a global variable that can be accessed by the HTML? It looks like the information is not being stored anywhere, as your binding would normally appear like this:

<input placeholder="Enter Name" [(ngModel)]="data.name"></input>

Make sure to store your response in a global variable named 'response' and access it from within the HTML.

Answer 4

Have you saved this data in a global variable that can be accessed by the HTML? It looks like the information is not being stored anywhere, as your binding would normally appear like this:

<input placeholder="Enter Name" [(ngModel)]="data.name"></input>

Make sure to store your response in a global variable named 'response' and access it from within the HTML.

Unable to retrieve values from nested objects in component.html

Answer №1

Answer №2

Similar questions

The async validator in Angular will only activate upon submission if the user has made changes to the form

Which is better for posting data via ajax: using JSON.stringify() or default URL encoding?

Develop a JSON array of objects using a Dictionary in C#

Initial compilation of Angular 2 project with lazy-loaded submodules fails to resolve submodules

Troublesome bug in Angular 7: [ngModel] functionality fails to cooperate with mat-select

An issue has been identified in the node_modules/xterm/typings/xterm.d.ts file at line 10, causing an error with code TS1084. The 'reference' directive syntax used

Transferring a JSON object to a PHP script

The immutability of the List in JavaScript and its

Navigating JSON Data in Groovy Using a Loop: A Handy Guide

Updating MongoDB every 30 seconds using remote JSON data: A step-by-step guide

Guide to Conditionally Importing a Module in Angular

Guide on accessing mobile information and sim card details with Ionic 3 and Cordova on Android devices

TypeScript does not verify keys within array objects

Angular, Observable, and the wonders of debounceTime

What is the best method for obtaining non-null values for the jsonSerialize interface in PHP?

The release of the Angular App within a webjar is causing problems relating to the baseHref

Is there a method in Flask to conceal a specific @app.route so that only the application itself can access it? I am concerned about the visibility of my database through a URL in JSON format

Guide on integrating an Excel file into the ag-grid-angular platform

converting JSON data fetched from an API into state using setState

A guide to serializing declarative links using Jersey and Jackson