Ionic Search Nested arrays


#1

I want to know how to search inside nested array using typescript For example if user inputs KNOR I want to show the entire group instead of the single item.

Below is the JSON Structure

{
        group_id: 61,
        sortid: "1",
        group_items: [
            {
                id: "1",
                code: "1",
                name: "ASTRA MARGARINE 1KG",
                bulkprice: "800.00",
                description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ",
                picture: [
                            "img/itemlist/astra/a1.png",
                            "img/itemlist/astra/a2.png"
                        ],
                qty: "2",
                active: "0",
                availableqty: "100",
                itemprice: "400.00"
            },
            {
                id: "1",
                code: "4",
                name: "KNOR CHICKEN CUBE 28S CONTAINER 280G",
                bulkprice: "700.00",
                description: " Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam at enim sit amet ligula semper tempus.",
                picture: [
                            "img/itemlist/knor/k1.png",
                            "img/itemlist/knor/k2.png"
                        ],
                qty: "10",
                active: "0",
                availableqty: "1",
                itemprice: "25.00"
            }
        ]
    },
{
      group_id: 64,
      sortid: "2",
      group_items: [{
               id: "1",
               code: "3",
               name: "FLORA MARGARINE LARGE 500G",
               bulkprice: "20.00",
               description: "Aenean vehicula imperdiet ex, in lacinia magna 
               bibendum sed.",
               picture: [
                          "img/itemlist/flora/f1.1.png",
                          "img/itemlist/flora/f1.2.png",
                          "img/itemlist/flora/f1.png"
                        ],
               qty: "1",
               active: "0",
               availableqty: "500",
               itemprice: "700.00"
                }]

       }

Result I want is If user search for Knor

        group_id: 61,
        sortid: "1",
        group_items: [
            {
                id: "1",
                code: "1",
                name: "ASTRA MARGARINE 1KG",
                bulkprice: "800.00",
                description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ",
                picture: [
                            "img/itemlist/astra/a1.png",
                            "img/itemlist/astra/a2.png"
                        ],
                qty: "2",
                active: "0",
                availableqty: "100",
                itemprice: "400.00"
            },
            {
                id: "1",
                code: "4",
                name: "KNOR CHICKEN CUBE 28S CONTAINER 280G",
                bulkprice: "700.00",
                description: " Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam at enim sit amet ligula semper tempus.",
                picture: [
                            "img/itemlist/knor/k1.png",
                            "img/itemlist/knor/k2.png"
                        ],
                qty: "10",
                active: "0",
                availableqty: "1",
                itemprice: "25.00"
            }
        ]
    }}

#2

Its javascript not typescript so that nay help getting better search results

Arrays have nice methods like map and filter to iterate quickly through arrays and return values

Check https://www.w3schools.com/jsref/jsref_filter.asp

Nested arrays will require nested usage of filter and map

And the ionic doc on searchbar has info on how to this with a searchbar


#3

can you post a working example ?


#4
        let searchValue = 'KNOR';
        let result: any[] = source.filter((group: any) => {
            let matches: any[] = group.group_items.filter((item: any) => {
                return item.name.indexOf(searchValue) !== -1;
            });
            return matches.length > 0;
        });