简体   繁体   English

从 JSON 文件中过滤列

[英]Filtering Columns from JSON File

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我有一个项目,其中有一个 Json 文件,如下所示我目前正在使用旧版 Material UI 4 和 React,我需要过滤列,对于每一列,它应该过滤同一个文件

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这些中的每一个都像过滤器一样,应该从同一个 json 文件中过滤掉,结果应该是一个下拉列表

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我想为同一个 json 文件上的所有列获取一个过滤器,如果我也填充所有过滤器,它也应该过滤那些文件也可能会导致转换下拉

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.下面是搜索第 1 行的示例。

requestSearch('Abhi'); requestSearch('Abhi');

    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. searchColumnsList 这个列表变量将存储每一列的搜索。

jsx code for event requestSearch事件请求搜索的 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>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM