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

Question

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

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

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

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

Answer 1

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

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

1. 在脚本源中提及 json 文件和 javascript 文件的路径。

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

2. 从json文件中获取对象

   var mydata = JSON.parse(data); alert(mydata[0].name); alert(mydata[0].age); alert(mydata[1].name); alert(mydata[1].age);

有关更多信息，请参阅此参考资料。

Answer 2

从硬盘加载.json文件是一个异步操作，因此需要指定一个回调函数在文件加载后执行。

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"等。

Answer 3

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

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

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

http://api.jquery.com/jQuery.getJSON/

Answer 4

在 Node.js 中或在浏览器中使用 require.js 时，您可以简单地执行以下操作：

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

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

Answer 5

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

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

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

Answer 6

1. 首先，创建一个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"}]

2. 这是我的代码，即node.js。 注意readFileSync的'utf8'参数：这使得它返回的不是一个Buffer （虽然JSON.parse可以处理它），而是一个字符串。 我正在创建一个服务器来查看结果...

 var fs=require('fs'); var data=fs.readFileSync('words.json', 'utf8'); var words=JSON.parse(data); var bodyparser=require('body-parser'); console.log(words); var express=require('express'); var app=express(); var server=app.listen(3030,listening); function listening(){ console.log("listening.."); } app.use(express.static('website')); app.use(bodyparser.urlencoded({extended:false})); app.use(bodyparser.json());

3. 当您想阅读特定的 id 详细信息时，您可以将代码提及为..

 app.get('/get/:id',function(req,res){ var i; for(i=0;i<words.length;++i) { if(words[i].id==req.params.id){ res.send(words[i]); } } console.log("success"); });

4. 当您以localhost:3030/get/33输入 url 时，它将提供与该 ID 相关的详细信息....您也可以按名称阅读。 我的 json 文件与此代码具有相似的名称，您可以获得一个名称的详细信息......并且它没有打印所有相似的名称

 app.get('/get/:name',function(req,res){ var i; for(i=0;i<words.length;++i) { if(words[i].id==req.params.name){ res.send(words[i]); } } console.log("success"); });

5. 如果您想阅读类似的名称详细信息，可以使用此代码。

 app.get('/get/name/:name',function(req,res){ word = words.filter(function(val){ return val.name === req.params.name; }); res.send(word); console.log("success"); });

6. 如果您想读取文件中的所有信息，请使用下面的代码。

 app.get('/all',sendAll); function sendAll(request,response){ response.send(words); }

Answer 7

你可以像 ES6 模块一样导入它；

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

Answer 8

正如许多人之前提到的，这在使用 AJAX 调用时不起作用。 但是，有一种方法可以解决它。 使用输入元素，您可以选择您的文件。

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

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

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

然后你可以使用 JS 和 FileReader() 读取文件：

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

Answer 9

很简单。
将您的 json 文件重命名为“.js”而不是“.json”。

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

因此，请正常遵循您的代码。

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

但是，仅供参考，我的 json 内容看起来像下面的片段。

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

Answer 10

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

为此，您可以尝试以下说明： http : //www.html5rocks.com/en/tutorials/file/dndfiles/

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

var jsonData = JSON.parse(theTextContentOfMyFile);

Answer 11

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

数据.js

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

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

Answer 12

只需使用 $.getJSON 然后使用 $.each 来迭代 Key/value 对。 JSON 文件和功能代码的内容示例：

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

Answer 13

您可以使用 XMLHttpRequest() 方法：

    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：

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

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

Answer 14

仅当您在本地主机上运行本地网络服务器时，上述所有解决方案才有效。 如果您想在没有 Web 服务器的情况下实现这一点，您可能需要通过使用文件上传控件上传 JSON 文件来进行一些手动工作。 由于安全风险，浏览器不会在没有本地服务器的情况下提供此功能。

您也可以在没有本地网络服务器的情况下解析上传的文件。 这是我已经解决类​​似问题的示例代码。

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

就我而言，我想读取本地 JSON 文件并将其显示在桌面上的 html 文件中，这就是我要做的全部工作。

注意：不要尝试使用 JavaScript 自动上传文件，即使由于浏览器强加的相同安全限制，这也是不允许的。

Answer 15

由于您有一个 Web 应用程序，因此您可能有一个客户端和一个服务器。

如果您只有浏览器，并且想从浏览器中运行的 javascript 读取本地文件，则意味着您只有一个客户端。 出于安全原因，浏览器不应该让你做这样的事情。

但是，正如 lauhub 上面解释的那样，这似乎有效：

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

其他解决方案是在您的机器上的某个地方设置一个 Web 服务器（在 Windows 中很小或在 linux 中是猴子）并使用 XMLHttpRequest 或 D3 库，从服务器请求文件并读取它。 服务器将从本地文件系统中获取文件，并通过 Web 将其提供给您。

