blocks|key|4710810|text|来自硬盘的The+loading+of+a+.json+file是一个异步操作，因此它需要指定一个回调函数，以便在文件加载后执行。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4710811|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);
});|code-block|syntax|javascript|4710812|此函数还可用于加载.html或.txt文件，方法是覆盖"text/html"、"text/plain"等的mime类型参数。|4710813|entityMap|0|LINK|mutability|MUTABLE|url|http://codepen.io/KryptoniteDove/post/load-json-file-locally-using-pure-javascript^0|M|5|5|R|0|0|0|9|5|F|4|R|B|13|C|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@$9|X|A|Y|1|Z]]|E|$]]|$1|F|3|G|5|H|7|10|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|11|8|@$9|12|A|13|B|C]|$9|14|A|15|B|C]|$9|16|A|17|B|C]|$9|18|A|19|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|1A|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

<a href="http://codepen.io/KryptoniteDove/post/load-json-file-locally-using-pure-javascript" rel="noreferrer">The loading of a <code>.json</code> file</a> from harddisk is an asynchronous operation and thus it needs to specify a callback function to execute after the file is loaded.

<pre class="lang-js prettyprint-override"><code>function readTextFile(file, callback) {
 var rawFile = new XMLHttpRequest();
 rawFile.overrideMimeType("application/json");
 rawFile.open("GET", file, true);
 rawFile.onreadystatechange = function() {
 if (rawFile.readyState === 4 &amp;&amp; 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);
});
</code></pre>

This function works also for loading a <code>.html</code> or <code>.txt</code> files, by overriding the mime type parameter to <code>"text/html"</code>, <code>"text/plain"</code> etc.

blocks|key|204942|text|使用in+Node.js+or+when+using+require.js+in+the+browser时，您可以简单地执行以下操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|204943|let+json+=+require('/Users/Documents/workspace/test.json');
console.log(json,+'the+json+obj');|code-block|syntax|javascript|204944|注意:文件加载一次，后续调用将使用缓存。|204945|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/9901082/what-is-this-javascript-require^0|2|1E|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@]|C|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

When <a href="https://stackoverflow.com/questions/9901082/what-is-this-javascript-require">in Node.js or when using require.js in the browser</a>, you can simply do:
<pre><code>let json = require('/Users/Documents/workspace/test.json');
console.log(json, 'the json obj');
</code></pre>
Do note: the file is loaded once, subsequent calls will use the cache.

blocks|key|4711142|text|使用Fetch+API是最简单的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4711143|fetch("test.json")
++.then(response+=>+response.json())
++.then(json+=>+console.log(json));|code-block|syntax|javascript|4711144|它在Firefox中运行完美，但在Chrome中你必须自定义安全设置。|4711145|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API^0|2|9|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@]|C|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

Using the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API" rel="noreferrer">Fetch API</a> is the easiest solution:

<pre><code>fetch("test.json")
 .then(response =&gt; response.json())
 .then(json =&gt; console.log(json));
</code></pre>

It works perfect in Firefox, but in Chrome you have to customize security setting.

blocks|key|205363|text|你可以像ES6模块一样导入它；|type|unstyled|depth|inlineStyleRanges|entityRanges|data|205364|import+data+from+"/Users/Documents/workspace/test.json"|code-block|syntax|javascript|205365|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You can import It like ES6 module;

<pre><code>import data from "/Users/Documents/workspace/test.json"
</code></pre>

blocks|key|205126|text|正如许多人之前提到的，使用AJAX调用不能正常工作。然而，有一种方法可以绕过它。使用input元素，您可以选择文件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|205127|所选文件(.json)需要具有以下结构：|205128|[
++++{"key":+"value"},
++++{"key2":+"value2"},
++++...
++++{"keyn":+"valuen"},
]|code-block|syntax|javascript|205129|<input+type="file"+id="get_the_file">|205130|然后，您可以通过FileReader()使用JS读取该文件：|205131|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);
});|205132|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|T|8|@]|9|@]|A|$G|H]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|F|7|V|8|@]|9|@]|A|$G|H]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

