ancrage sur un fichier json

charlene90
Javascript

Bonjour à tous,

Je bloque depuis un petit moment sur la mise en place d'un ancrage.
Je m'explique : j'ai un fichier json contenant mes data à savoir le nom et la description de plusieurs villes. Sur ma page d'accueil, j'ai créé un cloud 3d rotatif avec le nom des différentes villes. J'aimerai lier les noms du cloud avec les descriptions plus bas sur la page.
Une idée comment créer un id pour effectuer l'ancrage ?
Le script de l'importation des données json :

$.getJSON( "data.json", function( data ) {

    var message = "";

    for (var i=0; i < data.length; i++) {

            message += data[i].id
            message += "<h1>" + data[i].nom + "</h1>"               
            message += "<h2>" + data[i].titre + "</h2>"
            message += "<img src=" + data[i].vignette + ">"
            message += "<h3>Population: " + data[i].pop + "</h3>"
            message += "<p>" + data[i].description + "</p>" + "</br>" + "</br>"

        document.getElementById("sortie").innerHTML = message

    };

});

Merci mille fois d'avance !!!

3 réponses

Huggy

Si tu mets un id sur chaque description (par exemple id = 'ville' + i )
Tu pourrais mettre un lien sur la vignette ou sur le nom (une ancre)

...
message += "<a href='#ville" + i + " ' ><img src=' " + data[i].vignette + " '></a>"
...
message += "<p id='ville" + i + " '>" + data[i].description + "</p>" + "</br>" + "</br>"
charlene90
Auteur

J'ai essayé mais sans succès :(
J'ai dû faire faux quelque part.
J'ai suivi exactement ta marche à suivre mais rien :(

Du coup, dans le fichier json, j'ai écrit pour chaque ville : "id": "lenomdelaville", (par exemple berlin, newYork, etc)
Et je ne sais pas comment l'adapter au script. J'aimerai mettre l'ancrage sur le nom (data[i].nom)
Est-ce possible ?

Huggy

Pour mettre le lien sur le nom, tu fais en sorte que la balise A entoure ta balise h1 du nom
l'idée de prendre le nom de la ville, c'est risqué s'il y a des espaces ou des caractères interdits comme dans "villeneuve d'ascq"