如何從json文件獲取json數組？

Question

即時通訊創建圖像使用JavaScript的熱點，我需要從json文件中獲取數據（x，y和Info），目前我從Javascript數組獲取數據。我怎樣才能從json文件中獲取它？

代碼粘貼在這裏;

var points; 

     var l_nOldX; 
     var l_nOldY; 
     function createHotspots(){ 
     var points = new Array(
      /*Tamilnadu*/ 
     [38.7, 85.6, "0168"], 
     [36.1, 85.3, "1843"], 
     [38.5, 88.3, "39647"], 
     [34.8, 29.2, "12320"] 
    ); 
    var divHotspot = document.getElementById("loadImages"); 
    for(pi = 0; pi < points.length; pi++){ 
     var hs = document.createElement("div"); 
     hs.className = "hotspot"; 
     hs.style.position = "absolute"; 
     hs.style.left = "calc(" + points[pi][0] + "% - 8px)"; 
     hs.style.top = "calc(" + points[pi][1] + "% - 0px)"; 
     hs.style.width = "15px"; 
     hs.style.height = "15px"; 
     var html; 
     if (points[pi][0] < 31) { 
      html = "<table cellpadding='0' cellspacing='0' class='tbltooltipright' align='center'><tr><td id='img9' align='center'><div align='center'><div class='divtooltip'><div class='divclose'></div>" + points[pi][2] + "</div><div id='triangle-down' class='arrow_boxr'></div></td></tr><tr><td align='center' id='img10' ></td></tr></table>"; 
      // alert('a'); 
      hs.innerHTML = html; 
      $(hs).bind("mouseenter", function() { 
       $(".tbltooltipnormal").hide(); 
       $(".tbltooltipleft").hide(); 
       $(".tbltooltipright").hide(); 
       $(this).find(".tbltooltipright").show(); 
      }); 
     } 

     else { 
      html = "<table cellpadding='0' cellspacing='0' class='tbltooltipnormal' align='center'><tr><td id='img9' align='center'><div align='center'><div class='divtooltip'><div class='divclose'></div>" + points[pi][2] + "</div><div id='triangle-down' class='arrow_boxn'></div></td></tr><tr><td align='center' id='img10' ></td></tr></table>"; 
      hs.innerHTML = html; 
      $(hs).bind("mouseenter", function() { 
       $(".tbltooltipnormal").hide(); 
       $(".tbltooltipleft").hide(); 
       $(".tbltooltipright").hide(); 
       $(this).find(".tbltooltipnormal").show(); 
      }); 

     } 



     $('.divclose').on('click touchstart', function() { 
      //debugger; 

      $('.tbltooltipnormal').hide(); 
      $('.tbltooltipleft').hide(); 
      $('.tbltooltipright').hide(); 
      return false; 
     }); 

     divHotspot.appendChild(hs); 
    } 

} 

在上面的代碼中，我從「點」陣列獲取數據，而不是我需要從一個JSON文件得到這個陣列中的數據？ 請幫我解決這個問題。

在此先感謝。

Answer 1

var yourJsonDataFromFile=undefined;  
var getJsonData=function() { 

     console.log("fetching data from JSON file"); 
     var url = "path_to_your_json _file"; 
     var ajaxHttp = new XMLHttpRequest(); 
     ajaxHttp.overrideMimeType("application/json"); 
     ajaxHttp.open("GET",url,true); 
     ajaxHttp.setRequestHeader("Access-Control-Allow-Origin", "*"); 
     ajaxHttp.send(null); 
     ajaxHttp.onreadystatechange = function() { 
      if(ajaxHttp.readyState == 4 && ajaxHttp.status == "200") 
      { 
       yourJsonDataFromFile = JSON.parse(ajaxHttp.response); 
      } 
     }; 

    } 

修改這個代碼添加文件路徑path_to_your_json _file後您的數據將在yourJsonDataFromFile JSON格式調用這個函數getJsonData()，希望這能解決您的問題

Answer 2

請試試這個。應該解決您的問題

$.getJSON('<path_to_your_json_file>/file.json', function(data) {   
var points = data; 
}); 

Answer 3

您可以使用Ajax從JSON文件中獲取數據，只是包裝現有的代碼中，需要一個參數，只是分配一個參數到所需的無功函數：

var points; 
var l_nOldX; 
var l_nOldY; 

function createHotspots(points){ // <---pass the array 
    var points = points; // assign it here 
    var divHotspot = document.getElementById("loadImages"); 
    ... 
} 

$.ajax({ 
    url:'points.json', //<----call the json file 
    type:'GET', 
    dataType:'json', 
    success:createHotspots // reference to the data 
});