Filter out null and empty values from JSON array in react

Question

How can I add an if statement or filter out null and empty values in my code? I need to remove/ not show the name value that is null or empty.

componentDidMount() {
    fetch('https://url')
        .then(res => res.json())
        .then((data) => {
            data.sort(function (y,x){
                return y.listId - x.listId;
          })
          data.sort();
          this.setState({ items: data })
          console.log(this.state.items)
     })
     .catch(console.table)
  }

  return (
      <div className="list-container">
          <h1>My List</h1>
          {this.state.items.map((item) => (
              <div className="list">
          )}

Here's an example of my json array:

[
    {"id": 755, "listId": 2, "name": ""},
    {"id": 203, "listId": 2, "name": ""},
    {"id": 684, "listId": 1, "name": "Item 684"},
    {"id": 276, "listId": 1, "name": "Item 276"},
    {"id": 736, "listId": 3, "name": null},
    {"id": 926, "listId": 4, "name": null}
]

Christos Panagiotakopoulos · Accepted Answer · 2021-06-02 18:26:30Z

1

You can use the filter array method in this way:

data.filter(d => d !== "" && d !== null)

Add this line before the sorting function like this:

componentDidMount() {
    fetch('https://url')
    .then(res => res.json())
    .then((data) => {
      const filteredData = data.filter(d => d !== "" && d !== null)
      filteredData.sort(function (y,x){
        return y.listId - x.listId;
      })
      filteredData.sort();
      this.setState({ items: filteredData })
      console.log(this.state.items)
    })
    .catch(console.table)
}

Also (probably unrelated), why are you sorting two times?

answered Jun 2, 2021 at 18:26

Christos Panagiotakopoulos

8235 silver badges15 bronze badges

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

Comments

Shyam · Accepted Answer · 2021-06-02 18:37:08Z

0

let data = [
{"id": 755, "listId": 2, "name": ""},
{"id": 203, "listId": 2, "name": ""},
{"id": 684, "listId": 1, "name": "Item 684"},
{"id": 276, "listId": 1, "name": "Item 276"},
{"id": 736, "listId": 3, "name": null},
{"id": 926, "listId": 4, "name": null}] 

console.log(data.filter(({name}) => name))

answered Jun 2, 2021 at 18:37

Shyam

5,5071 gold badge15 silver badges23 bronze badges

Comments

pbrune · Accepted Answer · 2021-06-02 18:52:11Z

0

You can filter the array by doing this:

const items = this.state.items.filter(item => item.name !== '' && item.name !== null);

This will return a new array that doesn't have items with a blank or null name.

Edit for comment:

You can add this in your code like this:

componentDidMount() {
    fetch('https://url')
    .then(res => res.json())
    .then((data) => {
      const filteredData = data.filter(item => item.name !== '' && item.name !== null);
      filteredData.sort(function (y,x){
        return y.listId - x.listId;
      })
      filteredData.sort();
      this.setState({ items: filteredData })
      console.log(this.state.items)
    })
    .catch(console.table)
}

edited Jun 2, 2021 at 18:52

answered Jun 2, 2021 at 18:26

pbrune

5006 silver badges24 bronze badges

4 Comments

Andrea Over a year ago

Where in my code can I add the suggested line of code?

pbrune Over a year ago

You can add that before setting the state like @christos stated in their answer. I will edit my answer

Andrea Over a year ago

Thank you for the edit. I tried the suggested code and it gives me back an empty array @pbrune

pbrune Over a year ago

Sorry about that. I was using this.state.items instead of data. I have updated the code snippet in my original answer. Let me know if that works for you

Collectives™ on Stack Overflow

Filter out null and empty values from JSON array in react

3 Answers 3

Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related