Iterating through Filtered Array

Question

I have a pretty complex JSON data set that I have managed to filter by serial_number. However, the hurdle now is that although it is giving me the expected output, it isn't in the form I quite expected as I was under the impression that the output returned would only have one array with the match. However, if the output returned is correct, then any explanation is welcome. Below is the JSON and the code:

JSON

[
    {
        "district": "Kolkata",
        "ward_no": [
            {
                "ward": "6",
                "grievance": [
                    {
                        "serial_number": "0001",
                        "name" : "Mr.A"
                    },
                    {
                        "serial_number": "0002",
                        "name" : "Mr.B"
                    }
                ],
                "general": [
                    {
                        "serial_number": "0003",
                        "name" : "Mr.C"
                    },
                    {
                        "serial_number": "0004",
                        "name" : "Mr.D"
                    }
                ]
            },
            {
                "ward": "7",
                "grievance": [
                    {
                        "serial_number": "0005",
                        "name" : "Mr.E"
                    },
                    {
                        "serial_number": "0006",
                        "name" : "Mr.F"
                    }
                ],
                "general": [
                    {
                        "serial_number": "0007",
                        "name" : "Mr.G"
                    },
                    {
                        "serial_number": "0008",
                        "name" : "Mr.H"
                    }
                ]
            }
        ]
    },
    {
        "district": "Hooghly",
        "ward_no": [
            {
                "ward": "8",
                "grievance": [
                    {
                        "serial_number": "0009",
                        "name" : "Mr.I"
                    },
                    {
                        "serial_number": "0010",
                        "name" : "Mr.J"
                    }
                ],
                "general": [
                    {
                        "serial_number": "0011",
                        "name" : "Mr.K"
                    },
                    {
                        "serial_number": "0012",
                        "name" : "Mr.L"
                    }
                ]
            },
            {
                "ward": "9",
                "grievance": [
                    {
                        "serial_number": "0013",
                        "name" : "Mr.M"
                    },
                    {
                        "serial_number": "0014",
                        "name" : "Mr.N"
                    }
                ],
                "general": [
                    {
                        "serial_number": "0015",
                        "name" : "Mr.O"
                    },
                    {
                        "serial_number": "0018",
                        "name" : "Bruno Fernandes"
                    }
                ]
            }
        ]
    }
]

The code

const query = {
        serial_number : "0018"
    };

    const filterData = dummyData.map(value => value.ward_no.map(
        value => {
            if(value.grievance.filter(value => value.serial_number === query.serial_number)) {
                return value.grievance.filter(value => value.serial_number === query.serial_number)
            } else {
                return value.general.filter(value => value.serial_number === query.serial_number)
            }
        }
    ));

    console.log(filterData)

The output currently returns nothing:

As per the query I'm taking i.e serial_number = 0018, the output I expect is

{
   "serial_number": "0018",
   "name" : "Bruno Fernandes"
}

I would also like to know if using the map method would let me iterate through the above properties to be able to display them in elements.

Answer 1

You could filter the nested parts and return either the parts, if the returned array has a length greater than zero.

You coudl take a recursive approach and check every array for an object with the wanted value.

const
    search = o => {
        let result = [];
        Object.entries(o).some(([k, v]) => {
            if (k in query && query[k] === v) return result.push(o);
            if (Array.isArray(v)) {
                const temp = v.flatMap(search);
                if (temp.length) return result.push(...v.flatMap(search));
            }
        });
        return result;
    },
    data = [{ district: "Kolkata", ward_no: [{ ward: "6", grievance: [{ serial_number: "0001", name: "Mr.A" }, { serial_number: "0002", name: "Mr.B" }], general: [{ serial_number: "0003", name: "Mr.C" }, { serial_number: "0004", name: "Mr.D" }] }, { ward: "7", grievance: [{ serial_number: "0005", name: "Mr.E" }, { serial_number: "0006", name: "Mr.F" }], general: [{ serial_number: "0007", name: "Mr.G" }, { serial_number: "0008", name: "Mr.H" }] }] }, { district: "Hooghly", ward_no: [{ ward: "8", grievance: [{ serial_number: "0009", name: "Mr.I" }, { serial_number: "0010", name: "Mr.J" }], general: [{ serial_number: "0011", name: "Mr.K" }, { serial_number: "0012", name: "Mr.L" }] }, { ward: "9", grievance: [{ serial_number: "0013", name: "Mr.M" }, { serial_number: "0014", name: "Mr.N" }], general: [{ serial_number: "0015", name: "Mr.O" }, { serial_number: "0018", name: "Bruno Fernandes" }] }] }],
    query = { serial_number : "0018" },
    result = data.flatMap(search);

console.log(result);

Answer 2

You need to extract and flatten the grievance and general array using array#flatMap and then filter on serial_number using array#filter.

const dummyData = [ { "district": "Kolkata", "ward_no": [ { "ward": "6", "grievance": [ { "serial_number": "0001", "name" : "Mr.A" }, { "serial_number": "0002", "name" : "Mr.B" } ], "general": [ { "serial_number": "0003", "name" : "Mr.C" }, { "serial_number": "0004", "name" : "Mr.D" } ] }, { "ward": "7", "grievance": [ { "serial_number": "0005", "name" : "Mr.E" }, { "serial_number": "0006", "name" : "Mr.F" } ], "general": [ { "serial_number": "0007", "name" : "Mr.G" }, { "serial_number": "0008", "name" : "Mr.H" } ] } ] },{ "district": "Hooghly", "ward_no": [ { "ward": "8", "grievance": [ { "serial_number": "0009", "name" : "Mr.I" }, { "serial_number": "0010", "name" : "Mr.J" } ], "general": [ { "serial_number": "0011", "name" : "Mr.K" }, { "serial_number": "0012", "name" : "Mr.L" } ] }, { "ward": "9", "grievance": [ { "serial_number": "0013", "name" : "Mr.M" }, { "serial_number": "0014", "name" : "Mr.N" } ], "general": [ { "serial_number": "0015", "name" : "Mr.O" }, { "serial_number": "0018", "name" : "Bruno Fernandes"} ] } ] } ],
      query = { serial_number : "0018" },
      filterData = dummyData
        .flatMap(({ward_no}) => ward_no
              .flatMap(o => ['grievance', 'general'].flatMap(k => o[k])))
        .filter(o => o.serial_number === query.serial_number);
console.log(filterData)