As many people mentioned before, this doesn't work using an AJAX call. However, there's a way around it. Using the input element, you can select your file.

The file selected (.json) need to have this structure:

<pre><code>[
 {"key": "value"},
 {"key2": "value2"},
 ...
 {"keyn": "valuen"},
]
</code></pre>

 

<pre><code>&lt;input type="file" id="get_the_file"&gt;
</code></pre>

Then you can read the file using JS with FileReader():

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

blocks|key|4711202|text|非常简单。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4711203|将您的json文件重命名为".js“而不是".json”。|4711204|<script+type="text/javascript"+src="my_json.js"></script>|code-block|syntax|javascript|4711205|因此，正常地遵循您的代码。|4711206|<script+type="text/javascript">
var+obj+=+JSON.parse(contacts);|4711207|但是，仅供参考，内容我的json+it's看起来像下面的片段。|4711208|contacts='[{"name":"bla+bla",+"email":bla+bla,+"address":"bla+bla"}]';|4711209|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

Very simple. 
Rename your json file to ".js" instead ".json". 

<pre><code>&lt;script type="text/javascript" src="my_json.js"&gt;&lt;/script&gt;
</code></pre>

So follow your code normally.

<pre><code>&lt;script type="text/javascript"&gt;
var obj = JSON.parse(contacts);
</code></pre>

However, just for information, the content my json it's looks like the snip below.

<pre><code>contacts='[{"name":"bla bla", "email":bla bla, "address":"bla bla"}]';
</code></pre>

blocks|key|4710754|text|根据您的浏览器，您可以访问本地文件。但这可能并不适用于你的应用程序的所有用户。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4710755|要做到这一点，您可以尝试此处的说明：http://www.html5rocks.com/en/tutorials/file/dndfiles/|offset|length|4710756|加载文件后，可以使用以下命令检索数据：|4710757|var+jsonData+=+JSON.parse(theTextContentOfMyFile);|code-block|syntax|javascript|4710758|entityMap|0|LINK|mutability|MUTABLE|url|http://www.html5rocks.com/en/tutorials/file/dndfiles/^0|0|I|1H|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@$D|W|E|X|1|Y]]|A|$]]|$1|F|3|G|5|6|7|Z|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|10|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

Depending on your browser, you may access to your local files. But this may not work for all the users of your app.

To do this, you can try the instructions from here: <a href="http://www.html5rocks.com/en/tutorials/file/dndfiles/" rel="noreferrer">http://www.html5rocks.com/en/tutorials/file/dndfiles/</a>

Once your file is loaded, you can retrieve the data using:

<pre><code>var jsonData = JSON.parse(theTextContentOfMyFile);
</code></pre>

blocks|key|4711288|text|只需使用$.getJSON，然后使用$.each来迭代密钥对/value。JSON文件和功能代码的内容示例：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4711289|++++{
++++++++{
++++++++++++"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)
++++++++++++}
++++++++})
++++});|code-block|syntax|javascript|4711290|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Just use $.getJSON and then $.each to iterate the pair Key /value.
Content example for the JSON file and functional code:

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

blocks|key|205452|text|2021解决方案(适用于Chrome+91%2B)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|205453|您要导入JSON文件的JS文件应该是一个模块：|205454|<script+type="module"+src="script.js"></script>|offset|length|style|CODE|205455|然后在script.js中导入您的json文件：|205456|import+data+from+"./data.json"+assert+{+type:+"json"+};|205457|您可以使用console.log(data)检查数据是否已加载|205458|Source|205459|entityMap|0|LINK|mutability|MUTABLE|url|https://www.stefanjudis.com/snippets/how-to-import-json-files-in-es-modules/^0|0|0|0|1B|0|3|9|H|4|0|0|1J|0|5|H|0|0|6|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|10|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|11|8|@$F|12|G|13|H|I]]|9|@]|A|$]]|$1|J|3|K|5|6|7|14|8|@$F|15|G|16|H|I]|$F|17|G|18|H|I]]|9|@]|A|$]]|$1|L|3|M|5|6|7|19|8|@$F|1A|G|1B|H|I]]|9|@]|A|$]]|$1|N|3|O|5|6|7|1C|8|@$F|1D|G|1E|H|I]]|9|@]|A|$]]|$1|P|3|Q|5|6|7|1F|8|@]|9|@$F|1G|G|1H|1|1I]]|A|$]]|$1|R|3|-4|5|6|7|1J|8|@]|9|@]|A|$]]]|S|$T|$5|U|V|W|A|$X|Y]]]]

