Generate an array by filtering out null properties from a Javascript/Typescript object

Question

Generate an array by filtering out null properties from a Javascript/Typescript object

I have a TypeScript plain old JavaScript object (POJO) structured as shown below:

  export interface Items {
        firstName?: String;
        lastName?: String;
        address?: String;
        phoneNumber?: number;
        city?: String;
        state?: String;
        zipcode?: number;
        accountId?: number;
        status?: String;
        approvalStatus?: String;
        txId?: number;
        rxId?: number;
        txBankName?: String;
        rxBankName?: String;
        txCcy?: String;
        rxCcy?: String;
        txCcyAmt?: number;
        rxCcyAmt?: number;
        txDate?: date;
        rxDate?: date;
     }

In my HTML file, I have a form that includes all the fields from the above POJO. When a user selects a field, the POJO is updated with the entered text.

However, users have the option to leave many fields empty, resulting in corresponding properties in the object being set to null.

Upon clicking the submit button, when I examine the POJO, it appears as shown in the screenshot below:

https://i.sstatic.net/N8lTI.jpg

I want to create another array that only contains the populated values (excluding the null properties).

  this.anotherArray = [ {name: firstName, value: "Andy"}, {name: lastName, value: "Smith"}]

I intend to utilize this array for an ngFor list to display Angular Material chips.

How can I achieve this in a highly optimized manner?

edit: My question pertains to checking null properties in an object, whereas the referenced duplicate question relates to an array. The solutions presented also differ, with my approach involving the use of Object.entries, as opposed to the duplicate reference which utilizes map and Object.keys.

javascript arrays angular typescript object

Answer 1

Answer №1

If you want to extract name-value pairs from an object in JavaScript, you can utilize the Object.entries() method and then transform them into separate objects using the map function:

Object.entries(obj)
    .filter(([name, value]) => value !== null)
    .map(([name, value]) => ({name, value}));

Answer 2

If you want to extract name-value pairs from an object in JavaScript, you can utilize the Object.entries() method and then transform them into separate objects using the map function:

Object.entries(obj)
    .filter(([name, value]) => value !== null)
    .map(([name, value]) => ({name, value}));

Answer 3

Answer №2

You can easily utilize Object.entries() along with Array.reduce()

var items = {
  "title":"example",
  "quantity" : 3,
  "price" : null,
  "available" : true
};

var output = Object.entries(items).reduce((accumulator,[key,value])=>{
  if(value)
    accumulator.push({title : key, content : value});
  return accumulator;
},[]);

console.log(output);

Result:

[
  {
    "title": "title",
    "content": "example"
  },
  {
    "title": "available",
    "content": true
  }
]

Answer 4

You can easily utilize Object.entries() along with Array.reduce()

var items = {
  "title":"example",
  "quantity" : 3,
  "price" : null,
  "available" : true
};

var output = Object.entries(items).reduce((accumulator,[key,value])=>{
  if(value)
    accumulator.push({title : key, content : value});
  return accumulator;
},[]);

console.log(output);

Result:

[
  {
    "title": "title",
    "content": "example"
  },
  {
    "title": "available",
    "content": true
  }
]

Answer 5

Answer №3

Here is a potential solution:

const obj = { a: 1, b: null, c: 2, d: null }

const output = Object.entries(obj)
                     .reduce((a, [k, v]) => v !== null ? [...a, [k, v]] : a, [])
      
console.log(output)

Applying the same method with local mutation

Using local mutation with Array#reduce accumulator can optimize the process.

By pre-allocating an array with N empty slots (where N is the total number of keys in the input object), the array's length does not need to be adjusted during the reduction operation. After reducing the object's entries, we eliminate undefined items (those that were null):

const obj = {
  a: 1,
  b: null,
  c: 2,
  d: null
}

const keyCount = Object.keys(obj).length

const output = Object.entries(obj)
  .reduce((a, kvp, i) => {
    if (kvp[1] !== null) a[i] = kvp
    return a
  }, Array(keyCount))
  .filter(kvp => kvp)

console.log(output)

For performance comparison, check out JSPerf test filter+map vs reduce+filter

Answer 6

Here is a potential solution:

const obj = { a: 1, b: null, c: 2, d: null }

const output = Object.entries(obj)
                     .reduce((a, [k, v]) => v !== null ? [...a, [k, v]] : a, [])
      
console.log(output)

Applying the same method with local mutation

Using local mutation with Array#reduce accumulator can optimize the process.

By pre-allocating an array with N empty slots (where N is the total number of keys in the input object), the array's length does not need to be adjusted during the reduction operation. After reducing the object's entries, we eliminate undefined items (those that were null):

const obj = {
  a: 1,
  b: null,
  c: 2,
  d: null
}

const keyCount = Object.keys(obj).length

const output = Object.entries(obj)
  .reduce((a, kvp, i) => {
    if (kvp[1] !== null) a[i] = kvp
    return a
  }, Array(keyCount))
  .filter(kvp => kvp)

console.log(output)

For performance comparison, check out JSPerf test filter+map vs reduce+filter

Generate an array by filtering out null properties from a Javascript/Typescript object

Answer №1

Answer №2

Answer №3

Applying the same method with local mutation

Similar questions

Error TS2345: The argument provided, which is of type 'Promise<ReadonlyArray<Object>>', cannot be assigned to a parameter that must be of type 'T | PromiseLike<T> | undefined'

Dealing with errors in node.js

Generate an array containing the dates of the past 30 days using Moment.js

Downloading a PDF in a Next.js application

What is the correct way to utilize default props in a Typescript-powered React component?

javascript The event handler is not functioning properly for the dynamically loaded AJAX content

Is There a Quicker Alternative to Eval for Generating Deep Clones?

Transitioning an NX environment to integrate ESM

Is there a specific point in which we can directly pass a value to the `state` in Redux?

Is it possible to use square brackets in conjunction with the "this" keyword to access a class property using an expression?

Deciphering key-value pairs that are separated by commas

Discovering the optimal method for modifying the state of an object within Object-Oriented Programming using Typescript

Eliminate incorrect or invalid state when resetting a dropdown in an Angular ng-select component

What is the best way to modify a node_module file consisting of only a few exported variables, which is heavily utilized in the entire module? (with demonstration)

Vue users are experiencing issues with the functionality of the Chart js plugin annotation

What is the best method for choosing a document from a Firebase based on its creation time?

Showing error messages in Angular when a form is submitted and found to be invalid

Having trouble showing JSON data with Ionic 2 and Xcode?

`Carousel nested within tabbed interface`

Unravel the encoded string to enable JSON parsing