I have a huge set of JSON data which I consider to be pretty complex when it comes to filtering data out of it. The idea is to take inputs from the user from the District, Ward No, and Categories dropdowns and use those to filter out the data i.e (grievances, general, urgent, and service), and display their properties in the table below. So like let's say if the selected value from the dropdown is "Grievances", it should show all the properties from the grievances array in the table. I have tried using the filter method by taking hardcoded inputs to see if the console would print anything or not but apparently it doesn't. I don't think I'll be able to move any further without support on this. Below, you will find a snippet of the dropdowns, the JSON and the code that I tried for testing.
P.S Please ignore the data on the table as it is only hardcoded. The picture is only to give you a basic idea of what I intend to do once I get the correct resolution for the code I have written for testing.
JSON(Please note that every district has 3 ward in total. For example, in this case, the ward is 6 which has the following arrays namely "grievance", "general", "urgent", "services")
[
{
"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"
}
]
}
]
}
]
The code(The query object is to store the values received from the dropdowns dynamically. This right now is hardcoded and once I have the solution, I believe I'll be able to manage the rest)
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>
);
}