<h1>2021 solution (works in Chrome 91+)</h1>
The JS file where you're importing JSON file should be a module:
<code>&lt;script type=&quot;module&quot; src=&quot;script.js&quot;&gt;&lt;/script&gt;</code>
Then inside <code>script.js</code> import your <code>json</code> file:
<code>import data from &quot;./data.json&quot; assert { type: &quot;json&quot; };</code>
You can check that data is loaded with <code>console.log(data)</code>
<a href="https://www.stefanjudis.com/snippets/how-to-import-json-files-in-es-modules/" rel="noreferrer">Source</a>

blocks|key|4710899|text|您可以使用XMLHttpRequest()方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4710900|++++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:+"+%2B+JSON.stringify(myObj));
+++++++}
++++};
xmlhttp.open("GET",+"your_file_name.json",+true);
xmlhttp.send();|code-block|syntax|javascript|4710901|您可以使用console.log语句查看myObj的响应(已注释掉)。|4710902|如果您了解AngularJS，可以使用$http：|4710903|MyController.$inject+=+['myService'];
function+MyController(myService){

var+promise+=+myService.getJsonFileContents();

++promise.then(function+(response)+{
++++var+results+=+response.data;
++++console.log("The+JSON+response+is:+"+%2B+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;
++};
}|4710904|如果文件位于不同的文件夹中，请提及完整路径，而不是文件名。|4710905|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|U|8|@]|9|@]|A|$E|F]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

You can use XMLHttpRequest() method: 

<pre><code> var xmlhttp = new XMLHttpRequest();
 xmlhttp.onreadystatechange = function() {
 if (this.readyState == 4 &amp;&amp; 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();
</code></pre>

You can see the response of myObj using console.log statement(commented out).

If you know AngularJS, you can use $http:

<pre><code>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;
 };
}
</code></pre>

If you have the file in a different folder, mention the complete path instead of filename.

blocks|key|205504|text|在async+await的帮助下，您可以使用fetch()来完成此操作。这是从url获取数据的最新和最安全的方式。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|205505|const+url+=+"../asset/videoData.json";

const+fetchJson+=+async+()+=>+{
++try+{
++++const+data+=+await+fetch(url);
++++const+response+=+await+data.json();++
++}+catch+(error)+{
++++console.log(error);
++}
+};|code-block|syntax|javascript|205506|你也可以用它来从外部url中获取数据。|205507|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

You can do this with fetch() with the help of async await. It is the latest and safest way of fetching data from url.
<pre><code>const url = &quot;../asset/videoData.json&quot;;

const fetchJson = async () =&gt; {
 try {
 const data = await fetch(url);
 const response = await data.json(); 
 } catch (error) {
 console.log(error);
 }
 };
</code></pre>
You can use this for fetching data from external url also.

blocks|key|204885|text|因为您有一个web应用程序，所以您可能有一个客户端和一个服务器。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|204886|如果您只有浏览器，并且您想从浏览器中运行的javascript中读取本地文件，这意味着您只有一个客户端。出于安全原因，浏览器不应允许您执行此类操作。|204887|然而，正如上面所解释的，这似乎是可行的：|204888|http://www.html5rocks.com/en/tutorials/file/dndfiles/|offset|length|204889|另一种解决方案是在你的机器中的某个地方设置一个web服务器(在windows中是tiny，在linux中是monkey+)，并使用一个XMLHttpRequest或D3库，从服务器请求并读取文件。服务器将从本地文件系统获取该文件，并通过web将其提供给您。|204890|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|1H|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|U|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|V|8|@]|9|@$H|W|I|X|1|Y]]|A|$]]|$1|J|3|K|5|6|7|Z|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|M|$N|$5|O|P|Q|A|$R|G]]]]

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: 

