在jQuery中從JSON提取數組值

Question

我目前正在為大學項目構建一個小型移動網絡應用程序。 我正在嘗試構建的應用程序從JSON文件中獲取各種樹的值，然后通過在HTML頁面上使用Jquery列出這些值-單擊這些列表項之一后，它將帶用戶到Google Map頁面這個想法是從JSON文件中的坐標信息繪制一個多邊形。

我的JSON文件如下所示：

    [{ 
"forestnumber":"1",
"name":"Cork Oak" ,
"imagelocation":"img/corkoak.png" ,
"scientificname":"Cork Oak" ,
"type":"Evergreen" , 
"shortdesc":"Quercus suber, commonly called the cork oak, is a medium-sized, evergreen oak tree in the section Quercus sect. Cerris. It is the primary source of cork for wine bottle stoppers and other uses, such as cork flooring. It is native to southwest Europe and northwest Africa." ,
"coordinates": [[-35.279033, 149.079420], [-35.279240, 149.081258], [-35.283641, 149.081343], [-35.283405, 149.079024]]
},{ 
"forestnumber":"2",
"name":"Local Eucalypts And Grasses" ,
"imagelocation":"img/localeucalypts.png" ,
"scientificname":"Various" ,
"type":"Evergreen" , 
"shortdesc":"There are more than 700 species of eucalyptus and are mostly native of Australia, and a very small number are found in adjacent areas of New Guinea and Indonesia. One species, Eucalyptus deglupta, ranges as far north as the Philippines." ,
"coordinates": [[-35.279136, 149.081158], [-35.279305, 149.081193], [-35.283613, 149.081276], [-35.283405, 149.07902], [-35.284155, 149.080923], [-35.284425, 149.081320], [-35.286067, 149.081197], [-35.286094, 149.080900], [-35.286328, 149.081362], [-35.285604, 149.082060], [-35.284642, 149.082469], [-35.283257, 149.082599], [-35.281447, 149.082384], [-35.280926, 149.082163], [-35.280354, 149.081800], [-35.279764, 149.081678]]
},{ 
"forestnumber":"3",
"name":"Common Fig" ,
"imagelocation":"img/figs.png" ,
"scientificname":"Ficus Carica" ,
"type":"Deciduous" , 
"shortdesc":" Although commonly referred to as a fruit, the fig is actually the infructescence or scion of the tree, known as a false fruit or multiple fruit, in which the flowers and seeds are borne." ,
"coordinates": [[-35.285872, 149.079429], [-35.285624, 149.077371], [-35.286509, 149.078898]]
}]

每個目錄林都有編號，每個坐標值是另一個數組。

