Elimination of any null value fields upon form submission in Angular 2

Question

Elimination of any null value fields upon form submission in Angular 2

Hey everyone, I'm currently working on a project that uses a Model driven form. When I submit the form, I am encountering an issue where I get null values in my formGroupObj.value. I need to find a way to remove fields with null values.

Here is how the current output looks:

{
   "firstName":"Jack",
   "lastName":"M",
   "age":null
}

What I'm expecting as output is:

 {
    "firstName":"Jack",
    "lastName":"M"
 }

Does anyone know of a default way to achieve this desired output?

I would really appreciate any help on this issue. Thank you!

angular typescript

Answer 1

Answer №1

let person = {
   "name":"Sarah",
   "last":"Doe",
   "age":null,
   "otherValue": null
};

Object.keys(person).forEach((key) => (person[key] == null) && delete person[key]);
console.log(person);

Answer 2

let person = {
   "name":"Sarah",
   "last":"Doe",
   "age":null,
   "otherValue": null
};

Object.keys(person).forEach((key) => (person[key] == null) && delete person[key]);
console.log(person);

Answer 3

Answer №2

let person = {
   "name":"Sarah",
   "age":25,
   "job": null,
   "hobby": null
};

for(key in person) {
  if(person[key] === null) {
    delete person[key];
  }
}

console.log(person);

Answer 4

let person = {
   "name":"Sarah",
   "age":25,
   "job": null,
   "hobby": null
};

for(key in person) {
  if(person[key] === null) {
    delete person[key];
  }
}

console.log(person);

Answer 5

Answer №3

When dealing with nested objects, particularly nested Form Groups, a recursive function is necessary:

const data = {
  "name": {
    "firstName":"Alice",
    "lastName": null,
  },
  "age":null,
  "address": "123 Main St"
};

const removeNullValues = (data) => {
  Object.keys(data).forEach(key => {
     if (data[key] && typeof data[key] === "object") {
       // recursion
       removeNullValues(data[key]);
     } else if (data[key] === null) {
       delete data[key];
     }
   });
};

removeNullValues(data);

Output:

const newData = {
  "name": {
    "firstName":"Alice",
  },
  "address": "123 Main St"
};

Live Example: https://jsfiddle.net/yv9tg8zp/

Answer 6

When dealing with nested objects, particularly nested Form Groups, a recursive function is necessary:

const data = {
  "name": {
    "firstName":"Alice",
    "lastName": null,
  },
  "age":null,
  "address": "123 Main St"
};

const removeNullValues = (data) => {
  Object.keys(data).forEach(key => {
     if (data[key] && typeof data[key] === "object") {
       // recursion
       removeNullValues(data[key]);
     } else if (data[key] === null) {
       delete data[key];
     }
   });
};

removeNullValues(data);

Output:

const newData = {
  "name": {
    "firstName":"Alice",
  },
  "address": "123 Main St"
};

Live Example: https://jsfiddle.net/yv9tg8zp/

Answer 7

Answer №4

After reviewing andreivictor's response, I made enhancements to eliminate empty FormGroups as well.

cleanseEmpty = (data: any) => {
  Object.keys(data).forEach((key) => {
    // recursive for FormGroups
    if (data[key] && typeof data[key] === 'object') this.cleanseEmpty(data[key]);
    // check for null values
    if (data[key] === null) delete data[key];
    // remove empty objects (empty FormGroups)
    if (JSON.stringify(data[key]) === '{}') delete data[key];
  });
  return data;
};

Answer 8

After reviewing andreivictor's response, I made enhancements to eliminate empty FormGroups as well.

cleanseEmpty = (data: any) => {
  Object.keys(data).forEach((key) => {
    // recursive for FormGroups
    if (data[key] && typeof data[key] === 'object') this.cleanseEmpty(data[key]);
    // check for null values
    if (data[key] === null) delete data[key];
    // remove empty objects (empty FormGroups)
    if (JSON.stringify(data[key]) === '{}') delete data[key];
  });
  return data;
};

Elimination of any null value fields upon form submission in Angular 2

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Strategies for implementing classes in Typescript

Encountering a type error when attempting to filter TypeORM 0.3.5 by an enum column that is

Steps for implementing an onclick action in Angular 4 from infowindow content

Modify the System.config() in Angular 2 following the segregation of JavaScript and TypeScript files

Unable to retrieve headers from extended Express.Request type

Objects vanish 10 seconds after appearing [Angular2, *ngFor]

Adding a custom button to CkEditor 5 in Angular 12: Step by step tutorial

Creating rectangular shapes on the canvas with the help of react hooks

Tips for implementing ID enforcement on downgraded Angular 2+ component

The feature of using a custom find command in Cypress does not support chaining

Trouble with 'import type' declaration causing build issues in a Next.js project

When inserting a child element before the myArray.map(x => ) function, it results in rendering only a single child element from the array

What methods does the TypeScript compiler use to locate npm packages containing types?

I recently updated Angular Cli and now my app is searching for node_modules in a different location. Is there a way for me to revert it

Angular2 Window Opener

Exploring Angular2's DOMContentLoaded Event and Lifecycle Hook

Passing Imported Module to Feature Module in Angular 7

Number that is not zero in TypeScript

Custom error handlers are never triggered by Angular 2 errors

What steps can I take to fix the ESM / require error while using TypeScript 4.8?