如何从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 
});