如何将外部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文件已经传递给了一个名为data的变量...其中我还有其他外部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);

       }
   });

});

- Solar

---

为什么不在bill.js内部调用ajax呢？ - Fawaz

在JavaScript中使用命名空间 - Sumesh TG

@Fawaz，如果我在bill.js中调用ajax，我将无法在其他文件（如airtime.js、other.js等）中使用它。我希望能够在任何其他外部JavaScript文件中使用它。 - Solar

@Solar，请查看我下面的答案。在文档准备就绪时运行它，并使用自定义事件传递到airtime、bill、other等。此外，您可以将其保存在全局变量中，如window.result = result;，并从任何地方访问window.result。 - Fawaz

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用户，也可以使用localStorage，因为ios不接受cookie。

- Basil Battikhi

---

请使用本地存储。那将是完美的。 - localroot

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

- Fawaz