Create an array from non null properties of Javascript/typescript object

Question

I have a typescript POJO as follows

  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 with all the fields from above POJO. When a user selects a field, the pojo gets populated with the text entered.

However the user can choose to remain many fields empty and their properties in the object would be null.

So on submit button click, when I check the POJO, it is as in the below screeshot.

I want to populate another array with only the populated values ( not the null value properties ) .

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

I need to use it for an ngFor List to display angular material chip

How do we do it in a very optimized way.

edit: My question is regarding checking null properties in object and the duplicate question reference is to an array. Even the answers have different approaches. The Approach to my question is using Object.entries while the duplicate reference has an approach of using map and Object.keys

Possible duplicate of Javascript filter null object properties — Brandon Taylor
– Brandon Taylor, Commented Jul 13, 2018 at 15:21

SLaks · Accepted Answer · 2018-07-13 15:30:08Z

13

You can use Object.entries() to get name-value pairs, then map them to objects:

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

edited Jul 13, 2018 at 15:30

answered Jul 13, 2018 at 15:21

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Kokozaurus Over a year ago

Easy to read and since it's using native methods, should be well optimized. +1

prabhat gundepalli Over a year ago

Thanks. I felt this was the most optimized appraoch among the answers here.

Matías Fidemraizer Over a year ago

@prabhatgundepalli I thought that the fact that my answer was doing a single full iteration of object's properties should mean that it was more optimal. I was wrong. BTW, I've provided an additional approach using just reduce too and it outperforms this answer by more than 20% in my AMD Athlon II X3 450, Firefox 61 and Linux Mint 18.3.

Matías Fidemraizer Over a year ago

@prabhatgundepalli jsperf.com/object-entries-filter-map-vs-reduce

amrender singh · Accepted Answer · 2018-07-13 15:30:50Z

3

You can simply use Object.entries() and Array.reduce()

var fields = {
  "name":"andy",
  "age" : null,
  "email" : null,
  "status" : true
};

var result = Object.entries(fields).reduce((a,[key,val])=>{
  if(val)
    a.push({name : key, value : val});
  return a;
},[]);

console.log(result);

Output:

[
  {
    "name": "name",
    "value": "andy"
  },
  {
    "name": "status",
    "value": true
  }
]

answered Jul 13, 2018 at 15:30

amrender singh

8,2594 gold badges27 silver badges30 bronze badges

Comments

Matías Fidemraizer · Accepted Answer · 2018-07-16 09:24:05Z

One possible approach:

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)

Same approach with local mutation

Here's the same approach using local mutation of Array#reduce accmulator, which is more optimal.

Since Array#reduce receives an already allocated array with N empty slots (where N is the total number of keys in the input object), the array never requires an internal operation to increase its length. Once the object's entries are reduced, we filter out 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)

JSPerf perf test filter+map vs reduce+filter

Collectives™ on Stack Overflow

Create an array from non null properties of Javascript/typescript object

3 Answers 3

4 Comments

Comments

Same approach with local mutation

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Same approach with local mutation

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related