毎回コードを繰り返さずにこの要素を表示

Question

私はJsonからデータを表示しています。

Answer 1

のようなあなたのJSONオブジェクトのプロパティをループすることによってそれを行うことができます。

$.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

あなたがObject.keys()とArray.prototype.forEach()を使用してjsonオブジェクトキーを反復処理することができます短いようにそう

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

最後に、私がしようとしているのは、外部ファイルからJsonデータを呼び出すことです。

私はfunctioをラップしようとしました成功なし

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

...

にそれは

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

（コンソールで）JSONが定義されていないことをライン上の任意のアイデアを私に言っていますか？

ありがとうございます！

--update JSON構造----

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