<a href="http://www.html5rocks.com/en/tutorials/file/dndfiles/" rel="nofollow">http://www.html5rocks.com/en/tutorials/file/dndfiles/</a>

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.

blocks|key|4710715|text|如果您可以运行本地web服务器(正如上面Chris+P建议的那样)，并且可以使用jQuery，那么您可以尝试http://api.jquery.com/jQuery.getJSON/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4710716|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/users/2835541/chris-p|1|http://api.jquery.com/jQuery.getJSON/^0|K|7|0|1I|11|1|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]|$A|R|B|S|1|T]]|C|$]]|$1|D|3|-4|5|6|7|U|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]|L|$5|G|H|I|C|$J|M]]]]

If you could run a local web server (as <a href="https://stackoverflow.com/users/2835541/chris-p">Chris P</a> suggested above), and if you could use jQuery, you could try <a href="http://api.jquery.com/jQuery.getJSON/" rel="nofollow noreferrer">http://api.jquery.com/jQuery.getJSON/</a>

blocks|key|204924|text|我喜欢Stano/Meetar上面的评论。我用它来读取.json文件。我使用Promise扩展了他们的示例。这里是同样的柱塞。https://plnkr.co/edit/PaNhe1XizWZ7C0r3ZVQx?p=preview|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|204925|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);+
+++++++});|code-block|syntax|javascript|204926|JSON的读取可以移到另一个函数中，用于DRY；但这里的示例更多的是展示如何使用promises。|204927|entityMap|0|LINK|mutability|MUTABLE|url|https://plnkr.co/edit/PaNhe1XizWZ7C0r3ZVQx?p=preview^0|1R|1G|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@]|C|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

I liked what Stano/Meetar commented above. I use it to read .json files.
I have expanded their examples using Promise. 
Here is the plunker for the same.
<a href="https://plnkr.co/edit/PaNhe1XizWZ7C0r3ZVQx?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/PaNhe1XizWZ7C0r3ZVQx?p=preview</a> 

<pre><code>function readTextFile(file, callback) {
 var rawFile = new XMLHttpRequest();
 rawFile.overrideMimeType("application/json");
 rawFile.open("GET", file, true);
 rawFile.onreadystatechange = function() {
 if (rawFile.readyState === 4 &amp;&amp; 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); 
 });
</code></pre>

The reading of JSON can be moved into another function, for DRY; but the example here is more of showcasing how to use promises.

blocks|key|205396|text|您可以使用d3.js导入JSON文件。只需在您的HTML体上调用d3：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|205397|<script+src="https://d3js.org/d3.v5.min.js"></script>|code-block|syntax|javascript|205398|然后将以下代码放到js脚本中：|205399|++d3.json("test.json").then(function(data_json)+{
+++++++++//do+your+stuff
++})|205400|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

You can use d3.js to import JSON files. Just call d3 on your html body:
<pre><code>&lt;script src=&quot;https://d3js.org/d3.v5.min.js&quot;&gt;&lt;/script&gt;
</code></pre>
Then put this on your js scripts:
<pre><code> d3.json(&quot;test.json&quot;).then(function(data_json) {
 //do your stuff
 })
</code></pre>

blocks|key|205552|text|将JSON文件转换为.js文件，并将json赋给一个变量或const，然后在主javascript文件中引用它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|205553|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Turn the JSON file into a .js file and assign the json to a variable or const, then refer to it in your main javascript file.

