javascript - 如何从json文件中获取json数组？

Question

我使用 javascript 创建图像热点，我需要从 json 文件获取数据(x，y 和信息)，目前我从 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);
    }

}

在上面的代码中，我从“Points”数组获取数据，而不是需要从一个 json 文件获取此数组数据？ 请帮我解决这个问题。

提前致谢。

Answer 1

您可以使用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
});