Afficher cet élément sans avoir à répéter le code à chaque fois

Question

Je montre des données de Json en cliquant sur un marqueur qui fonctionne parfaitement.

Answer 1

D'une manière plus courte, vous pouvez parcourir les clés d'objet json à l'aide Object.keys() et Array.prototype.forEach():

$.getJSON('js/data.json', function (json) { // <-- json variable 
    Object.keys(json).forEach(function (country) { 
    $(".marker." + country.toLowerCase()).on("click", function() { 
     $("#show").html(
     "Image: <img src=" + json[country][0].image + ">" + 
     "| Description: <h1>" + json[country][0].description) + "</h1>"; 
    }); 
    }); 
}); 

Answer 2

Vous pouvez le faire en boucle sur les propriétés de votre objet JSON comme si

var json = { 
    "France": [{ 
    "image": "img/ausralia.jpg", 
    "description": "number django 1" 
    }], 
    "Australia": [{ 
    "image": "img/ausralia.jpg", 
    "description": "number django 2" 
    }] 
} 

$(document).ready(function() { 
    // iterate all properties in the json object 
    for (var prop in json) { 
    if (json.hasOwnProperty(prop)) { 
     // add the marker items 
     $(".marker." + prop.toLowerCase()).on("click", function(country) { 
     $("#show").html(
      "Image : <img src=" + json[country][0].image + ">" + 
      "| Description : <h1>" + json[country][0].description) + "</h1>"; 
     }.bind(this, prop)); // prop needs to be bound so that the correct country is triggered 
    } 
    } 
}); 

Answer 3

Une dernière chose que j'essaie de faire est d'appeler les données Json à partir d'un fichier externe

J'ai essayé d'envelopper la fonction dans

$.getJSON('js/data.json', function(data) { 

sans succès ...

il me dit sur la ligne que JSON n'est pas définie (dans la console)

Object.keys(json).forEach(function (country) { 

une idée?

Merci beaucoup!

--update JSON STRUCTURE ----

{ 
    "france": [ 
     { 
      "image": "img/ausralia.jpg", 
      "description": "number django 1", 
     } 
    ], 
     "australia": [ 
     { 
      "image": "img/ausralia.jpg", 
      "description": "number django 2", 
     } 
    ], 

     "uk": [ 
     { 
      "image": "img/ausralia.jpg", 
      "description": "number django 3", 
     } 
    ] 
}