blocks|key|4711005|text|您必须创建一个新的XMLHttpRequest实例并加载json文件的内容。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4711006|这个技巧对我很有效(https://codepen.io/KryptoniteDove/post/load-json-file-locally-using-pure-javascript)：|offset|length|4711007|+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);
+});|code-block|syntax|javascript|4711008|entityMap|0|LINK|mutability|MUTABLE|url|https://codepen.io/KryptoniteDove/post/load-json-file-locally-using-pure-javascript^0|0|A|2B|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@$D|U|E|V|1|W]]|A|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

You must create a new XMLHttpRequest instance and load the contents of the json file.

This tip work for me (<a href="https://codepen.io/KryptoniteDove/post/load-json-file-locally-using-pure-javascript" rel="nofollow noreferrer">https://codepen.io/KryptoniteDove/post/load-json-file-locally-using-pure-javascript</a>):

<pre><code> 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 &amp;&amp; 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);
 });
</code></pre>

blocks|key|4711400|text|使用jQuery和ajax可以很好地读取JSON文件并操作数据|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4711401|++++$(document).ready(function+()+{
++++++++$.ajax({
++++++++++++url:+'country.json',
++++++++++++type:+'GET',
++++++++++++dataType:+'json',
++++++++++++success:+function+(code,+statut)+{
++++++++++++++++for+(let+i+in+code)+{
++++++++++++++++++++console.log(i)
+++++++++++++++++++++++++++}

++++++++++++}
++++++++});
++++});|code-block|syntax|javascript|4711402|entityMap^0|2|6|9|4|K|4|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|U|8|@]|D|@]|E|$]]]|L|$]]

Using <code>jQuery</code> and <code>ajax</code> works fine to read <code>JSON</code> file and manipulate the data
<pre><code> $(document).ready(function () {
 $.ajax({
 url: 'country.json',
 type: 'GET',
 dataType: 'json',
 success: function (code, statut) {
 for (let i in code) {
 console.log(i)
 }

 }
 });
 });
</code></pre>

blocks|key|4710967|text|您可以使用D3处理回调，并加载本地JSON文件data.json，如下所示：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4710968|<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>|code-block|syntax|javascript|4710969|entityMap^0|N|9|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

You could use D3 to handle the callback, and load the local JSON file <code>data.json</code>, as follows:

<pre><code>&lt;script src="//d3js.org/d3.v3.min.js" charset="utf-8"&gt;&lt;/script&gt;

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

blocks|key|205618|text|我已经阅读了上面的内容，并注意到通常在项目中，有人希望加载多个json文件。在某些情况下是gazilion，在某些情况下是“json文件的目录”(否则您必须首先生成一个列表才能下载每个文件)。如果整个项目都是这样，事情就会变得一团糟。如果json文件中的数据之间有许多关系，这可能会是一个麻烦。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|205619|显然，这一切都可以使用上面的方法来完成，要么使它们成为.js文件，要么通过某种类型的本地获取来检索它们。|205620|但是，我发现的另一种有用的替代方法(如果您不想要带层的服务器端解决方案)是首先将所有数据加载到Sql+Lite数据库中。这使得管理更多的数据也变得更容易，而且你只有一个包含所有数据的文件，等等。|205621|然后使用web程序集加载sqlite数据库，然后可以使用常规查询来查询数据客户端。所以这一切都可以在客户端完成|205622|下面是一个例子：https://github.com/projectje/bookmarks-sync-sql-cogmios/blob/master/src/html/index.ts+(编译成客户端解决方案的typescript文件)。|offset|length|205623|在读/写站点中，您可以为每个用户提供一个sqlite数据库，并缓存该数据库，以便该用户的数据是唯一的，等等。|205624|参考：https://github.com/sql-js/sql.js|205625|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/projectje/bookmarks-sync-sql-cogmios/blob/master/src/html/index.ts|1|https://github.com/sql-js/sql.js^0|0|0|0|0|8|2D|0|0|0|3|W|1|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|10|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|11|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|12|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|13|8|@]|9|@$J|14|K|15|1|16]]|A|$]]|$1|L|3|M|5|6|7|17|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|18|8|@]|9|@$J|19|K|1A|1|1B]]|A|$]]|$1|P|3|-4|5|6|7|1C|8|@]|9|@]|A|$]]]|Q|$R|$5|S|T|U|A|$V|W]]|X|$5|S|T|U|A|$V|Y]]]]

