How to pass an external JSON file into a javascript variable that can be accessible anywhere

Question

I have a json file which I have been using in my project in this structure

<script src="js/main.js"></script>

<script>    
    var data = {"bills":[{"id":1,"name":"DStv","reference":"SmartCard Number","logo":"bill\/logo\/24Io6IqObQ8ddi5.jpg","active":1,"lifestyle":0},{"id":3,"name":"GOtv","reference":"IUC Number","logo":"bill\/logo\/mCNl5X1ZCfph4kg.jpg","active":1,"lifestyle":0},{"id":6,"name":"Startimes"...
</script>

<script src="js/bill.js"></script>
<script src="js/airtime.js"></script>

As you can see from the above example, the json file have already been passed to a data variable... of which I have other external javascript file placed under it.

Meanwhile, the json file is now generated/accessible from a link and I was told to use ajax to get the json data into the project.

I have this code in my main.js file, I have the below code but its not accessible in the bills.js file

$(document).ready(function () {

   $.ajax({
       type: "GET",
       url: "http://example.com/bills/resources",
       success: function(result)
       {
           data = result;
           loadData(result);

       }
   });

});

@Fawaz, If i call the ajax inside bill.js, I wont be able to use it elsewhere like in airtime.js, other.js, etc. I want to be able to use it in any other external javascript file — Solar
– Solar, Commented Apr 16, 2018 at 11:16
@Solar Check my answer below. Run it on document ready and pass onto airtime, bill, other etc using custom events. Moreover, you can save it in a global variable like window.result = result; and access window.result from anywhere. — Fawaz
– Fawaz, Commented Apr 16, 2018 at 12:17

Basil Battikhi · Accepted Answer · 2018-02-06 10:17:56Z

if it is a static variable and pulled just once then you can use Javascript cookie instead of creating global variable in the same file in order to get the value where ever you need

 $.ajax({
       type: "GET",
       url: "http://bills.payit.ng/bills/resources",
       success: function(result)
       {
           data = result;
           setCookie("myStaticDataPerDay",data,1)
           loadData(result);

       }
   });
});

function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+ d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

and you should be able to retrieve it by

console.log(getCookie("myStaticDataPerDay"));
function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for(var i = 0; i <ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

Also you can save it in jquery cookie

$.ajax({
       type: "GET",
       url: "http://bills.payit.ng/bills/resources",
       success: function(result)
       {
           data = result;
           $.cookie('myStaticData', data);
           loadData(result);

       }
   });
});

and you will need to get the value by

var data=JSON.parse($.cookie("MyStaticData"))

Update You can also use localStorage in case if you have IOS users because ios doesn't accept cookie

Fawaz · Accepted Answer · 2018-02-06 08:39:31Z

0

You can use events to pass data :

// in ajax success
var event = new CustomEvent("custom-event", {data: result});
window.dispatchEvent(event);

and then in your bill.js script or any place you need the data :

window.addEventListener("custom-event", function(e) {
  console.log("custom-event", e.data);
});

edited Feb 6, 2018 at 8:39

answered Feb 6, 2018 at 8:13

Fawaz

3,5603 gold badges20 silver badges23 bronze badges

Collectives™ on Stack Overflow

How to pass an external JSON file into a javascript variable that can be accessible anywhere

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related