如何在JavaScript中读取外部本地JSON文件？


How to read an external local JSON file in JavaScript?

例如，我在本地系统中保存了一个JSON文件，并创建了一个JavaScript文件来读取JSON文件并打印数据。以下是JSON文件：

1
{"resource":"A","literals":["B","C","D"]}

假设这是json文件的路径：/Users/Documents/workspace/test.json。

有人能帮我写一段简单的代码来读取JSON文件并用JavaScript打印里面的数据吗？

相关讨论

要使用javascript读取外部本地JSON文件(data.json)，请首先创建data.json文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
data = '[{"name" :"Ashwin","age" :"20
<div class="suo-content">[collapse title=""]<ul><li>如果您可以修改该文件，或者该文件的内容没有适当的JSON，则可以使用此方法。例如，上面的<wyn>data.json</wyn>的示例内容没有通过验证：jsonlint.com，因为它确实是javascript。去掉包装单引号将使其变成纯JavaScript。</li><li>注意：有些旧浏览器(查看IE)不支持<wyn>JSON.parse</wyn>。参见MDN浏览器兼容性表中的<wyn>window.JSON</wyn>。</li><li>JSON.Parse(数据)不应该工作，因为数据是字符串？</li><li>这不是正确的答案。答案中的示例不是加载JSON文件。实际上，它只是加载另一个javascript文件，该文件将一些硬编码的JSON存储为名为<wyn>data</wyn>的变量。如果您删除了<wyn>data.json</wyn>中JSON周围的字符串引号，您甚至不需要使用<wyn>JSON.parse</wyn>。问题是如何加载JSON文件，而不是如何将JSON硬编码到另一个JavaScript文件中，然后加载它。</li><li><wyn>JSON.parse(window.data);</wyn>将提供关于<wyn>data</wyn>变量的<wyn>scope</wyn>的更好信息。</li><li>它对我不起作用，或者我不知道如何利用上述信息。</li><li>可以使用json2js将任何json转换为.js文件</li><li>做了几次修改后为我工作。首先，将data.json更改为data.js；其次，对于多行json，我使用了'</li><li>嗨，在您的脚本中，u used data.json是否意味着要访问您的json中的文件，您只是将其称为数据？</li></ul>[/collapse]</div><hr>
<p>
The loading of a <wyn>.json</wyn> file from harddisk is an asynchronous operation and thus it needs to specify a callback function to execute after the file is loaded.
</p>

[cc lang="javascript"]function readTextFile(file, callback) {
    var rawFile = new XMLHttpRequest();
    rawFile.overrideMimeType("application/json");
    rawFile.open("GET", file, true);
    rawFile.onreadystatechange = function() {
        if (rawFile.readyState === 4 && rawFile.status =="200") {
            callback(rawFile.responseText);
        }
    }
    rawFile.send(null);
}

//usage:
readTextFile("/Users/Documents/workspace/test.json", function(text){
    var data = JSON.parse(text);
    console.log(data);
});

此函数还用于加载.html或.txt文件，方法是将mime类型参数重写为"text/html"和"text/plain"等。

相关讨论

不能对本地资源进行Ajax调用，因为请求是使用HTTP发出的。

解决方法是运行本地Web服务器，提供文件并对本地主机进行Ajax调用。

为了帮助您编写代码来读取JSON，您应该阅读jQuery.getJSON()的文档：

http://api.jquery.com/jquery.getjson/

