Convert and filter array of objects to one object

Question

I have next array of objects:

const fields = [
    { givenName: 'firstName' },
    { familyName: 'lastName' },
    { 'custom:data': 'blabla' },
    { 'custom:data2': '' },
    { 'custom:data3': null },
  ];

What I need is to filter out elements which is empty, null or undefined and convert it to one object pameters:

{  
   givenName: 'firstName',
   familyName: 'lastName',
   'custom:data': 'blabla'
}

You have explicitly said to exclude null, undefined and '' (empty) meaning you want to keep everything else. Most answers including the one you have accepted don't do that. Most rely on truthy/falsy checks excluding values such as 0, false and NaN. (FYI) — customcommander
– customcommander, Commented Jan 15, 2021 at 15:06

Nina Scholz · Accepted Answer · 2021-01-15 14:50:38Z

6

You could filter the array by looking to the values. This approach assumes, that only one key/value pair is available.

const
    fields = [{ givenName: 'firstName' }, { familyName: 'lastName' }, { 'custom:data': 'blabla' }, { 'custom:data2': '' }, { 'custom:data3': null }],
    result = Object.assign({}, ...fields.filter(o => {
        const [v] = Object.values(o);
        return v || v === 0 || v === false;
    }));

console.log(result);

edited Jan 15, 2021 at 14:50

answered Jan 15, 2021 at 14:13

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

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

Comments

customcommander · Accepted Answer · 2021-01-15 21:11:58Z

How to check whether a value is empty?

Most people would go about this with a truthy check:

const empty = x => x ? false : true;

empty(null);      //=> true
empty(undefined); //=> true
empty('');        //=> true

But that's always going to exclude things you perhaps didn't intend to exclude:

empty(0);         //=> true
empty(false);     //=> true
empty(NaN);       //=> true

Admittedly NaN could be seen as the "empty" value of its type but for the sake of your question and educational purpose we'll say it's not.

The "workaround" is often something like that:

const empty = x => (x || x === 0 || x === false || Number.isNaN(x)) ? false : true;

However this doesn't need to be more complicated than this:

const empty = x => x == null || x === '' ? true : false;

Checking for either undefined or null is one example where not using triple equality makes sense:

null == undefined;
// true
null === undefined;
// false

See Google JavaScript Style Guide.

If you need to exclude null, undefined and '' please don't rely on clever shorthand tricks and just be explicit about it. Type checking should be a straightforward job (YMMV) and not a show-off contest. Future you and your team mates will thank you.

As for your question, I'd suggest this:

Merge everything you've got with Object.assign:

Object.assign({}, {a:1}, {b:2}, {c:2});
// {a: 1, b: 2, c: 3}

Then deconstruct it into pairs, exclude those whose value is empty, then reconstruct the object from what's left:

const merge = xs =>
  Object.fromEntries(
    Object.entries(
      Object.assign({}, ...xs))
        .filter(([_, v]) =>
          v != null && v !== ''));
        
        
console.log(merge(fields));

<script>
const fields = [
  { givenName: 'firstName' },
  { familyName: 'lastName' },
  { 'custom:data': 'blabla' },
  { 'custom:data2': '' },
  { 'custom:data3': null },
];
</script>

ecoplaneteer · Accepted Answer · 2021-01-15 14:14:17Z

3

const fields = [
    { givenName: 'firstName' },
    { familyName: 'lastName' },
    { 'custom:data': 'blabla' },
    { 'custom:data2': '' },
    { 'custom:data3': null },
  ];
  
 res = fields.reduce((acc, cur) => {
    if (cur[Object.keys(cur)[0]]) {
       acc = { ...acc, ...cur }
    }
    return acc
 }, {})
 
 console.log(res)

answered Jan 15, 2021 at 14:14

ecoplaneteer

1,9841 gold badge12 silver badges29 bronze badges

1 Comment

customcommander Over a year ago

This excludes valid values such as 0 and false

Getter Jetter · Accepted Answer · 2021-01-15 14:14:24Z

3

const fields = [
  { givenName: 'firstName' },
  { familyName: 'lastName' },
  { 'custom:data': 'blabla' },
  { 'custom:data2': '' },
  { 'custom:data3': null },
];

