Discussion :

[sylvain257]

Bonjour,

J'aimerais créer une auto-complétion à partir d'une API.

L'API redescend d'une base de données, une liste avec le nom de la commune, le code de la commune et le code du pays.

La réponse de l'API est un objet json comme suit:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
    "total": 2,
    "records": [
        {
            "code_pays": "SUI",
            "code_entite": "0842",
            "nom_entite": "Lauenen"
        },
        {
            "code_pays": "SUI",
            "code_entite": "0863",
            "nom_entite": "Burgistein"
        }
}

Chaque valeur est associée à une clé.


Pour le développement d'une application, la méthode autocomplétion de Materialize (Javascript) demande un formatage de l'objet json comme suit

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
var json = {
"Microsoft":"Bill Gates",
"Apple":"Steve Jobs"
}

Chaque valeur est associée à une clé de valeur variable.

J'ai posé la même question sur le forum PHP dans l'optique de créer une autocomplétion côté API.
Cette question sur le forum JS dans l'option de formater le json côté front.

Est ce que qqun aurait une solution pour générer un objet JSON comme celui là ?

Merci pour vos retours

Sylvain

[Toufik83]

Bonjour,

Vous devez parcourir le jsonApi.records avec une boucle (map dans cet exemple) comme suite :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
let jsonApi={/*L'objet de l'API....*/}
,jsonAutocomplete=jsonApi.records
.map(elem=>{
      return {"Nom Entite":elem.nom_entite,"Code Entite":elem.code_entite,"Code pays":elem.code_pays};
});
console.log("json :",jsonAutocomplete);
/*Résultat :
[
    {
        "Nom Entite": "Lauenen",
        "Code Entite": "0842",
        "Code pays": "SUI"
    },
    {
        "Nom Entite": "Burgistein",
        "Code Entite": "0863",
        "Code pays": "SUI"
    }
]*/

Ou bien affecter directement jsonApi.records à l'objet d'auto-complétion si vous voulez garder les mêmes noms de clés originales

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

let jsonAutocomplete=jsonApi.records;

[sylvain257]

@Toufik, j'ai essayé ce code que j'ai adapté à mon besoin.

Je me suis finalement rabattu sur l'autocomplete de DevBridge (devbridgeAutocomplete) qui demande des données moins formatées. Je le conseille, pas très difficile à mettre en place, et surtout bien adapté à des retour de bases de données et de réponses d'API.

A+

Sylvain