How to search in a nested array?

[webVerts]

I have a situation where the json structure is as follows

{
"source": [
{
"name": ["abc","def","ghi"],
"status": "ok"
},
{
...
}
]
}

with the typeahead code as below

identifier: 'name',
    transform: (data) => { 
    return data.source;
    }

I can't use it to search for "name".
Is there any workaround other than using it as one single string
"name": "abc def ghi"

[niketpathak]

Hello @webVerts ,

Currently, there exists no native mechanism to search within a nested array. So you are left with 2 options. Either flatten your array server-side or else you could use the transform callback to flatten your array on the fly. A naive example could be something like this -

   // typeahead-standalone setup config
   
    transform: (data) => { 
         const modifiedSource = data.source.reduce((acc, item) => {
               item.name.forEach(name => {    
                   acc.push({
                     ...item,
                     id: name, // while flattening the array, we create this field to be used as the identifier
                   })
               });
               
               return acc;
         }, []);
         
         return modifiedSource;
    },
    identifier: 'id'

This assumes that each string in the inner name array is unique. However, if it isn't, then use the identity() callback to generate a unique string for each suggestion.
Hope that helps!

[AlonsoK28]

How can I use your library with an API that returns the response like the following example?

{
    "resultados": [
        {
            "id": 1819,
            "titulo": "\r\nCaja de plástico con tapa de pestillos, 61 litros",
            "slug": "caja-de-plastico-con-tapa-de-pestillos-61-litros"
        },
        {
            "id": 1814,
            "titulo": "\r\nCaja hermética transparente con ruedas y agarradera 113.6 litros",
            "slug": "caja-hermetica-transparente-con-ruedas-y-agarradera-1136-litros"
        },
        {
            "id": 1821,
            "titulo": " \r\nCaja organizadora con tapa 100 Litros ",
            "slug": "caja-organizadora-con-tapa-100-litros"
        },
        {
            "id": 5063,
            "titulo": "Accesorios para Freidora",
            "slug": "accesorios-para-freidora"
        },
        {
            "id": 1834,
            "titulo": "Anaquel de plástico de 4 repisas \r\n\r\n",
            "slug": "anaquel-de-plastico-de-4-repisas"
        },
        {
            "id": 5057,
            "titulo": "Batería de cocina de color plateado",
            "slug": "bateria-de-cocina-de-color-plateado"
        },
        {
            "id": 14002,
            "titulo": "Bote de basura para oficina",
            "slug": "bote-de-basura-para-oficina"
        },
        {
            "id": 1508,
            "titulo": "Bote Sterilite para basura tapa con seguro de 28 litros",
            "slug": "bote-sterilite-para-basura-tapa-con-seguro-de-28-litros"
        },
        {
            "id": 1319,
            "titulo": "Botón de Pánico 268",
            "slug": "boton-de-panico-268"
        },
        {
            "id": 1322,
            "titulo": "Botón de Pánico PROEMERB",
            "slug": "boton-de-panico-proemerb"
        }
    ],
    "numeroResultados": 10
}

[niketpathak]

Hello @AlonsoK28 , for your case, its rather simple. You would also need to use the transform callback to return the necessary suggestions.

   // typeahead-standalone config
   
    transform: (data) => data.resultados,
    identifier: 'titulo' // assuming you want this field to be used as the identifier

[AlonsoK28]

Please add some examples about this to documentation

[authifyAlly]

@AlonsoK28
I guess the examples already given example : https://typeahead.digitalfortress.tech/#playground?id=movies-example
If you open it's JSON file, everything inside the results array is of a similar form, and the js file shows a code exactly like given above.