react filtering an object of arrays

Question

I'm trying to find a better way to remove value pairs of an object that contain an empty string ""

my current state is:

 this.state = {

            searchParams:{
                query: '',
                colors: [],
                text: '',
                legalities: '',
                setName: '',
                pageSize: 4
            }
}

I know this won't work with my state since it isn't an array, but something like this is what i'm trying to achieve right now

var search = this.state.searchParams.filter(function (el) {
            return el !== "";
          });

could anyone point me in the right direction and explain a better way to do this with an object, thanks :) ?

what are "value pairs" in your example? it's not clear what you want to filter — matiit
– matiit, Commented Feb 18, 2020 at 9:52
Do you need a way to traverse all the keys in the JSON and check which has empty value? — Ashish Kirodian
– Ashish Kirodian, Commented Feb 18, 2020 at 10:07

Ryan Nghiem · Accepted Answer · 2020-02-18 09:57:36Z

1

filter only use for a array, not is a object.

You can try my code

let searchParams = 
    Object.keys(this.state.searchParams)
          .filter( key => this.state.searchParams[key] !== '' );

this.setState({searchParams })

answered Feb 18, 2020 at 9:57

Ryan Nghiem

2,4482 gold badges21 silver badges31 bronze badges

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

Comments

adz5A · Accepted Answer · 2020-02-18 09:55:58Z

1

You can use Object.entries and Object.fromEntries.

const filteredObject = Object.fromEntries(
    Object.entries(searchParams)
        .filter(([key, value]) => value !== "")
);

Will create anew object with all the keys for which the value was "" removed.

answered Feb 18, 2020 at 9:55

adz5A

2,03211 silver badges11 bronze badges

Comments

Avanthika · Accepted Answer · 2020-02-18 09:57:29Z

1

You can filter it this way with reduce method. Since it is an object, you have to combine object prototype .keys with array prototype .reduce to filter it.

const searchParams = {
  query: '',
  colors: [],
  text: '',
  legalities: '',
  setName: '',
  pageSize: 4
}

const notEmpty = Object.keys(searchParams).reduce((nonEmptyObj, currentKey) => {
  if (searchParams[currentKey] !== '') {
    nonEmptyObj[currentKey] = searchParams[currentKey];
  }
  return nonEmptyObj;
}, {})

console.log(notEmpty);

answered Feb 18, 2020 at 9:57

Avanthika

4,1821 gold badge15 silver badges19 bronze badges

Comments

Waleed Azhar · Accepted Answer · 2020-02-18 10:01:27Z

1

use Object.keys. In your case like this: var search = Object.keys(this.state.searchParams).filter(el => { // do something })

answered Feb 18, 2020 at 10:01

Waleed Azhar

721 silver badge5 bronze badges

Comments

Abdullah Saud · Accepted Answer · 2020-02-18 10:05:39Z

1

the most simple way is by using Object.keys method and then iterate the whole object. then check if searchParams[ele] is true and add in another object.

    var newObj = {};
    Object.keys(this.state.searchParams).forEach(ele => {
      if (searchParams[ele]) {
        newObj = { ...newObj, [ele]: searchParams[ele] };
      }
    });
    console.log(newObj); // new object generated with empty values eliminated
this.setState({searchParams:newObj})

answered Feb 18, 2020 at 10:05

Abdullah Saud

763 bronze badges

Comments

Aveenash Mandhwani · Accepted Answer · 2020-02-18 11:39:55Z

If you want to filter out empty strings and strings (with white spaces only) as well, then we have trim the string and then check its length. If its string and its length is 0 after trimming, then its considered as empty and will be filtered out.

const params = this.state.searchParams

Object.keys(this.state.searchParams).filter(key => 
  !(typeof params[key] === 'string' && params[key].trim().length === 0)
)

If you don't want to trim, then:

const params = this.state.searchParams

Object.keys(this.state.searchParams).filter(key => params[key] !== '')

I would highly suggest you to not to use semicolon, as it takes space and JS can now ignore semicolon as well. Also, not to use double quotes unless required.

Collectives™ on Stack Overflow

react filtering an object of arrays

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related