如何读取本地 json 文件并将其存储在变量中？

Question

这是我的问题。 在我的脚本中，我有一个 Json 存储在一个变量中。 我想将 json 存储在本地文件中。 （这将是一个数据库，我这样做是因为我想要一个独立且易于使用的网站，没有太多组件。）

现在，我有这个

var data = [{
        "id": 1,
        "oeuvre": "choppe",
        "type": "Objet d'art",
        "artist": "Etienne",
        "sheet": "<a href=\"desc.html\">fiche</a>",
        "dt": "01/01/2019"
      }, {
        "id": 2,
        "oeuvre": "montre",
        "type": "Orfèvrerie",
        "artist": "Etienne",
        "sheet": "<a href=\"desc.html\">fiche</a>",
        "dt": "01/01/2019"
      }]

我想要这样的东西：

var data = $.getJSON("json/data1.json")

但它似乎没有找到文件......

有人有想法吗？

提前致谢

此致

Answer 1

如果要使用本地文件，则需要使用 FileReader。 这意味着您需要手动 select 您的 json 文件。

function readJsonFromLocal() {
    var file = document.getElementById("file");
    var fr = new FileReader();
    fr.readAsDataURL(file.files[0]);
    fr.onloadend = function (event) {    
        var strJson = atob(event.target.result.substring(event.target.result.indexOf("base64,") + 7));
        var jsonObj = JSON.parse(strJson);
    }
}

并且您需要将 json 作为字符串下载。 这里是下载 json 代码：

function downloadJsonFile() {
    var a = $("</a>");
    var url = URL.createObjectURL(new Blob([JSON.stringify(jsonObj)], { type: 'text/json' }));
    $(a).attr("download", "System.json").attr("href", url);
}

Answer 2

$.getJSON 是异步的，所以你应该这样做：

$.getJSON("test.json", function(json) {
    console.log(json); // this will show the info it in firebug console
});