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

Question

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

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

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

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

score 240 · Accepted Answer

要使用 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="javascript.js"></script>

从 json 文件中获取对象

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

有关详细信息，请参阅此参考。

score 160 · Accepted Answer

从硬盘加载.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"。

score 116 · Accepted Answer

由于请求是使用 HTTP 发出的，因此您无法对本地资源进行 AJAX 调用。

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

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

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

score 61 · Accepted Answer

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

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

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

score 46 · Accepted Answer

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

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

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

score 36 · Accepted Answer

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

这是我的代码，即node.js。注意: 这'utf8'使得readFileSync它返回的不是 a 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());

当您想阅读特定的 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");
	  
});

当您输入 url 时，localhost:3030/get/33它将提供与该 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");
	  
});

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

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

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

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

 }

score 24 · Accepted Answer

24

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

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

于 2019-08-31T18:36:42.753 回答

score 19 · Accepted Answer

正如许多人之前提到的，这在使用 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);
});

score 16 · Accepted Answer

很简单。
将您的 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"}]';

score 12 · Accepted Answer

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

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

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

var jsonData = JSON.parse(theTextContentOfMyFile);

score 9 · Accepted Answer

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

数据.js

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

无需XMLHttpRequests，无需解析，直接使用MyData.resource即可

score 5 · Accepted Answer

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)

资源

score 5 · Accepted Answer

只需使用 $.getJSON 和 $.each 来迭代键/值对。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)
            }
        })
    });

score 4 · Accepted Answer

上述所有解决方案仅在您的本地主机上运行本地网络服务器时才有效。如果您想在没有 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 自动上传文件，即使由于浏览器施加的相同安全限制也是不允许的。

score 3 · Accepted Answer

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

如果您将文件放在不同的文件夹中，请提及完整路径而不是文件名。

score 3 · Accepted Answer

您可以在异步等待的帮助下使用 fetch() 来完成此操作。这是从 url 获取数据的最新和最安全的方法。

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

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

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

score 2 · Accepted Answer

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

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

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

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

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

score 1 · Accepted Answer

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

score 1 · Accepted Answer

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

score 1 · Accepted Answer

我喜欢 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；但这里的示例更多的是展示如何使用 Promise。

score 1 · Accepted Answer

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

score 0 · Accepted Answer

只是想提供另一种方法，因为以上所有内容对我来说都太复杂了。适用于我的 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"
        }
    }
    ]
}

score 0 · Accepted Answer

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

python -m SimpleHTTPServer 8181

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

score 0 · Accepted Answer

您必须创建一个新的 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);
 });

score 0 · Accepted Answer

使用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)
                           }

            }
        });
    });

score -1 · Accepted Answer

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

score -1 · Accepted Answer

我已阅读上述内容并注意到通常在项目中有人希望加载多个 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

score -2 · Accepted Answer

我接受了斯塔诺的出色回答并将其包装在一个承诺中。如果您没有像 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>'
    });

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

28 回答 28

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

Related

Reference