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

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

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

假设这是JSON文件的路径：

/Users/Documents/workspace/test.JSON

---

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

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

一种解决方法是运行本地Web服务器，提供文件并对localhost进行AJAX调用

为了帮助您编写代码来读取JSON，您应该阅读

jQuery.getJSON（）

的文档：

---

如果您可以运行本地web服务器（如上所述），并且如果您可以使用jQuery，您可以根据您的浏览器来尝试，您可以访问您的本地文件。但这可能不适用于应用程序的所有用户

要执行此操作，您可以尝试以下说明：

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

var jsonData = JSON.parse(theTextContentOfMyFile);

---

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

data = '[{"name" : "Ashwin", "age" : "20"},{"name" : "Abhinandan", "age" : "20"}]';

在脚本源代码中提及json文件的路径以及javascript文件

<script type="text/javascript" src="data.json"></script>
<script type="text/javascript" src="javascrip.js"></script>

---

有关更多信息，请参阅。

因为您有一个web应用程序，所以您可能有一个客户端和一个服务器

如果您只有浏览器，并且希望从浏览器中运行的javascript读取本地文件，则意味着您只有一个客户端。出于安全原因，浏览器不应允许您执行此类操作

然而，正如lauhub在上文中所解释的，这似乎是可行的：

另一种解决方案是在机器中的某个地方设置一个web服务器（windows中的tiny或linux中的monkey），并使用XMLHttpRequest或D3库，从服务器请求文件并读取它。服务器将从本地文件系统获取文件，并通过web将其提供给您。

从硬盘获取文件是一种异步操作，因此需要指定一个回调函数，以便在加载文件后执行

函数readTextFile（文件，回调）{ var rawFile=new XMLHttpRequest（）； overrideMimeType（“application/json”）； 打开（“GET”，file，true）； rawFile.onreadystatechange=函数（）{ if（rawFile.readyState==4&&rawFile.status==200）{ 回调（rawFile.responseText）； } } rawFile.send（空）； } //用法： readTextFile（“/Users/Documents/workspace/test.json”），函数（text）{ var data=JSON.parse（文本）； 控制台日志（数据）； });

---

此函数还可用于加载

.html

或

.txt

文件，方法是将mime类型参数重写为

“text/html”

，

“text/plain”

等。

我喜欢Stano/Meetar上面的评论。我使用它来读取.json文件。 我用Promise扩展了他们的例子。 这是同样的东西。

---

JSON的读取可以移动到另一个函数中，例如DRY；但这里的示例更多地展示了如何使用承诺。

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

data.js

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

没有XMLHttpRequests，没有解析，直接使用

MyData.resource

首先，创建一个json文件。在本例中，我的文件是words.json

[{“name”：“ay”，“id”：“533”}，
{“name”：“kiy”，“id”：“33”}，
{“name”：“iy”，“id”：“33”}，
{“name”：“iy”，“id”：“3”}，
{“name”：“kiy”，“id”：“35”}，
{“name”：“kiy”，“id”：“34”}]

当您只需执行以下操作：

let json = require('/Users/Documents/workspace/test.json');
console.log(json, 'the json obj');

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

您可以使用XMLHttpRequest（）方法：

您可以使用console.log语句（注释掉）查看myObj的响应

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

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

---

如果文件位于不同的文件夹中，请提及完整路径而不是文件名。

因此，如果您计划使用“Apache Tomcat”托管JSON文件

1> 启动服务器后，通过转到以下url：“localhost:8080”验证Apache Tomcat是否已启动并运行-

2> 接下来，转到“webapps”文件夹--“C:\Program Files\Apache软件基金会\Tomcat 8.5\webapps”。并且，创建项目文件夹或复制项目文件夹

3> 把你的json文件粘贴到那里。

---

4> 就这样。你完了！只需转到-“$project\u name$/$jsonFile\u name$.json”

即可使用D3处理回调，并加载本地json文件

data.json

，如下所示：

<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>

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

d3.json（“data.json”），函数（错误，数据）{
如果（错误）
投掷误差；
控制台日志（数据）；
});

必须创建新的XMLHttpRequest实例并加载json文件的内容

这个技巧对我有用（）：

---

一个简单的解决方法是将JSON文件放在本地运行的服务器中。从终端转到您的项目文件夹，在一些端口号上启动本地服务器，例如8181

python -m SimpleHTTPServer 8181

然后浏览到应该会显示所有文件，包括JSON。如果您还没有安装python，请记住安装python

正如许多人之前提到的，使用AJAX调用是不起作用的。然而，这是有办法解决的。使用输入元素，可以选择文件

所选文件（.json）需要具有以下结构：

[
    {"key": "value"},
    {"key2": "value2"},
    ...
    {"keyn": "valuen"},
]

使用是最简单的解决方案：

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

它在Firefox中运行非常完美，但在Chrome中，您必须自定义安全设置。

非常简单。
将json文件重命名为“.js”而不是“.json”。

我接受了一个极好的回答，并用一个承诺来包装它。如果您没有从文件系统加载json文件所依赖的节点或网页包之类的选项，这可能会很有用：

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

你可以这样称呼它：

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

读取
[
    {"key": "value"},
    {"key2": "value2"},
    ...
    {"keyn": "valuen"},
]

<input type="file" id="get_the_file">

document.getElementById("get_the_file").addEventListener("change", function() {
  var file_to_read = document.getElementById("get_the_file").files[0];
  var fileread = new FileReader();
  fileread.onload = function(e) {
    var content = e.target.result;
    // console.log(content);
    var intern = JSON.parse(content); // Array of Objects.
    console.log(intern); // You can index every object
  };
  fileread.readAsText(file_to_read);
});

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

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

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

contacts='[{"name":"bla bla", "email":bla bla, "address":"bla bla"}]';

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

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

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

import data from "/Users/Documents/workspace/test.json"

<script src="https://d3js.org/d3.v5.min.js"></script>

  d3.json("test.json").then(function(data_json) {
         //do your stuff
  })

 <div id="content">
    <input type="file" name="inputfile" id="inputfile">
    <br>

    <h2>
        <pre id="output"></pre>
    </h2>
</div>
<script type="text/javascript">
    document.getElementById('inputfile')
        .addEventListener('change', function () {

            let fileReader = new FileReader();
            fileReader.onload = function () {
                let parsedJSON = JSON.parse(fileReader.result);
                console.log(parsedJSON);
                // your code to consume the json                    
            }
            fileReader.readAsText(this.files[0]);
        }) 
</script>

    $(document).ready(function () {
        $.ajax({
            url: 'country.json',
            type: 'GET',
            dataType: 'json',
            success: function (code, statut) {
                for (let i in code) {
                    console.log(i)
                           }

            }
        });
    });