Answer 16

如果您可以运行本地 Web 服务器（如上面Chris P建议的那样），并且可以使用 jQuery，则可以尝试http://api.jquery.com/jQuery.getJSON/

Answer 17

我喜欢上面 Stano/Meetar 的评论。 我用它来读取 .json 文件。 我已经使用 Promise 扩展了他们的示例。 这是相同的plunker。 https://plnkr.co/edit/PaNhe1XizWZ7C0r3ZVQx?p=preview

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

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

Answer 18

您可以使用 d3.js 导入 JSON 文件。 只需在您的 html 正文中调用 d3 即可：

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

然后把它放在你的 js 脚本上：

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

Answer 19

2021 解决方案（适用于 Chrome 91+）

导入 JSON 文件的 JS 文件应该是一个模块：

<script type="module" src="script.js"></script>

然后在script.js导入你的json文件：

import data from "./data.json" assert { type: "json" };

您可以使用console.log(data)检查数据是否已加载

来源

Answer 20

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

这个技巧对我有用（ https://codepen.io/KryptoniteDove/post/load-json-file-locally-using-pure-javascript ）：

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

Answer 21

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

python -m SimpleHTTPServer 8181

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

Answer 22

使用jQuery和ajax可以很好地读取JSON文件并操作数据

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

            }
        });
    });

Answer 23

你可以在异步等待的帮助下使用 fetch() 来做到这一点。 这是从 url 获取数据的最新和最安全的方式。

const url = "../asset/videoData.json";

const fetchJson = async () => {
  try {
    const data = await fetch(url);
    cons response = await data.json();  
  } catch (error) {
    console.log(error);
  }
 };

您也可以使用它从外部 url 获取数据。

Answer 24

它很简单：

 let json = require('./data.json')

Answer 25

只是想提供另一种方法，因为上述所有方法对我来说都太复杂了。 适用于我的 Chrome 版本 95.0.4638.54。

只是快速而肮脏的 js 代码

 //read json document and remove the new line var object = JSON.stringify(document.activeElement.textContent.replaceAll('\\n','')); //parse the string to json... don't know why but oje json.parse is not enough.. var json = JSON.parse(JSON.parse(object)); //read your json json.items[0].contactInfo.firstName //enjoy

测试json：

 { "items": [ { "type": "test1", "id": "test1", "name": "test1", "entityId": "test1", "active": true, "contactInfo": { "company": "test1", "firstName": "test1", "email": "test1" } }, { "type": "test2", "id": "test2", "name": "test2", "entityId": "test2", "active": true, "contactInfo": { "company": "test2", "firstName": "test2", "email": "test2" } } ] }

Answer 26

将 JSON 文件转换为 .js 文件并将 json 分配给变量或常量，然后在您的主 javascript 文件中引用它。

Answer 27

我已阅读上述内容并注意到通常在项目中有人希望加载多个 json 文件。 在某些情况下是一个庞大的目录，在某些情况下是“一个 json 文件的目录”（否则您必须首先生成一个列表才能下载它们中的每一个）。 如果这是整个项目，它会变得一团糟。 如果 json 文件中的数据之间存在很多关系，这可能会很麻烦。

显然，这一切都可以通过上述方法完成，要么制作 .js 文件，要么通过某种本地获取来检索它们。

但是，我发现有用的替代方法（如果您不想要具有层的服务器端解决方案）是首先将所有数据加载到 Sql Lite 数据库中。 这使得管理更多数据也更容易一些，并且您只有一个包含所有数据等的文件......

然后您使用 Web 程序集加载您的 sqlite 数据库，然后您可以使用常规查询来查询您的数据客户端。 所以这一切都可以在客户端完成

这是一个示例： https ://github.com/projectje/bookmarks-sync-sql-cogmios/blob/master/src/html/index.ts（编译为客户端解决方案的打字稿文件）。

在读/写站点中，您可以为每个用户提供一个您缓存的 sqlite 数据库，以便该用户的数据是唯一的，等等。

参考： https ://github.com/sql-js/sql.js

Answer 28

您可以使用 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>

Answer 29

我接受了Stano 的出色回答并将其包装在一个承诺中。 如果您没有像 node 或 webpack 这样的选项来从文件系统加载 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>'
    });

Answer 30

因此，如果您打算使用“Apache Tomcat”来托管您的 JSON 文件，

1> 启动服务器后，通过访问以下 URL 验证您的 Apache Tomcat 是否已启动并正在运行：“localhost:8080” -

2>接下来，进入“webapps”文件夹——“C:\\Program Files\\Apache Software Foundation\\Tomcat 8.5\\webapps”。 并且，创建一个项目文件夹或复制您的项目文件夹。

3> 将您的 json 文件粘贴到那里。

4> 就是这样。 你完成了！ 只需转到-“ http://localhost:8080/ $project_name$/$jsonFile_name$.json”