如何将外部JSON文件传递到可以在任何地方访问的javascript变量

Question

我有一个在此结构中的项目中一直使用的json文件

<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>

从上面的示例中可以看到，json文件已经传递给了一个数据变量...在该变量下，我还放置了其他外部javascript文件。

同时，现在可以通过链接生成/访问json文件，并被告知要使用ajax将json数据导入项目。

我的main.js文件中有此代码，我有以下代码，但在bills.js文件中无法访问

$(document).ready(function () {

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

       }
   });

});

Answer 1

如果它是一个静态变量并且只提取了一次，则可以使用Javascript Cookie而不是在同一文件中创建全局变量，以便在需要的任何位置获取值

 $.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=/";
}

并且您应该能够通过以下方式检索它

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

您也可以将其保存在jQuery Cookie中

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

       }
   });
});

您将需要通过以下方式获得价值

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

更新如果您有IOS用户，因为ios不接受cookie，您也可以使用localStorage

Answer 2

您可以使用事件来传递数据：

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

然后在bill.js脚本或您需要数据的任何地方：

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