Javascript mapping nested elements

Question

Is there an ES6 way to easily filter out unwanted columns? Assume we have the following data:

const foo = [
  { 
    a:'blah', 
    b:'blah', 
    c:'blah', 
    d:[
      { a:'blah', b:'blah', c:'blah', e:'blah', f:'blah'},
      { a:'blah', b:'blah', c:'blah', e:'blah', f:'blah'},
      { a:'blah', b:'blah', c:'blah', e:'blah', f:'blah'},
      //... N number of objects     
    ],
  },
  { 
    a:'blah', 
    b:'blah', 
    c:'blah', 
    d:[
      { a:'blah', b:'blah', c:'blah', e:'blah', f:'blah'},
      { a:'blah', b:'blah', c:'blah', e:'blah', f:'blah'},
      { a:'blah', b:'blah', c:'blah', e:'blah', f:'blah'},
      //... N number of objects     
    ],
  },
  //... N number of objects     
];

I would like to filter out the e and f values so I only have the following:

[
  { 
    a:'blah', 
    b:'blah', 
    c:'blah', 
    d:[
      { a:'blah', b:'blah', c:'blah' },
      { a:'blah', b:'blah', c:'blah' },
      { a:'blah', b:'blah', c:'blah' },
      //... N number of objects     
    ],
  },
  { 
    a:'blah', 
    b:'blah', 
    c:'blah', 
    d:[
      { a:'blah', b:'blah', c:'blah' },
      { a:'blah', b:'blah', c:'blah' },
      { a:'blah', b:'blah', c:'blah' },
      //... N number of objects     
    ],
  },
  //... N number of objects     
]

I figured it might be something similar to this, though I'm not sure how to handle the d value:

.map(x=>{ return {a: x.a, b: x.b, c: x.c, d:x.d}})

EDIT: Is there a way to do it without referencing the unwanted values (e or f)? In other words, only by referencing the values you want to keep (a,b,c,d)

your data is not valid, because arrays can not have properties in literal notation. — Nina Scholz
– Nina Scholz, Commented Jan 23, 2019 at 14:31
I guess you mean this d:[ {a:'blah', b:'blah', c:'blah', e:'blah', f:'blah' } ] instead of this d:[ a:'blah', b:'blah', c:'blah', e:'blah', f:'blah' ] — Osakr
– Osakr, Commented Jan 23, 2019 at 14:32
Can you do this foo.map(x=>{ return {a: x.a, b: x.b, c: x.c, d:x.d.map(xxxxxx) }}) — Matthew Page
– Matthew Page, Commented Jan 23, 2019 at 14:40

kemicofa · Accepted Answer · 2019-01-23 14:59:15Z

3

Use Array#map, spread syntax and destructuring

const foo=[{a:'blah',b:'blah',c:'blah',d:[{a:'blah',b:'blah',c:'blah',e:'blah',f:'blah'},{a:'blah',b:'blah',c:'blah',e:'blah',f:'blah'},{a:'blah',b:'blah',c:'blah',e:'blah',f:'blah'},],},{a:'blah',b:'blah',c:'blah',d:[{a:'blah',b:'blah',c:'blah',e:'blah',f:'blah'},{a:'blah',b:'blah',c:'blah',e:'blah',f:'blah'},{a:'blah',b:'blah',c:'blah',e:'blah',f:'blah'},],},]

const res = foo.map(({d, ...rest})=>{
  return {...rest, d: d.map(({e,f,...rest})=>({...rest}))}
});

console.log(res);

Solution by referencing only wanted variables:

const foo=[{a:'blah',b:'blah',c:'blah',d:[{a:'blah',b:'blah',c:'blah',e:'blah',f:'blah'},{a:'blah',b:'blah',c:'blah',e:'blah',f:'blah'},{a:'blah',b:'blah',c:'blah',e:'blah',f:'blah'},],},{a:'blah',b:'blah',c:'blah',d:[{a:'blah',b:'blah',c:'blah',e:'blah',f:'blah'},{a:'blah',b:'blah',c:'blah',e:'blah',f:'blah'},{a:'blah',b:'blah',c:'blah',e:'blah',f:'blah'},],},]

