CODEWITHSUNDEEP
javascriptjqueryhtmlarraysjson
user2841635
user2841635

Reputation:

How to get json array from json file?

im creating Image Hotspot using javascript, i need to get a data (x,y and Info) from json file, currently im getting data from Javascript Array. How can i get it from json file?

Code Pasted here;

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);
    }

}

In above code i've get data from "Points" array instead of i need to get this array data from one json file ? Please help me to get this fixed.

thanks in Advance.

Upvotes: 1

Views: 146

Answers (3)

Jai
Jai

Reputation: 74738

You can use ajax to get the data from the json file and just wrap the existing code in a function which takes an argument and just assign that argument to the desired var: 

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
});

Upvotes: 1

Subhrajyoti Das
Subhrajyoti Das

Reputation: 2710

Please try this. Should solve your problem

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

Upvotes: 0

Pranoy Sarkar
Pranoy Sarkar

Reputation: 2233

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);
            }
        };

    }

modify this code add file path in path_to_your_json _fileand call this function getJsonData() after that your data will be in yourJsonDataFromFile in json format , hope this will resolve your issue

Upvotes: 0

Related Questions