Salut à tous 

Je travaille sur une application avec le framework Django, actuellement, je développe une barre de recherche avec autocomplétion.

Je rencontre un problème, lors de la saisie d'un caractère dans la barre de recherche, je ne vois pas les champs "Nom" et "Prénom" à la place, je vois " [object Object] ".

Je bloque dessus depuis quelques heures 

models.py

class User(models.Model):
    Nom = models.CharField(max_length=30)
    Prenom = models.CharField(max_length=30)

    def __str__(self):
        return self.Nom

urls.py

from django.urls import path

from poste.views import Poste
from poste.views import Home, PosteSearch, PosteRT, PosteP, CommentCreateView, CommentUpdateView, SchemaPreferentielUpdateView, AutreParticulariterUpdateView
from poste.views import showList, search_poste, Historique, autocomplete, SupprimerCommentaire
app_name = "poste"

urlpatterns = [
    path('', Home.as_view(), name="Home"),
    path('search', search_poste),

views.py 

def search_poste(request):
    libelle = request.GET.get('nom')
    payload = list()
    if libelle:
        poste_obj = User.objects.filter(Prenom__icontains=libelle)

        for p_o in poste_obj:
            data = {}
            data = [{'id': p_o.id, 'Nom': p_o.Nom, 'Prenom': p_o.Prenom}]
            payload.append(data)
            print(data)
    return JsonResponse({'status': 200, 'data': payload})

base.html

<div id="autocomplete">
     <input type="text"  class="autocomplete-input"      id="autocomplete"    placeholder="Poste...">
     <ul class="autocomplete-result-list"></ul>
</div>

<script>
    new Autocomplete('#autocomplete', {

            search : input=>{
                console.log(input)
                const url = `/search?nom=${input}`
                return new Promise(resolve =>{
                    fetch(url)
                    .then(response => response.json())
                    .then(data => {
                        console.log(data)
                        resolve(data.data)
                    })
                })
            },
            onSubmit : result => {
                window.open(`poste-detail/${result}`)
            }
        })
</script>

Interface 

Hello,

J'ai pas trop de compétences en JavaScript, mais il me semble y voir une histoire d'indice pas pris en compte ce qui donne ce résultat sous forme de listes [object Object]

Que disent les 8 erreurs présentent dans la console ?

Je pense vu le retour de la console que quelque chose comme ça suffirait à parcourir ton objet

data.forEach(item => {

    for(key in item)
    {
        let nom = item[key][0].Nom
        let prenom = item[key][0].Prenom
    }

})

-
Edité par zvheer 24 mai 2022 à 12:08:23

zvheer a écrit:

Que disent les 8 erreurs présentent dans la console ?

J'ai plus les 8 erreurs, j'ai ça à la place 

Ok pas réellement des erreurs 

J'avais fait un up au dessus tu peux essayer d'insérer cette boucle dans promesse et rajouter console.log(`nom -> ${nom} - prenom -> ${prenom}`) voir ce que ça donne

<script>
    new Autocomplete('#autocomplete', {
            search : input=>{
                console.log(input)
                const url = `/search?nom=${input}`
                return new Promise(resolve =>{
                    fetch(url)
                    .then(response => response.json())
                    .then(data => {
                         console.log('data',data)
                        const result = data.data.map( e => {
                            console.log('e',e.libelle)
                            return e
                             })
                        console.log('result',result)
                        resolve(result)
                    })
                })
            },
            getResultValue : result => result.libelle + ' ' + result.tension,
            onSubmit : result => {
                window.open(`http://127.0.0.1:8000/poste-detail/${result.id}`)
            }
        })
</script>

views.py 

def search_poste(request):
    libelle = request.GET.get('nom')
    payload = list()
    if libelle:
        poste_obj = Poste.objects.filter(libelle__icontains=libelle)

        for p_o in poste_obj:
            # data = {}
            data = {'id': p_o.id, 'libelle': p_o.libelle, 'tension': p_o.Tension.libelle}
            payload.append(data)
    return JsonResponse({'status': 200, 'data': payload})

Problème résolu, il suffisait de boucler sur l'affichage comme la indiquer @zvheer 

-
Edité par RecMan 25 mai 2022 à 9:37:00