Filter not working on Object with null Value in React

Question

I have already tried and tested many concepts and code snippet but none is working. I want to filter my data (such as if I type 'a' it should return data containing 'a', if no values typed in search box then it should return all the data) Its working fine without any null value in object, but for the 2nd api that is fetching some nullable values its throwing error.

Code working fine:

 return Object.keys(item).some(key =>
        item[key].includes(filterItem));

I tried to fix, by removing null value and given only the string data keys, but not working fine. Any help would be appreciated.

Fixes I tried to implement:

Object.keys(item).forEach(k => {
           if (item[k] !== null) {
            console.log(item[k])
             return Object.keys(item).some(key =>
              item[key].includes(filterItem)
            );
          }
   })

Error:

Edit:

/* Input Data

const input=[{DeviceType: "CONSUMER", DeviceSubType: "CARD", status: "ACTIVE", categoryname: null, count: 5}
 {DeviceType: "CONSUMER", DeviceSubType: "CARD", status: "AVAILABLE", categoryname: null, count: 2}
2: {DeviceType: "MERCHANT", DeviceSubType: null, status: "ACTIVE", categoryname: "Agent", count: 2}
 {DeviceType: "MERCHANT", DeviceSubType: null, status: "ACTIVE", categoryname: "MerchantOffline", count: 2}
 {DeviceType: "MERCHANT", DeviceSubType: null, status: "ACTIVE", categoryname: "MerchantOnline", count: 1}
 {DeviceType: "MERCHANT", DeviceSubType: null, status: "AVAILABLE", categoryname: null, count: 3}
 {DeviceType: "MERCHANT", DeviceSubType: "XipPOSApp", status: "AVAILABLE", categoryname: null, count: 3}] */
 
 import React, { Component } from 'react'
import "../css/Search.css"
import ReportList from './reportList'


export default class Search extends Component {
  constructor(props) {
    super(props)
    this.state = {
      showData: this.props.list,
      filterItem: "",
      filterCount: "initial"
    }
  }


  handleChange = (e) => {
    this.setState({
      filterItem: e.target.value.toUpperCase(),
      filterCount: "called"
    })

  }



  render() {
    //filtering the data
    const { filterItem, showData } = this.state;

    // console.log(showData)
    const filteredData = showData.filter(item => {

      if (item != null && typeof item != "number") {

        // console.log("item")
        // console.log(item)
        // Object.keys(item).forEach(k => {
        //   if (item[k] !== null && filterItem!==null) {
        //     console.log(item[k])
        //     return Object.keys(item).some(key =>{
        //       console.log(item[key])
        //       item[key].includes(filterItem)
        //     }
           
        //     );
        //   }
        // })

        //working
        return Object.keys(item).some(key =>
         
          item[key].includes(filterItem)
       
          
         
        );
      }
    });
    console.log("filteredData")
    console.log(filteredData)


    const checkValidation = () => {
      if (this.state.filterCount === "initial") {
        return <ReportList data={filteredData} />
      }
      else if (this.state.filterCount === "called") {
        return filteredData != "" ? <ReportList data={filteredData} /> : "NO DATA FOUND"

      }
    }



    return (
      <div>
        <input type="text" placeholder="Search.." onChange={this.handleChange} className="search" />
        <div >{checkValidation()} </div>



      </div>
    )
  }
}

attached the code snippet with input data Output: must give card data on typing "ca" in search box

Answer 1

You need to validate your item[key].

return Object.keys(item).some(key =>
    (typeof item[key] === 'string' && item[key].includes(filterItem)) 
    || (typeof item[key] === 'number') && item[key] === Number(filterItem))