我的jQuery代碼如下所示：

    $.getJSON( "js/forests.json", function( data ) {
    for (var i = 0; i <= data.length; i++) { //loop through JSON file
      var value = data[i];//set value to represent data
      var _html; // set _html as a variable
      _html = "<li class='forestlistitem' data-val='"+value.forestnumber+"'><span class='name'>"+value.name+"</span><img src='"+value.imagelocation+"' alt='"+value.name+"' class='listimage' /></li>" ;
$('#forestlistbody ul').append(_html); //append _html to the HTML of the page
$('.forestlistitem').click(function(){ //sort of a no-no but the only way i can get it to work?
    $("#forests").hide();//hides forests div in HTML
    $("homeselect").hide();//hides homeselect div in HTML
    $("trails").hide();//hides trails div in HTML
    $("#map").show();//shows map div in HTML
    initMap();//initializes map function 
    numb = $(this).data('val'); // sets global variable numb to the forest number associated with which option was clicked
    console.log(numb); // output numb variable to console in order to test that it is sending the correct number
});

問題：因此，基本上，我希望從此處完成的工作是通過將每個坐標值推入到MVCArray中來將與單擊列表項相關聯的坐標數組輸出到MVCArray中。 目前，該代碼看起來像這樣（目前，每個代碼都不是循環的，因為我不知道如何從JSON輸出它）。

    var forest = new google.maps.MVCArray();
    forest.push ( new google.maps.LatLng(-35.285872, 149.079429) );
    forest.push ( new google.maps.LatLng(-35.285624, 149.077371) );
    forest.push ( new google.maps.LatLng(-35.286509, 149.078898) );

    var polygonOptions = {path: forest};
    var polygon = new google.maps.Polygon(polygonOptions);

    polygon.setMap(map);

如果有人可以幫助我，我將不勝感激，盡管我一直不停地尋找各種資源，但我還不太清楚如何從JSON中獲取數組值並為每個推送項進入循環。 這只是第二次使用代碼，所以我還是一個新手= p

Answer 1

要將JSON解析為google.maps.Polygon對象，請將當前保存坐標的數組數組轉換為google.maps.LatLng對象（或google.maps.LatLngLiteral對象）的數組

  for (var i = 0; i < jsonData.length; i++) {
    var coordinates = [];
    for (var j = 0; j < jsonData[i].coordinates.length; j++) {
      var pt = new google.maps.LatLng(jsonData[i].coordinates[j][0], jsonData[i].coordinates[j][1]);
      coordinates.push(pt);
    }
    var polygon = new google.maps.Polygon({
      map: map,
      paths: [coordinates]
    })
  }

小提琴

代碼段：

 function initialize() { var map = new google.maps.Map( document.getElementById("map_canvas"), { center: new google.maps.LatLng(37.4419, -122.1419), zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP }); var bounds = new google.maps.LatLngBounds(); for (var i = 0; i < jsonData.length; i++) { var coordinates = []; for (var j = 0; j < jsonData[i].coordinates.length; j++) { var pt = new google.maps.LatLng(jsonData[i].coordinates[j][0], jsonData[i].coordinates[j][1]); coordinates.push(pt); bounds.extend(pt); } var polygon = new google.maps.Polygon({ map: map, paths: [coordinates] }) } map.fitBounds(bounds); } google.maps.event.addDomListener(window, "load", initialize); var jsonData = [{ "forestnumber": "1", "name": "Cork Oak", "imagelocation": "img/corkoak.png", "scientificname": "Cork Oak", "type": "Evergreen", "shortdesc": "Quercus suber, commonly called the cork oak, is a medium-sized, evergreen oak tree in the section Quercus sect. Cerris. It is the primary source of cork for wine bottle stoppers and other uses, such as cork flooring. It is native to southwest Europe and northwest Africa.", "coordinates": [ [-35.279033, 149.079420], [-35.279240, 149.081258], [-35.283641, 149.081343], [-35.283405, 149.079024] ] }, { "forestnumber": "2", "name": "Local Eucalypts And Grasses", "imagelocation": "img/localeucalypts.png", "scientificname": "Various", "type": "Evergreen", "shortdesc": "There are more than 700 species of eucalyptus and are mostly native of Australia, and a very small number are found in adjacent areas of New Guinea and Indonesia. One species, Eucalyptus deglupta, ranges as far north as the Philippines.", "coordinates": [ [-35.279136, 149.081158], [-35.279305, 149.081193], [-35.283613, 149.081276], [-35.283405, 149.07902], [-35.284155, 149.080923], [-35.284425, 149.081320], [-35.286067, 149.081197], [-35.286094, 149.080900], [-35.286328, 149.081362], [-35.285604, 149.082060], [-35.284642, 149.082469], [-35.283257, 149.082599], [-35.281447, 149.082384], [-35.280926, 149.082163], [-35.280354, 149.081800], [-35.279764, 149.081678] ] }, { "forestnumber": "3", "name": "Common Fig", "imagelocation": "img/figs.png", "scientificname": "Ficus Carica", "type": "Deciduous", "shortdesc": " Although commonly referred to as a fruit, the fig is actually the infructescence or scion of the tree, known as a false fruit or multiple fruit, in which the flowers and seeds are borne.", "coordinates": [ [-35.285872, 149.079429], [-35.285624, 149.077371], [-35.286509, 149.078898] ] }]; 

 html, body, #map_canvas { height: 100%; width: 100%; margin: 0px; padding: 0px } 

 <script src="https://maps.googleapis.com/maps/api/js"></script> <div id="map_canvas"></div>