[RESOLU]Ajax avec plusieurs fichiers json

reivaxui
Javascript

Hello!
J'ai un petit probleme. Pour une app avec jquery mobile, je fais une requete pour récupérer une liste d'annonces grâce à un fichier json.

$(document).ready(function() {
    $.getJSON('annonces.json',function(data){
        $('#liste-annonces').empty();
            $.each(data.annonces , function(entryIndex, entry){
                var html = '';
                html += '<li><a href="fiche-annonce.html">' + entry.Annonce.name + '</a></li>';
                $('#liste-annonces').append(html);
            });
        });
    return false;
});

Ceci fonctionne très bien. Je souhaite que lorsque qu'un user clique sur le nom d'une annonce, il arrive sur la fiche correspondant à l'annonce. C'est là que je bloque !

J'ai pensé qu'il fallait donc récupérer le nom de l'annonce avec quelque chose comme ca : 

$.getJSON('annonce'+name+'.json',function(data)

Mais je ne vois pas du tout comment procéder. Quelqu'un a une idée ?

Merci d'avance

EDIT:
Je pense qu'il faut que je sorte les données de la fonction getjson, mais je ne vois pas comment faire.
Exemple : si je défini 

nameAnnonce = entry.Annonce.name;

et que je peux m'en servir en dehors de la fonction, ce serait parfait !

6 réponses

guillaumesp
Réponse acceptée

J'aurais plus vu un truc comme ça, par contre attention j'ai pas testé

Annonces = {};

$.getJSON('annonces/index.json',function(data){
    $('#liste-annonces').empty();
    $.each(data.annonces , function(entryIndex, entry){
        var html = '';
        Annonces[entry.Annonces.id] = {
            nom = entry.Annonce.name;
            slug = entry.Annonce.slug;
        }
        html += '<li><div class="name-annonce"><a href="#page2" data-id="'+entry.Annonce.id+'">' + nameAnnonce + '</a><div></li>';
        $('#liste-annonces').append(html);
    });

return false;
});

$('#liste-annonces li').each(function() {

    $('a').click(function(event) {
        var currentidannonce = this.attr('data-id');
        var currentannonce = Annonces[currentidannonce];
        $.getJSON('annonces/'+currentannonce.slug+'-'+currentidannonce+'.json', function(data) {
            var html = '';
            console.log( currentannonce.nom )
        });
    });

});
guillaumesp
Réponse acceptée

oui tu as raison j'ai fais ca vite fait sans verif heu en fait c'est un objet donc :

Annonces[entry.Annonces.id] = {
     nom : entry.Annonce.name,
     slug : entry.Annonce.slug
 }
guillaumesp

Je pense que tu dois avoir un identifiant unique pour chaque annonce. Sinon créer en un.
Puis mets une variable data[id] (résultat du json) globale sous forme de tableau comme ca quand tu boucles pour append le html tu ajoutes dans un attribut html un id unique que tu pourras récupérer quand l'user click sur l'annonce

reivaxui
Auteur

Oui j'ai bien un identifiant unique.
J'ai essayé ça :

nameAnnonce = ];
                idAnnonce = ];
                slugAnnonce = ];
                $.getJSON('annonces/index.json',function(data){
                    $('#liste-annonces').empty();
                    $.each(data.annonces , function(entryIndex, entry){
                        var html = '';
                        nameAnnonce = entry.Annonce.name;
                        idAnnonce = entry.Annonce.id;
                        slugAnnonce = entry.Annonce.slug;
                        html += '<li><div class="name-annonce"><a href="#page2">' + nameAnnonce + '</a><div></li>';
                        $('#liste-annonces').append(html);
                    });
                return false;
                });

                $('#liste-annonces li').each(function() {
                    $('a', this).click(function(event) {
                        $.getJSON('annonces/'+slugAnnonce+'-'+idAnnonce+'.json', function(data) {
                            var html = '';
                            console.log( data.annonce.Annonce.id )
                        });
                    });
                });

Mais au clique, il récupère uniquement la 1ère annonce a chaque fois, et non l'annonce correspondante.
Si jamais tu as une idée... :)

reivaxui
Auteur

Merci pour ta réponse.
J'ai testé, et j'ai une erreur ci-dessous :

Annonces[entry.Annonces.id] = {
                            nom = entry.Annonce.name;
                            slug = entry.Annonce.slug;
                        }

ce qui me renvoie :
SyntaxError: missing : after property id
nom = entry.Annonce.name

Je cherche à corriger ça, mais pour l'instant je bloque.
(j'ai juste également modifié la ligne this.attr('data-id') par $(this).attr('data-id').

reivaxui
Auteur

Ca fonctionne ! J'avais essayé ça effectivement, il y avait juste un s en trop à Annonces[entry.Annonce[u]s[/u].id] et j'ai également ajouté la balise *a* ici [code]var currentidannonce = $('a', this).attr('data-id');[/code] Merci beaucoup en tout cas !! J'espère que je vais réussir à m'en sortir pour le reste... :)