從 JSON 文件中過濾列

問題描述

我有一個項目，其中有一個 Json 文件，如下所示我目前正在使用舊版 Material UI 4 和 React，我需要過濾列，對於每一列，它應該過濾同一個文件

例如姓名卷沒有結果
這些中的每一個都像過濾器一樣，應該從同一個 json 文件中過濾掉，結果應該是一個下拉列表

代碼是這樣的

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;

任何人都可以幫助我或澄清我做錯了什么嗎？

我想為同一個 json 文件上的所有列獲取一個過濾器，如果我也填充所有過濾器，它也應該過濾那些文件也可能會導致轉換下拉

    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 這個列表變量將存儲每一列的搜索。

事件請求搜索的 jsx 代碼

<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>