相关讨论

  • 首先，创建一个JSON文件。在这个例子中，我的文件是words.json

    • 1
    2
    3
    4
    5
    6
    7
    [{"name":"ay","id":"533
    <p><center>[wp_ad_camp_1]</center></p><hr>
    <p>
    You can simply do:
    </p>

    [cc lang="    javascript"]let json = require('/Users/Documents/workspace/test.json');

    注意：文件加载一次，后续调用将使用缓存。

    根据浏览器的不同，您可以访问本地文件。但这可能不适用于你的应用程序的所有用户。

    要做到这一点，您可以尝试下面的说明：http://www.html5rocks.com/en/tutorials/file/dndfiles/

    加载文件后，可以使用以下方法检索数据：

    1
    var jsonData = JSON.parse(theTextContentOfMyFile);

    如果您使用的是本地文件，为什么不将数据打包为JS对象呢？

    数据JS

    1
    MyData = { resource:"A",literals:["B","C","D"]}

    没有xmlhttprequests，没有解析，直接使用MyData.resource。

    很简单。将JSON文件重命名为".js"而不是".json"。

    1
    <script type="text/javascript" src="my_json.js">

    所以正常地遵循你的代码。

    1
    2
    <script type="text/javascript">
    var obj = JSON.parse(contacts);

    但是，为了获取信息，我的JSON的内容看起来像下面的截图。

    1
    contacts='[{"name":"bla bla","email":bla bla,"address":"bla bla"}]';
    相关讨论

    Using of Fetch API is the simplest solution:

    1
    2
    3
    fetch("test.json")
      .then(response => response.json())
      .then(json => console.log(json));

    它在火狐中很好用，但在Chrome中你必须自定义安全设置。

    正如前面提到的，使用Ajax调用不起作用。但是，有一种方法可以绕过它。使用输入元素，可以选择文件。

    所选文件(.json)需要具有以下结构：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    [
        {"key":"value
    <hr><P>只需使用$.getjson，然后使用$.each迭代对键/值。JSON文件和功能代码的内容示例：</P>[cc lang="    javascript"]    {
            {
               "    key":"INFO",
               "    value":"This is an example."
            }
        }

        var url ="    file.json";        
        $.getJSON(url, function (data) {
            $.each(data, function (key, model) {
                if (model.key =="    INFO") {
                    console.log(model.value)
                }
            })
        });

    可以使用xmlhttpRequest()方法：

    1
    2
    3
    4
    5
    6
    7
    8
    9
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            var myObj = JSON.parse(this.responseText);
            //console.log("Json parsed data is:" + JSON.stringify(myObj));
           }
        };
    xmlhttp.open("GET","your_file_name.json", true);
    xmlhttp.send();

    您可以使用console.log语句(注释掉)看到myobj的响应。

    如果您了解AngularJS，可以使用$http:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    MyController.$inject = ['myService'];
    function MyController(myService){

    var promise = myService.getJsonFileContents();

      promise.then(function (response) {
        var results = response.data;
        console.log("The JSON response is:" + JSON.stringify(results));
    })
      .catch(function (error) {
        console.log("Something went wrong.");
      });
    }

    myService.$inject = ['$http'];
    function myService($http){

    var service = this;

      service.getJsonFileContents = function () {
        var response = $http({
          method:"GET",
          url: ("your_file_name.json")
        });

        return response;
      };
    }

    如果文件位于其他文件夹中，请说明完整路径而不是文件名。

    一个简单的解决方法是将JSON文件放在本地运行的服务器中。对于来自终端的数据，请转到项目文件夹，并在某个端口号(如8181)上启动本地服务器。

    1
    python -m SimpleHTTPServer 8181

    然后浏览到http://localhost:8181/将显示包括JSON在内的所有文件。如果还没有，请记住安装python。

    必须创建新的xmlhttpRequest实例并加载JSON文件的内容。

    这个技巧对我很有用(https://codepen.io/kryptoniedove/post/load json文件，本地使用纯javascript)：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
     function loadJSON(callback) {  

        var xobj = new XMLHttpRequest();
            xobj.overrideMimeType("application/json");
        xobj.open('GET', 'my_data.json', true); // Replace 'my_data' with the path to your file
        xobj.onreadystatechange = function () {
              if (xobj.readyState == 4 && xobj.status =="200") {
                // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
                callback(xobj.responseText);
              }
        };
        xobj.send(null);  
     }

     loadJSON(function(response) {
        // Parse JSON string into object
        var actual_JSON = JSON.parse(response);
     });
    相关讨论

    我喜欢Stano/Meetar上面的评论。我用它来读取.json文件。我用promise扩展了他们的例子。这是同样的劫掠者。https://plnkr.co/edit/panhe1xizwz7c0r3zvqx？P=预览

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    function readTextFile(file, callback) {
        var rawFile = new XMLHttpRequest();
        rawFile.overrideMimeType("application/json");
        rawFile.open("GET", file, true);
        rawFile.onreadystatechange = function() {
            if (rawFile.readyState === 4 && rawFile.status =="200") {
                callback(rawFile.responseText);
            }
        }
        rawFile.send(null);
    }

    //usage:
    // readTextFile("DATA.json", function(text){
    //     var data = JSON.parse(text);
    //     console.log(data);
    // });


    var task1 = function (){
      return new Promise (function(resolve, reject){
        readTextFile("DATA.json", function(text){
        var data = JSON.parse(text);
        console.log('task1 called');
        console.log(data);
        resolve('task1 came back');
        });
      });
    };

    var task2 = function (){
      return new Promise (function(resolve, reject){
        readTextFile("DATA2.json", function(text){
        var data2 = JSON.parse(text);
        console.log('task2 called');
        console.log(data2);
        resolve('task2 came back');
        });
      });
    }

    Promise.race([task1(), task2()])
           .then(function(fromResolve){
              console.log(fromResolve);
           });

    对于dry，JSON的读取可以转移到另一个函数中；但是这里的示例更多地展示了如何使用promise。

    Since you have a web application, you may have a client and a server.

    If you have only your browser, and you want to read a local file from a javascript that is running in your browser, that means that you have only a client. For security reasons, the browser should not let you do such thing.

    However, as lauhub explained above, this seems to work:

    http://www.html5rocks.com/en/tutorials/file/dndfiles/

    Other solution is to setup somewhere in your machine a web server (tiny in windows or monkey in linux) and with an XMLHttpRequest or D3 library, request the file from the server and read it. The server will fetch the file from the local filesystem, and serve it to you through the web.

    您可以使用d3来处理回调，并加载本地JSON文件data.json，如下所示：

    1
    2
    3
    4
    5
    6
    7
    8
    <script src="//d3js.org/d3.v3.min.js" charset="utf-8">


      d3.json("data.json", function(error, data) {
        if (error)
          throw error;
        console.log(data);
      });

    如果您可以运行本地Web服务器(如Chris P上面建议的那样)，并且可以使用jquery，那么您可以尝试http://api.jquery.com/jquery.getjson。/

    我接受了斯坦诺的绝妙回答，并把它包装在一个承诺中。如果您没有像node或webpack这样的选项从文件系统加载JSON文件，那么这可能很有用：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    // wrapped XMLHttpRequest in a promise
    const readFileP = (file, options = {method:'get'}) =>
      new Promise((resolve, reject) => {
        let request = new XMLHttpRequest();
        request.onload = resolve;
        request.onerror = reject;
        request.overrideMimeType("application/json");
        request.open(options.method, file, true);
        request.onreadystatechange = () => {
            if (request.readyState === 4 && request.status ==="200") {
                resolve(request.responseText);
            }
        };
        request.send(null);
    });

    你可以这样称呼它：

    1
    2
    3
    4
    readFileP('<path to file>')
        .then(d => {
          '<do something with the response data in d.srcElement.response>'
        });

    因此，如果您打算使用"ApacheTomcat"来托管JSON文件，

    1>启动服务器后，通过访问以下URL来验证ApacheTomcat是否已启动并运行："localhost:8080"-

    enter image description here

    2下一步，转到"WebApp"文件夹——"C:程序文件 Apache软件基金会 Tomcat 8.5 WebApps'。创建项目文件夹或复制项目文件夹。

    enter image description here

    3>将JSON文件粘贴到那里。enter image description here

    4>就这样。你完了！只需转到-"http://localhost:8080/$projectu name$/$jsonfileu name$.json"enter image description here