Typescript - filtering out null values from JSON object

Question

Typescript - filtering out null values from JSON object

I am facing an issue with my service method that saves a date on the server. When this method sends the date to the server, it includes fields with null values in the JSON. How can I exclude these fields with null values?

public create<T>(post: any): Observable<T> {
    const httpOptions = {
        headers: new HttpHeaders({
            'Content-Type': 'application/json'
        })
    };
    return this.httpClient
        .post<T>(`${this.url}`, JSON.stringify(post), httpOptions)
        .pipe(catchError((err, source) => this.responseHandler.onCatch(err, source)));
}

The JSON being sent to the server:

{
   "name": "test",
   "professionType":{
      "id": null
   },
   "comment": null,
   "organizationSpecialities":[
        {
         "speciality":{
            "id": null
         },
         "effective": 2,
         "effectiveDate":{
            "startDate": null,
            "endDate": "2019/12/01"
         }
      }
   ]
}

The desired JSON to be sent:

{
   "name": "test",
   "organizationSpecialities":[
         "effective": 2,
         "effectiveDate":{
            "endDate": "2019/12/01"
         }
      }
   ]
}

json angular typescript

Answer 1

Answer №1

If you want to eliminate any null values or objects with no keys in a JSON object, you can achieve this by looping through the data and checking for these conditions.

Below is an example of how you can clean up your JSON data.

cleanseData(obj) {
  if (Object.prototype.toString.call(obj) == "[object Array]") {
    for (let index = 0; index < obj.length; index++) {
      this.cleanseData(obj[index]);
      if(Object.prototype.toString.call(obj[index]) == "[object Object]") {
        if(Object.keys(obj[index]).length === 0){
          obj.splice(index, 1);
          index--;
        }
      }

    }
  }
  else if (Object.prototype.toString.call(obj) == "[object Object]") {
    for (let key in obj) {
      let value = this.cleanseData(obj[key]);
      if (value === null) {
        delete obj[key];
      }
      if(Object.prototype.toString.call(obj[key]) == "[object Object]") {
        if(Object.keys(obj[key]).length === 0){
          delete obj[key];
        }
      }
      if(Object.prototype.toString.call(obj[key]) == "[object Array]") {
        if(obj[key].length === 0){
          delete obj[key];
        }
      }
    }
  }
  return obj;
}

You can also check out the code on StackBlitz for further reference.

Answer 2

If you want to eliminate any null values or objects with no keys in a JSON object, you can achieve this by looping through the data and checking for these conditions.

Below is an example of how you can clean up your JSON data.

cleanseData(obj) {
  if (Object.prototype.toString.call(obj) == "[object Array]") {
    for (let index = 0; index < obj.length; index++) {
      this.cleanseData(obj[index]);
      if(Object.prototype.toString.call(obj[index]) == "[object Object]") {
        if(Object.keys(obj[index]).length === 0){
          obj.splice(index, 1);
          index--;
        }
      }

    }
  }
  else if (Object.prototype.toString.call(obj) == "[object Object]") {
    for (let key in obj) {
      let value = this.cleanseData(obj[key]);
      if (value === null) {
        delete obj[key];
      }
      if(Object.prototype.toString.call(obj[key]) == "[object Object]") {
        if(Object.keys(obj[key]).length === 0){
          delete obj[key];
        }
      }
      if(Object.prototype.toString.call(obj[key]) == "[object Array]") {
        if(obj[key].length === 0){
          delete obj[key];
        }
      }
    }
  }
  return obj;
}

You can also check out the code on StackBlitz for further reference.

Typescript - filtering out null values from JSON object

Answer №1

Similar questions

Angular 6 - Separate whole numbers and decimal values to style them differently in CSS

Extracting JSON data from the DataFrame for analysis

Using Vue's $set method to update nested JSON values

Leveraging JSON data in subsequent GET request in Ionic 3

Converting a JavaScript object into JSON format

NX combined with Nest.js and TypeORM, further enhanced with Webpack and Migrations

Issue with Angular modal not opening as expected when triggered programmatically

The initial processing step for the export namespace is to utilize the `@babel/plugin-proposal-export-namespace-from` plugin. Previous attempts to resolve this issue have been

Exploring Angular 2's Routing Features Across Different Cultures

Ensure that Angular CLI libraries contain all necessary dependencies

Encountering a Typescript issue with the updated Apollo server version within a NestJS application

The zip() operator in RxJS is not functioning as intended. It consistently finishes execution without emitting any values

How can HostBinding be used to target a custom directive in order to deliver either a success or error message and show it on

PHP Form Submission: A Simple Guide

What is the best way to verify the JSON request in a Spring Boot application?

Displaying server errors in an Angular componentIn this tutorial, we

Struggling with testing the checkbox when it changes inside the CardHeader Avatar={} component

Encountered difficulties when trying to incorporate SCSS into my rollup build

Leveraging the power of the Async pipe within an Angular TypeScript file

Displaying HTML content in Angular 15