Converting JSON to TypeScript with Angular Casting

Question

Converting JSON to TypeScript with Angular Casting

I'm facing an issue detailed below.

API:

 "Data": [
  {
    "Id": 90110,        
    "Name": "John",
    "Surname": "Doe",       
    "Email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="472d282f2923282207202a262e2b6924282a">[email protected]</a>",    
    "Status": "Active"
  },
  {
    "Id": 90109,
    "Name": "Sally",
    "Surname": "Doe",        
    "Email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f281939e9e8b969d97b2959f939b9edc919d9f">[email protected]</a>",  
    "MiddleName":"II",           
    "Status": "Active"
  }]

Upon parsing the JSON to my typescript class, I noticed that the MiddleName property remains undefined. This is causing issues when exporting to Excel using the 'xlsx' library as shown in the image below. How can I address this problem and set a default value for null or undefined properties?

User Export P.S : I am using 'xlsx' library for excel export.

json angular typescript

Answer 1

Answer №1

In order to assist you with debugging, it would be helpful if you shared the code for your TypeScript class where you parsed the JSON data. Without that information, we are unable to provide specific assistance.

However, if you have created a class that mirrors the structure of the JSON data and want to handle missing properties by assigning them empty strings, you could use the following approach after receiving the API response:

const data = apiJson.map( (person) => {
    Object.assign(
       new Person(), 
       {
         Id: person.Id,
         Name: person.Name || '',
         Surname: person.Surname || '' ,        
         Email: person.Email || '',  
         MiddleName: person.MiddleName || '',           
         Status: person.Status || ''
       }
    )
});

If your class only contains property definitions without any methods, you might consider defining it as an interface instead. In this case, you can simplify the mapping process like so:

const data = apiJson.map( (person) => {
       return {
         Id: person.Id,
         Name: person.Name || '',
         Surname: person.Surname || '' ,        
         Email: person.Email || '',  
         MiddleName: person.MiddleName || '',           
         Status: person.Status || ''
       }
 });

Answer 2

In order to assist you with debugging, it would be helpful if you shared the code for your TypeScript class where you parsed the JSON data. Without that information, we are unable to provide specific assistance.

However, if you have created a class that mirrors the structure of the JSON data and want to handle missing properties by assigning them empty strings, you could use the following approach after receiving the API response:

const data = apiJson.map( (person) => {
    Object.assign(
       new Person(), 
       {
         Id: person.Id,
         Name: person.Name || '',
         Surname: person.Surname || '' ,        
         Email: person.Email || '',  
         MiddleName: person.MiddleName || '',           
         Status: person.Status || ''
       }
    )
});

If your class only contains property definitions without any methods, you might consider defining it as an interface instead. In this case, you can simplify the mapping process like so:

const data = apiJson.map( (person) => {
       return {
         Id: person.Id,
         Name: person.Name || '',
         Surname: person.Surname || '' ,        
         Email: person.Email || '',  
         MiddleName: person.MiddleName || '',           
         Status: person.Status || ''
       }
 });

Converting JSON to TypeScript with Angular Casting

Answer №1

Similar questions

Adjust dropdown options based on cursor placement within textarea

Encountering an unexplained JSON error while working with JavaScript

Validation parameters provided during the Palantir workshop

Angular/Typescript: develop a factory function that creates objects based on the parent class's properties

Modify the ngb-timepicker formatting to output a string instead of an object

Receiving identical data in various smart components

Checking for unnecessary properties in Typescript with vue-i18n

Routing in Angular 2 with .NET Core

Prevent tooltip text from appearing when a button is disabled in an angular application

Implementation of a recursive stream in fp-ts for paginated API with lazy evaluation

Implementing CORS headers in both Angular 9 frontend and Django 3 backend for seamless communication

Error while conducting unit testing: Element 'X' is unrecognized

The function cb() was never invoked, resulting in an error during the npm install process

Saving json data into an SQLite database with the help of nodeJS

Issues arise when HTML components are not functioning correctly upon calling JSON

Displaying a component upon clicking a button in Angular 9

Tips for reverting from Angular 7 to Angular 6

`Only encountering CORS access-control-allow-origin issue when using Safari browser`

Compiling TypeScript to JavaScript with Deno

Obtain redirected JSON data locally using Angular 5