從json文件中選擇一個特定的數組

Question

我有一張歐洲地圖和一個JSON文件。 JSON文件顯示了每個國家2011年的失業率。另外在JSON文件中有x和y元素，因此我可以在地圖上的每個國家/地區頂部放置一個藍色圓圈。

我想要做的是，當我將鼠標懸停在其中一個圈子（這是一個國家）時，就是從JSON文件中獲取它的失業率並顯示它。

我的問題是如何從我的JSON文件在地圖上懸停的特定國家獲取'rate'元素？

JSON文件：

[ 
{ "year": "2011", "country": "Finland", "rate": 8.0, "x":681, "y":18 }, 
{ "year": "2011", "country": "Sweden", "rate": 7.6, "x":486, "y":114 }, 
{ "year": "2011", "country": "Estonia", "rate": 13.6, "x":625, "y":206 }, 
{ "year": "2011", "country": "Latvia", "rate": 17.1, "x":638, "y":239 }, 
{ "year": "2011", "country": "Lithuania", "rate": 16.7, "x":626, "y":274 }, 
{ "year": "2011", "country": "Denmark", "rate": 7.5, "x":388, "y":239 }, 
{ "year": "2011", "country": "Netherlands", "rate": 4.3, "x":322, "y":345 }, 
{ "year": "2011", "country": "United Kingdom", "rate": 7.7, "x": 178, "y": 281 }, 
{ "year": "2011", "country": "Ireland", "rate": 14.1, "x": 79, "y": 310 }, 
{ "year": "2011", "country": "Belgium", "rate": 7.1, "x": 306, "y": 398 }, 
{ "year": "2011", "country": "Luxembourg", "rate": 4.7, "x":328, "y":422 }, 
{ "year": "2011", "country": "Germany", "rate": 6.3, "x":402, "y":388 }, 
{ "year": "2011", "country": "Poland", "rate": 9.4, "x":574, "y":347 }, 
{ "year": "2011", "country": "Czech Republic", "rate": 6.8, "x":499, "y":419 }, 
{ "year": "2011", "country": "Slovakia", "rate": 13.6, "x":529, "y":418 }, 
{ "year": "2011", "country": "Hungary", "rate": 11.0, "x":496, "y":460 }, 
{ "year": "2011", "country": "Austria", "rate": 4.5, "x":440, "y":486 }, 
{ "year": "2011", "country": "Slovenia", "rate": 8.1, "x":481, "y":521 }, 
{ "year": "2011", "country": "France", "rate": 9.6, "x": 276, "y": 497 }, 
{ "year": "2011", "country": "Italy", "rate": 8.0, "x":448, "y":608 }, 
{ "year": "2011", "country": "Romania", "rate": 7.1, "x":681, "y":565 }, 
{ "year": "2011", "country": "Bulgaria", "rate": 11.2, "x": 671, "y": 600 }, 
{ "year": "2011", "country": "Greece", "rate": 15.2, "x": 617, "y": 693 }, 
{ "year": "2011", "country": "Spain", "rate": 20.7, "x": 150, "y": 663 }, 
{ "year": "2011", "country": "Portugal", "rate": 12.3, "x": 75, "y": 660 } 
]   

jQuery的文件

$(document).ready(function(){ 
$.getJSON("eu.json", function(data) { 
console.log("Data loaded successfully"); 
$.each(data, function(i, elem) { 
     $('<div></div>').addClass('dataPt').css({ 
      "margin-left": elem.x + "px", 
      "margin-top": elem.y + "px", 
      "border-width": elem.rate + 5 + "px" 
     }).appendTo('#map'); 
     $('div.dataPt').hover(function(){ 
    $(this).addClass("dataPtHover"); 

},function(){ 
    $(this).removeClass("dataPtHover"); 
}); 
}); 
}); 
}); 

這裏是一個這樣的jsfiddle你們能明白更多我想要做的事。

http://jsfiddle.net/RSEyg/

Answer 1

最簡單的方法是使用jQuery的數據，這樣的：（更新小提琴：http://jsfiddle.net/RSEyg/3/）

$(document).ready(function(){ 
    $.each(data, function(i, elem) { 
      $('<div></div>').addClass('dataPt').css({ 
       "margin-left": elem.x + "px", 
       "margin-top": elem.y + "px", 
       "border-width": elem.rate + 5 + "px" 
      }).appendTo('#map').data("rate", elem.rate); 

    }); 

    $('div.dataPt').hover(function(){ 
     $(this).addClass("dataPtHover"); 
     $("#unResult").text($(this).data("rate"))   

    },function(){ 
     $(this).removeClass("dataPtHover"); 
    }); 


}); 

如果您需要獲得該國的其他屬性，每個點，你可以將整個對象存儲在數據中，並根據需要訪問道具。