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'
}

Answer 1

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);

Answer 2

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>

Answer 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)

Answer 4

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)

Answer 5

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)