I have read the above and notice that usually in projects someone wants to have more than one json file to be loaded. In some cases a gazilion and in some cases &quot;a directory of json files&quot; (of which you would otherwise have to generate a list first to be able to download each of them). It get get messy if this is all over the project. And it can be a hassle if there are many relations between data in the json files.
Obviously that can all be done with the above methods, either making them .js files or retrieving them via some sort of local fetching.
However an alternative (if you do not want a server side solution with tiers) that I found useful is to first load all your data in a Sql Lite database. This makes managing more data also a bit easier and you only have one file with all your data etc...
Then you use web assembly to load your sqlite database and then you can use regular queries to query your data client-side. So this can all be done client-side
Here is an example: <a href="https://github.com/projectje/bookmarks-sync-sql-cogmios/blob/master/src/html/index.ts" rel="nofollow noreferrer">https://github.com/projectje/bookmarks-sync-sql-cogmios/blob/master/src/html/index.ts</a> (typescript file that gets compiled to client-side solution).
In a read/write site you can deliver a sqlite database per user that you cache so that the data is unique for that user , etc.
ref: <a href="https://github.com/sql-js/sql.js" rel="nofollow noreferrer">https://github.com/sql-js/sql.js</a>

blocks|key|4711262|text|我接受了Stano's优秀的答案，并将其封装在一个承诺中。如果您没有像node或webpack这样的选项来从文件系统加载json文件，这可能会很有用：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4711263|//+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);
});|code-block|syntax|javascript|4711264|你可以这样称呼它：|4711265|readFileP('<path+to+file>')
++++.then(d+=>+{
++++++'<do+something+with+the+response+data+in+d.srcElement.response>'
++++});|4711266|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/users/1422309/stano^0|4|7|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@]|C|$]]|$1|K|3|L|5|F|7|10|8|@]|9|@]|C|$G|H]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

I took <a href="https://stackoverflow.com/users/1422309/stano">Stano's</a> excellent answer and wrapped it in a promise. This might be useful if you don't have an option like node or webpack to fall back on to load a json file from the file system:

<pre><code>// wrapped XMLHttpRequest in a promise
const readFileP = (file, options = {method:'get'}) =&gt; 
 new Promise((resolve, reject) =&gt; {
 let request = new XMLHttpRequest();
 request.onload = resolve;
 request.onerror = reject;
 request.overrideMimeType("application/json");
 request.open(options.method, file, true);
 request.onreadystatechange = () =&gt; {
 if (request.readyState === 4 &amp;&amp; request.status === "200") {
 resolve(request.responseText);
 }
 };
 request.send(null);
});
</code></pre>

You can call it like this:

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

I have saved a JSON file in my local system and created a JavaScript file in order to read the JSON file and print data out. Here is the JSON file:
<pre><code>{&quot;resource&quot;:&quot;A&quot;,&quot;literals&quot;:[&quot;B&quot;,&quot;C&quot;,&quot;D&quot;]}
</code></pre>
Let’s say this is the path of the JSON file: <code>/Users/Documents/workspace/test.json</code>.
Could anyone please help me write a simple piece of code to read the JSON file and print the data in JavaScript?

How to read an external local JSON file in JavaScript?

文件系统

数据库

服务器

jQuery

JSON

我在本地系统中保存了一个JSON文件，并创建了一个JavaScript文件，以便读取JSON文件并打印数据。下面是JSON文件：{"resource":"A","literals":["B","C","D"]}假设这是JSON文件的路径：/Users/Documents/workspace/test.json。有人能帮我写一段简单的代码来读取JSON文件并打印JavaScript格式的数据吗？

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

回答 21

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 21

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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