Javascript filter arrays within an object

Question

Let's say I have an object with the structure

data = {
    a : [{values: {key1: 5, key2: "abc"}}, {values: {key1: 3, key2: "abc"}}, {values: {key1: 4, key2: "cde"}}],
    b : [{values: {key1: 3, key2: "ffe"}}, {values: {key1: 11, key2: "gga"}}, {values: {key1: 7, key2: "abc"}}]
}

I want to extract elements where key2 == "abc".

Expected output:

data = {
    a : [{values: {key1: 5, key2: "abc"}}, {values: {key1: 3, key2: "abc"}}],
    b : [{values: {key1: 7, key2: "abc"}}]
}

I've tried to follow similar examples but failed to implement what I wanted.

Phil · Accepted Answer · 2020-07-01 05:03:36Z

8

Use Object.entries() to extract all the key / value pairs of data as an array, map over each pair and then filter on each value to extract the ones you want.

You can then join it back up using Object.fromEntries()

const data = {
    a : [{values: {key1: 5, key2: "abc"}}, {values: {key1: 3, key2: "abc"}}, {values: {key1: 4, key2: "cde"}}],
    b : [{values: {key1: 3, key2: "ffe"}}, {values: {key1: 11, key2: "gga"}}, {values: {key1: 7, key2: "abc"}}]
}

const findKey = 'key2'
const findValue = 'abc'

const newData = Object.fromEntries(Object.entries(data).map(([ key, val ]) =>
  [ key, val.filter(({ values }) => values?.[findKey] === findValue) ]))
  
console.log(newData)

In case you haven't seen Optional Chaining yet, this...

values?.[findKey] === findValue

is equivalent to

!!values && values[findKey] === findValue

edited Jul 1, 2020 at 5:03

answered Jul 1, 2020 at 4:43

Phil

166k25 gold badges265 silver badges269 bronze badges

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

7 Comments

Adrian Brand Over a year ago

My brain hurts trying to follow all the destructuring going on there.

Manos Kounelakis Over a year ago

While this works there is so much destructuring here that you might loose the flow

Phil Over a year ago

@ManosKounelakis there are only two destructures here, one array ([ key, val ]) and one object ({ value }). Not sure what you consider too much?

Ilijanovic Over a year ago

do you actually need the optional chaining? i thought if you try to access a property at the first layer that is not there it returns undefined?

Phil Over a year ago

@Ifaruki it's there in case any of the array entries doesn't have a values property. If they did, values would be undefined and values[findKey] would throw an error

|

user120242 · Accepted Answer · 2020-07-03 18:50:39Z

Simple for of loop that iterates over keys and filters the arrays and reassigns properties directly.
Mutates data directly.

Uses filter and destructures key2 to filter on it.

const data = {
    a : [{values: {key1: 5, key2: "abc"}}, {values: {key1: 3, key2: "abc"}}, {values: {key1: 4, key2: "cde"}}],
    b : [{values: {key1: 3, key2: "ffe"}}, {values: {key1: 11, key2: "gga"}}, {values: {key1: 7, key2: "abc"}}]
}

for(const k of Object.keys(data))
  data[k] = data[k].filter(({values: {key2}})=>key2==='abc')
  
console.log(data)

Added check of .length to prune keys with empty arrays,
and set default value for key2 so values property is optional:

const data = {
    a : [{values: {key1: 5, key2: "abc"}}, {values: {key1: 3, key2: "abc"}}, {values: {key1: 4, key2: "cde"}}],
    b : [{values: {key1: 3, key2: "ffe"}}, {values: {key1: 11, key2: "gga"}}, {values: {key1: 7, key2: "abc"}}]
}

for(const k of Object.keys(data))
  (data[k] = data[k].filter(({values:{key2}={}})=>key2==='abc'))
    .length || delete data[k]
  
console.log(data)

Krishna Vaddepalli · Accepted Answer · 2020-07-01 04:52:54Z

1

data = {
    a : [{values: {key1: 5, key2: "abc"}}, {values: {key1: 3, key2: "abc"}}, {values: {key1: 4, key2: "cde"}}],
    b : [{values: {key1: 3, key2: "ffe"}}, {values: {key1: 11, key2: "gga"}}, {values: {key1: 7, key2: "abc"}}]
}

var resp = {}
for (var key in data){
    var local = [];
    data[key].forEach(element => {
        if(element['values']['key2'] == 'abc'){
            local.push(element);
        }
    })
    resp[key] = local;
}
console.log(resp);

Response

a : [{values: {key1: 5, key2: "abc"}}, {values: {key1: 3, key2: "abc"}}],
b : [{values: {key1: 7, key2: "abc"}}]

answered Jul 1, 2020 at 4:52

Krishna Vaddepalli

819 bronze badges

Comments

Adrian Brand · Accepted Answer · 2020-07-01 05:04:13Z

1

You can reduce the properties of the object to the ones that pass a filter

const data = {
    a : [{values: {key1: 5, key2: "abc"}}, {values: {key1: 3, key2: "abc"}}, {values: {key1: 4, key2: "cde"}}],
    b : [{values: {key1: 3, key2: "ffe"}}, {values: {key1: 11, key2: "gga"}}, {values: {key1: 7, key2: "abc"}}]
};

const results = Object.getOwnPropertyNames(data).reduce((results, key) => {
  const filtered = data[key].filter(item => item.values.key2 === 'abc');
  if (filtered && filtered.length) {
    results[key] = filtered;
  }
  return results;
}, {});

console.log(results);

edited Jul 1, 2020 at 5:04

answered Jul 1, 2020 at 4:52

Adrian Brand

21.8k4 gold badges46 silver badges67 bronze badges

1 Comment

Phil Over a year ago

Might need to clarify with OP if they want empty results omitted but that's a nice addition

Zeitgeist · Accepted Answer · 2020-07-01 05:21:44Z

0

As you need to iterate over your objects attributes I suggest you to extract them with Object.keys(object) which you can find here:

https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/keys

I suggest you to iterate like this:

Object.keys(data).forEach(attribute => {
        data[attribute] = data[attribute].filter(value => value.values.key2 === 'abc');
})

Good luck.

answered Jul 1, 2020 at 5:21

Zeitgeist

1013 bronze badges

Collectives™ on Stack Overflow

Javascript filter arrays within an object

5 Answers 5

7 Comments

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

7 Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related