const result = fields.reduce( ( acc, field ) => {
  Object.keys( field ).forEach( ( key ) => {
    if( field[key] ) {
      acc[key] = field[key];
    }
  } )
  return acc;
}, {} )
    
console.log(result)

answered Jan 15, 2021 at 14:14

Getter Jetter

2,0811 gold badge22 silver badges40 bronze badges

Comments

Nenad Vracar · Accepted Answer · 2021-01-15 14:55:39Z

3

You could use reduce and forEach and check if value of each property is falsy or not.

const fields = [
  { givenName: 'firstName' },
  { familyName: 'lastName' },
  { 'custom:data': 'blabla' },
  { 'custom:data2': '' },
  { 'custom:data3': null },
];

const result = fields.reduce((r, e) => {
  Object.entries(e).forEach(([k, v]) => {
    if (v || [false, 0].includes(v)) r[k] = v
  })

  return r
}, {})

console.log(result)

edited Jan 15, 2021 at 14:55

answered Jan 15, 2021 at 14:13

Nenad Vracar

122k16 gold badges160 silver badges184 bronze badges

Comments

phi-rakib · Accepted Answer · 2021-01-15 15:08:39Z

2

Use Array.prototype.filter() method to filter out the empty, null or undefined objects. Then using Array.prototype.map() make a key-value pair array. At last, use Object.fromEntries() method to transform it to a single object.

const fields = [
  { givenName: 'firstName' },
  { familyName: 'lastName' },
  { 'custom:data': 'blabla' },
  { 'custom:data2': '' },
  { 'custom:data3': null },
];
const ret = Object.fromEntries(
  fields
    .filter((x) => {
      const value = Object.values(x)[0];
      return value || value === false || value === 0 || Object.is(value, NaN);
    })
    .map((x) => [Object.keys(x)[0], Object.values(x)[0]])
);
console.log(ret);

edited Jan 15, 2021 at 15:08

answered Jan 15, 2021 at 14:17

phi-rakib

3,3222 gold badges12 silver badges21 bronze badges

3 Comments

Getter Jetter Over a year ago

@customcommander that's actually a good point he explicitly wrote that. I think nobody took this into concideration.

FZs Over a year ago

@customcommander Btw, almost all other posted answers suffer from this problem...

customcommander Over a year ago

Today I learned something: I knew NaN === NaN is false but I didn't know that Object.is(NaN, NaN) is true. Thanks.

olgunyldz · Accepted Answer · 2021-01-15 14:35:22Z

0

It might help you.

const fields = [
    { givenName: 'firstName' },
    { familyName: 'lastName' },
    { 'custom:data': 'blabla' },
    { 'custom:data2': '' },
    { 'custom:data3': null },
  ];
  
 let item = {};

for ( let i = 0; i < fields.length; i++ ){
  for (const [key, value] of Object.entries(fields[i])) {
   if ( value !== null && value !== '' )
      item [key] = value;
  }
 
}

 console.log(item);

answered Jan 15, 2021 at 14:35

olgunyldz

5743 silver badges8 bronze badges

2 Comments

customcommander Over a year ago

You will let undefined through

olgunyldz Over a year ago

when you run the code in snippet it seems working.

Filip Seman · Accepted Answer · 2021-01-31 17:12:40Z

0

Works with one key, simple modification can work on n keys.

const fields = [
    { givenName: "firstName" },
    { familyName: "lastName" },
    { "custom:data": "blabla" },
    { "custom:data2": "" },
    { "custom:data3": null },
];

const reduced = fields
    .filter((f) => {
        const key = Object.keys(f)[0];
        return f[key] === "" || f[key] === null || f[key] === undefined
            ? false
            : true;
    })
    .reduce((acc, curr) => {
        const key = Object.keys(curr)[0];
        acc[key] = curr[key];
        return acc;
    }, {});

console.log(reduced);

edited Jan 31, 2021 at 17:12

answered Jan 31, 2021 at 17:07

Filip Seman

1,8442 gold badges23 silver badges30 bronze badges

Collectives™ on Stack Overflow

Convert and filter array of objects to one object

8 Answers 8

Comments

How to check whether a value is empty?

Comments

1 Comment

Comments

Comments

3 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

Comments

How to check whether a value is empty?

Comments

1 Comment

Comments

Comments

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related