javascript - 如何在 React.JS 中使用多个值过滤数据

Question

我有大量 JSON 数据，我认为从其中过滤数据时非常复杂。其想法是从“区”、“病房号”和“类别”下拉列表中获取用户的输入，并使用这些数据来过滤数据，即(申诉、一般、紧急和服务)，并在下表中显示其属性。因此，假设如果从下拉列表中选择的值是“Grievances”，它应该显示表中 grievances 数组中的所有属性。我尝试使用过滤器方法，通过硬编码输入来查看控制台是否会打印任何内容，但显然不会。如果没有这方面的支持，我认为我将无法取得进一步的进展。下面，您将找到下拉列表、JSON 和我尝试测试的代码的片段。

P.S 请忽略表中的数据，因为它只是硬编码的。该图片只是为了让您了解一旦我为测试编写的代码获得正确的解决方案后我打算做什么的基本概念。

JSON(请注意，每个区总共有 3 个 ward。例如，在本例中，ward 为 6，其具有以下数组，即 “申诉”、“一般”、“紧急”、“服务”)

[
    {
        "district": "Kolkata",    //There are two other district values as well
        "ward_no": [
            {
                "ward": "6",     
                "grievance": [
                    {
                        "serial_number": "0001",
                        "name": "Siddhartha Chatterjee"
                    },
                    {
                        "serial_number": "0002",
                        "name": "Sajujjo Ghosh"
                    }
                ],
                "general": [
                    {
                        "serial_number": "0003",
                        "name": "Dr. Partha Pratim Paul"
                    },
                    {
                        "serial_number": "0004",
                        "name": "Dr. Partha Pratim Paul"
                    }
                ],
                "urgent": [
                    {
                        "serial_number": "0005",
                        "name": "Ritwick Banerjee"
                    },
                    {
                        "serial_number": "0006",
                        "name": "Soumadip Banerjee"
                    }
                ],
                "services": [
                    {
                        "serial_number": "0007",
                        "name": "Tanajeet Biswas"
                    },
                    {
                        "serial_number": "0008",
                        "name": "Durba Chatterjee"
                    }
                ]
            }
        ]
    }
]

代码(查询对象是动态存储从下拉列表中接收到的值。现在这是硬编码的，一旦我有了解决方案，我相信我将能够管理其余的)

const Screen = () => {
    var wardNo = dummyData.map(value => value.ward_no.map(value => value.ward));
    console.log(`Ward Filter: ${wardNo}`);    //To check if all the values of ward are getting displayed
    var categorySelected = dummyData.map(value => value.types.map(value => value.category));
    console.log(`category ${category}`);     //To check if all the values of category are getting displayed
    var query = {                            
        district : "Kolkata",
        ward : "6",
        category : "Grievances"
    };
    var filteredData = dummyData.filter(value => (value.district === query.district && wardNo === query.ward && categorySelected === query.category));  //The logic I used
    console.log(`filteredData ${filteredData.length}`);    //This returns 0 stating no data got filtered at all
       
    return(
        <div>
            
        </div>
    );
}

Answer 1

首先，我想说你的 JSON 数据是纯粹结构化的。我的意思是ward_no。您的类别具有动态名称，这使得过滤数据变得更加困难，同时名称 ward 也在那里(也可以是类别名称)。作为建议，如果您可以选择像下面这样修改该部分，请考虑更改它。

  {
    district: 'Kolkata',
    ward_no: [
      {
        ward: '6',
        category: 'grievance',
        data: [
          {
            serial_number: '0001',
            name: 'Siddhartha Chatterjee',
          },
          {
            serial_number: '0002',
            name: 'Sajujjo Ghosh',
          },
        ],
      },
    ],
  },

我尝试根据您定义的参数(区、区、类别)为您制作一个过滤功能。

它根据 AND 比较过滤掉数据，例如，当传递 ward、category 时，两者都必须匹配。

// Your original data but minified
const data = [{"district":"Kolkata","ward_no":[{"ward":"6","grievance":[{"serial_number":"0001","name":"Siddhartha Chatterjee"},{"serial_number":"0002","name":"Sajujjo Ghosh"}],"general":[{"serial_number":"0003","name":"Dr. Partha Pratim Paul"},{"serial_number":"0004","name":"Dr. Partha Pratim Paul"}],"urgent":[{"serial_number":"0005","name":"Ritwick Banerjee"},{"serial_number":"0006","name":"Soumadip Banerjee"}],"services":[{"serial_number":"0007","name":"Tanajeet Biswas"},{"serial_number":"0008","name":"Durba Chatterjee"}]}]}];

/**
 * @description This function is used to filter the data based on the params
 * @param {{
 *   district: string,
 *   ward: string,
 *   category: string,
 * }} filterData
 */
function myFilter(filterData) {
  return data.filter((item) => {
    const filter = {
      byDistrict: true,
      byWard: true,
      byCategory: true,
    };
    if (filterData.district) filter.byDistrict = item.district === filterData.district;
    // Even if one ward_no.ward matches the value it's true
    if (filterData.ward) filter.byWard = item.ward_no.some((wards) => wards.ward === filterData.ward); 
    if (filterData.category)
      filter.byCategory = item.ward_no.some((wards) =>
        Object.keys(wards).some((categoryName) => categoryName !== 'ward' && categoryName === filterData.category));

    return filter.byDistrict && filter.byWard && filter.byCategory;
  });
}

console.log('1st filter', myFilter({ district: 'Kolkata', ward: '6', category: 'grievance' }));
// The second wont work as the district doesn't match
console.log('2nd filter', myFilter({ district: 'Kolkata-wrong', ward: '6', category: 'grievance' }));
// If you omit the district it will ignore its value and look for only ward and category
console.log('3rd filter', myFilter({ ward: '6', category: 'grievance' }));
// Same applies here
console.log('4th filter', myFilter({ category: 'grievance' }));