Dieses Element anzeigen, ohne Code jedes Mal zu wiederholen

Question

Ich zeige/hidding Daten von Json auf Klick auf einen Marker, der total gut funktioniert.

Answer 1

In einem kürzeren Weg Sie über die json Objektschlüssel laufen kann mit Object.keys() und 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

Sie können es tun, indem über die Eigenschaften in der JSON-Objekt Looping wie so

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

Eine letzte Sache, die ich versuche zu tun ist, die Json-Daten aus einer externen Datei

aufrufen Ich habe versucht, die Funktion zu wickeln in

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

ohne Erfolg ...

es mir auf der Linie erzählt, dass json (in der Konsole) nicht definiert ist

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

irgendeine Idee?

Vielen Dank!

--update JSON STRUKTUR ----

{ 
    "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", 
     } 
    ] 
}