Filtering Columns from JSON File

Question

I have a project where i have a Json file which looks something like below I am currently using Older Material UI 4 version with React and I need to filter columns and for each columns it should filter the same file

For example Name Roll No Result
each of these act like filters and should filter out from same json file and the result should be a drop down

Code is like this

const rows = [
  {
    name: 'Abhi',
    roll: 1,
    result: 'Pass',
  },{
    name: 'Risho',
    roll: 2,
    result: 'NA',
  },{
    name: 'Foaru',
    roll: 3,
    result: 'A'Bsent,
  },
];

const ResultTable = props => {
  const {
    HeaderDataTable: { headers }
  } = HOME_TEXT;
  const [copyList, setCopyList] = useState(rows);
  const requestSearch = searched => {
    setCopyList(rows.filter(item => item.name.includes(searched)));
  };
  const columnHeaders = Object.values(headers);
  return (
    <TableContainer className='franchise-container-dashboard'>
      <Table
        stickyHeader
      >
        <TableHead  >
          <TableRow >
            {columnHeaders.map(header => (
              <TableCell
                key={header}
                style={{ backgroundColor: '#022a48' }}
              >
                {header} // I have constant defined for that  which is : name ,Roll no ,result 
              </TableCell>
            ))}
          </TableRow>
        </TableHead>
        <TableBody        >
          <TableRow>
            <TableCell>
              <TextField
                variant='outlined'
                placeholder='Search Name'
                type='search'
                onInput={e => requestSearch(e.target.value)}
                style={{ width: '100%' }}
              />
            </TableCell>
            <TableCell>
              <Typography variant='body2'>
                <TextField
                  variant='outlined'
                  placeholder='Search Roll'
                  type='search'
                  onInput={e => requestSearch(e.target.value)}
                  style={{ width: '100%' }}
                />{' '}
              </Typography>
            </TableCell>
            <TableCell>
              <Typography variant='body2'>
                <TextField
                  variant='outlined'
                  placeholder='Search Result'
                  type='search'
                  onInput={e => requestSearch(e.target.value)}
                  style={{ width: '100%' }}
                />
              </Typography>
            </TableCell>            
          </TableRow>
        </TableBody>
        {(copyList.length > 0 ? copyList : originalList).map(
        (class, index) => ( <TableRow     key={index} >
            <TableCell >
              <Typography variant='body2'>{class.Name}</Typography>
            </TableCell>
            <TableCell>
              <Typography variant='body2'>
                {class.roll}
              </Typography>
            </TableCell>
            <TableCell >
              <Typography variant='body2'>{class.result}</Typography>
            </TableCell>
          </TableRow>
      </Table>
    </TableContainer>
  );
};

export default ResultTable;

Can any one please help me or clarify me what i am doing wrong?

i want to get a filter for all column on the samejson file that is if i fill all the filters as well it should filter those file also possible can result be converted drop down

Answer 1

const searchColumns = Object.keys(rows[0]);
const requestSearch = searched => {
  const filterRows = rows.filter(each => {
      var containRow = false;
      for (var i = 0; i < searchColumns.length; i++) {
        if (each[searchColumns[i]] && each[searchColumns[i]].toString().indexOf(searched ) !== -1) {
          containRow = true;
        }
      }
      if (containRow) {
        return each;
      }
    })
    return filterRows ;
}

1. below is the example for searching for row 1.

requestSearch('Abhi');

Answer 2

    const [copyList, setCopyList] = useState(rows);
    const [searchColumnsList, setSearchColumnsList] = useState(columnHeaders.map(x=> {return {name:x,searchText:null}}));
    const requestSearch = (searched,fieldName) => {
        let searchColumnIndex = searchColumnsList.findIndex(x=>x.name === fieldName);
        searchColumnsList[searchColumnIndex].searchText = searched;
        setSearchColumnsList(searchColumnsList);
        const searchColumns = searchColumnsList.filter(x=> x.searchText !== null && x.searchText !== '');
        const filterRows = searchColumns.length > 0 ? rows.filter(each => {
            let containRow = false;
            for (var i = 0; i < searchColumns.length; i++) {
                if (each[searchColumns[i].name] && each[searchColumns[i].name].toString().indexOf(searchColumns[i].searchText) !== -1) {
                containRow = true;
              }
              else{
                containRow = false;
              }
            }
            if (containRow) {
              return each;
            }
        }) : rows;
        setCopyList(filterRows);
    };

searchColumnsList this list variable will store the searches for every column.

jsx code for event requestSearch

<TableBody>
            <TableRow>
              <TableCell>
                <TextField
                  variant='outlined'
                  placeholder='Search Name'
                  type='search'
                  onInput={e => requestSearch(e.target.value,'name')}
                  style={{ width: '100%' }}
                />
              </TableCell>
              <TableCell>
                <Typography variant='body2'>
                  <TextField
                    variant='outlined'
                    placeholder='Search Roll'
                    type='search'
                    onInput={e => requestSearch(e.target.value,'roll')}
                    style={{ width: '100%' }}
                  />{' '}
                </Typography>
              </TableCell>
              <TableCell>
                <Typography variant='body2'>
                  <TextField
                    variant='outlined'
                    placeholder='Search Result'
                    type='search'
                    onInput={e => requestSearch(e.target.value,'result')}
                    style={{ width: '100%' }}
                  />
                </Typography>
              </TableCell>            
            </TableRow>
          </TableBody>