const res = foo.map(({d, ...rest})=>{
  return {...rest, d: d.map(({a,b,c})=>({a,b,c}))}
});

console.log(res);

edited Jan 23, 2019 at 14:59

answered Jan 23, 2019 at 14:43

kemicofa

17.7k10 gold badges93 silver badges145 bronze badges

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

1 Comment

ekjcfn3902039 Over a year ago

Great, thanks! By any chance is there a way to do it without referencing the unwanted values (e or f)? In other words, only by referencing the values you want to keep (a,b,c,d)

Nina Scholz · Accepted Answer · 2019-01-23 14:43:20Z

You could destruture unwanted properties and take the rest parameters for properties. for nested array, you need to iterate as well.

const
    filter = ({ e, f, ...rest }) => {
        Object
            .entries(rest)
            .filter(([, v]) => Array.isArray(v))
            .forEach(([k, v]) => Object.assign(rest, { [k]: v.map(filter) }));
        return rest;
    },
    foo = [{ a: 'blah', b: 'blah', c: 'blah', d: [{ a: 'blah', b: 'blah', c: 'blah', e: 'blah', f: 'blah' }, { a: 'blah', b: 'blah', c: 'blah', e: 'blah', f: 'blah' }, { a: 'blah', b: 'blah', c: 'blah', e: 'blah', f: 'blah' }] }, { a: 'blah', b: 'blah', c: 'blah', d: [{ a: 'blah', b: 'blah', c: 'blah', e: 'blah', f: 'blah' }, { a: 'blah', b: 'blah', c: 'blah', e: 'blah', f: 'blah' }, { a: 'blah', b: 'blah', c: 'blah', e: 'blah', f: 'blah' }] }];

console.log(foo.map(filter));

.as-console-wrapper { max-height: 100% !important; top: 0; }

ellipsis · Accepted Answer · 2019-01-23 14:41:30Z

0

Traverse the array using map and slice the unwanted objects. And the array you created is wrong, it never has key-value pairs. Fixed that too.

const foo = [
  { 
    a:'blah', 
    b:'blah', 
    c:'blah', 
    d:[
      { a:'blah', b:'blah', c:'blah', e:'blah', f:'blah'},
      { a:'blah', b:'blah', c:'blah', e:'blah', f:'blah'},
      { a:'blah', b:'blah', c:'blah', e:'blah', f:'blah'},
      //... N number of objects     
    ],
  },
  { 
    a:'blah', 
    b:'blah', 
    c:'blah', 
    d:[
      { a:'blah', b:'blah', c:'blah', e:'blah', f:'blah'},
      { a:'blah', b:'blah', c:'blah', e:'blah', f:'blah'},
      { a:'blah', b:'blah', c:'blah', e:'blah', f:'blah'},
      //... N number of objects     
    ],
  },
  //... N number of objects     
];
console.log(foo.map((e)=>{

e.d.forEach((x)=>{delete x.e; delete x.f})
return e;
}))

edited Jan 23, 2019 at 14:41

answered Jan 23, 2019 at 14:38

ellipsis

12.2k2 gold badges19 silver badges33 bronze badges

1 Comment

ekjcfn3902039 Over a year ago

Sorry, fixed my typo. Our structures are different so please recheck the original post

Osakr · Accepted Answer · 2019-01-23 14:43:22Z

0

This is also a solution but not the best one so far:

var result = foo.map( e => {
      delete e.d[0].e;
      delete e.d[0].f;
      return e;
});

console.log(result);

This work around could be done in a dynamic way

Edit: I made this workaround a little more dynamic:

var unwantedIndex = [
  'e', 'f'
];

var r = foo.map( e => {
    for (let data of e.d) {
        for (let indx of unwantedIndex) {
            if (data[indx]) {
                delete data[indx];
            }
        }
    }

   return e;
});

console.log(r);

edited Jan 23, 2019 at 14:43

answered Jan 23, 2019 at 14:36

Osakr

1,0661 gold badge14 silver badges29 bronze badges

Collectives™ on Stack Overflow

Javascript mapping nested elements

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related