加载本地JSON文件
我试图加载一个本地的JSON文件，但它不会工作。 这是我的JavaScript代码（使用jQuery：
var json = $.getJSON("test.json"); var data = eval("(" +json.responseText + ")"); document.write(data["a"]); test.json文件：
{"a" : "b", "c" : "d"}
没有任何显示，Firebug告诉我，数据是不确定的。 在Firebug中，我可以看到json.responseText ，它是好的和有效的，但是当我复制该行时，这很奇怪：
var data = eval("(" +json.responseText + ")");
在Firebug的控制台，它的工作原理，我可以访问数据。
任何人都有解决方案？
$.getJSON是异步的，所以你应该这样做：
$.getJSON("test.json", function(json) { console.log(json); // this will show the info it in firebug console });
我有相同的需求（测试我的angularjs应用程序），我发现的唯一方法是使用require.js：
var json = require('./data.json'); //(with path)
注意：文件被加载一次，进一步的调用将使用缓存。
有关使用nodejs读取文件的更多信息： http ://docs.nodejitsu.com/articles/file-system/how-to-read-files-in-nodejs
require.js： http: //requirejs.org/
如果你想让用户选择本地json文件（文件系统的任何地方），那么下面的解决方案工作。
它使用使用FileReader和JSON.parser（和没有jQuery）。
<html> <body> <form id="jsonFile" name="jsonFile" enctype="multipart/form-data" method="post"> <fieldset> <h2>Json File</h2> <input type='file' id='fileinput'> <input type='button' id='btnLoad' value='Load' onclick='loadFile();'> </fieldset> </form> <script type="text/javascript"> function loadFile() { var input, file, fr; if (typeof window.FileReader !== 'function') { alert("The file API isn't supported on this browser yet."); return; } input = document.getElementById('fileinput'); if (!input) { alert("Um, couldn't find the fileinput element."); } else if (!input.files) { alert("This browser doesn't seem to support the `files` property of file inputs."); } else if (!input.files[0]) { alert("Please select a file before clicking 'Load'"); } else { file = input.files[0]; fr = new FileReader(); fr.onload = receivedText; fr.readAsText(file); } function receivedText(e) { lines = e.target.result; var newArr = JSON.parse(lines); } } </script> </body> </html>
这是一个很好的介绍FileReader： http ://www.html5rocks.com/en/tutorials/file/dndfiles/
如果你正在寻找一些快速和肮脏的东西，只需将数据加载到HTML文档的头部。
data.js
var DATA = {"a" : "b", "c" : "d"};
的index.html
<html> <head> <script src="data.js" ></script> <script src="main.js" ></script> </head> ... </html>
main.js
(function(){ console.log(DATA) // {"a" : "b", "c" : "d"} })()
以更现代的方式，您现在可以使用抓取API ：
fetch("test.json") .then(response => response.json()) .then(json => console.log(json));
所有现代浏览器都支持Fetch API。 （Internet Explorer不，但是Edge做的！）
资源：
-
使用Fetch
-
取得行动
-
我可以用吗…？
ace.webgeeker.xyz
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); } function init() { loadJSON(function(response) { // Parse JSON string into object var actual_JSON = JSON.parse(response); }); }
ES6版本
const loadJSON = (callback) => { let 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 = () => { 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); } const init = () => { loadJSON((response) => { // Parse JSON string into object let actual_JSON = JSON.parse(response); }); }
最近D3js能够处理本地的json文件。
这是问题https://github.com/mbostock/d3/issues/673
这是D3用来处理本地json文件的补丁。 https://github.com/mbostock/d3/pull/632
尝试是这样的（但也请注意JavaScript没有访问客户端文件系统）：
$.getJSON('test.json', function(data) { console.log(data); });
在角度（或任何其他框架），你可以加载使用http get我使用这样的东西：
this.http.get(<path_to_your_json_file)) .success((data) => console.log(data));
希望这可以帮助。
尝试（不成功）加载本地json文件时发现此线程。 这个解决方案为我工作…
function load_json(src) { var head = document.getElementsByTagName('head')[0]; //use class, as we can't reference by id var element = head.getElementsByClassName("json")[0]; try { element.parentNode.removeChild(element); } catch (e) { // } var script = document.createElement('script'); script.type = 'text/javascript'; script.src = src; script.className = "json"; script.async = false; head.appendChild(script); //call the postload function after a slight delay to allow the json to load window.setTimeout(postloadfunction, 100) }
…这样使用…
load_json("test2.html.js")
…这是<head> …
<head> <script type="text/javascript" src="test.html.js" class="json"></script> </head>
$.ajax({ url: "Scripts/testingJSON.json", //force to handle it as text dataType: "text", success: function (dataTest) { //data downloaded so we call parseJSON function //and pass downloaded data var json = $.parseJSON(dataTest); //now json variable contains data in json format //let's display a few items $.each(json, function (i, jsonObjectList) { for (var index = 0; index < jsonObjectList.listValue_.length;index++) { alert(jsonObjectList.listKey_[index][0] + " -- " + jsonObjectList.listValue_[index].description_); } }); } });
我无法相信这个问题有多少次在没有理解和/或解决原始海报的实际代码的问题的情况下得到了回答。 这就是说，我自己是一个初学者（只有2个月的编码）。 我的代码确实工作，但随时建议任何更改。 这是解决方案：
//include the 'async':false parameter or the object data won't get captured when loading var json = $.getJSON({'url': "http://spoonertuner.com/projects/test/test.json", 'async': false}); //The next line of code will filter out all the unwanted data from the object. json = JSON.parse(json.responseText); //You can now access the json variable's object data like this json.a and json.c document.write(json.a); console.log(json);
下面是我写上面提供的相同代码的一个更简短的方法：
var json = JSON.parse($.getJSON({'url': "http://spoonertuner.com/projects/test/test.json", 'async': false}).responseText);
您也可以使用$ .ajax而不是$ .getJSON以完全相同的方式编写代码：
var json = JSON.parse($.ajax({'url': "http://spoonertuner.com/projects/test/test.json", 'async': false}).responseText);
最后，最后一个方法是将$ .ajax包装在一个函数中。 我不能赞扬这个，但我修改了一下。 我测试了它，它的工作原理和结果与我上面的代码相同。 我在这里找到了这个解决方案 – >将json加载到变量中
var json = function () { var jsonTemp = null; $.ajax({ 'async': false, 'url': "http://spoonertuner.com/projects/test/test.json", 'success': function (data) { jsonTemp = data; } }); return jsonTemp; }(); document.write(json.a); console.log(json);
您在我的代码中看到的test.json文件在我的服务器上，并且包含他（原始海报）发布的相同的json数据对象。
{ "a" : "b", "c" : "d" }
如果你使用JSON的本地数组 – 就像你在问题（test.json）中展示的那样，那么你可以使用JQuery的parseJSON方法 – >
var obj = jQuery.parseJSON('{"name":"John"}'); alert( obj.name === "John" );
getJSON用于从远程站点获取JSON – 它不会在本地工作（除非您使用的是本地HTTP Server）
我还没有找到任何使用Google的Closure库的解决方案。 所以，为了完成未来访问者的列表，下面是如何从Closure库的本地文件加载JSON：
goog.net.XhrIo.send('../appData.json', function(evt) { var xhr = evt.target; var obj = xhr.getResponseJson(); //JSON parsed as Javascript object console.log(obj); });
我喜欢使用的方法是用对象字面值填充/包装json，然后用.jsonp文件扩展名保存文件。 这个方法也会使原来的json文件（test.json）保持不变，因为你将使用新的jsonp文件（test.jsonp）来代替。 包装上的名称可以是任何东西，但是它的名称必须与用于处理jsonp的回调函数名称相同。 我将使用你的test.json作为例子来显示'test.jsonp'文件的jsonp包装器。
json_callback({"a" : "b", "c" : "d"});
接下来，在脚本中创建一个全局范围的可重用变量来保存返回的JSON。 这将使返回的JSON数据可用于脚本中的所有其他函数，而不仅仅是回调函数。
var myJSON;
接下来是一个简单的函数来通过脚本注入来检索你的json。 请注意，我们不能在这里使用jQuery将脚本附加到文档头，因为IE不支持jQuery .append方法。 在下面的代码中注释的jQuery方法可以在支持.append方法的其他浏览器上使用。 这是作为参考，以显示差异。
function getLocalJSON(json_url){ var json_script = document.createElement('script'); json_script.type = 'text/javascript'; json_script.src = json_url; json_script.id = 'json_script'; document.getElementsByTagName('head')[0].appendChild(json_script); // $('head')[0].append(json_script); DOES NOT WORK in IE (.append method not supported) }
接下来是一个简短的回调函数（与jsonp包装器名称相同）来将json结果数据导入到全局变量中。
function json_callback(response){ myJSON = response; // Clone response JSON to myJSON object $('#json_script').remove(); // Remove json_script from the document }
json数据现在可以通过脚本的任何函数使用点符号来访问。 举个例子：
console.log(myJSON.a); // Outputs 'b' to console console.log(myJSON.c); // Outputs 'd' to console
这种方法可能与您以前看到的有所不同，但有很多优点。 首先，相同的jsonp文件可以在本地加载，也可以从使用相同功能的服务器加载。 作为奖励，jsonp已经是一个跨域友好的格式，也可以很容易地与REST类型的API一起使用。
当然，没有错误处理函数，但为什么你需要一个？ 如果你不能使用这种方法获取json数据，那么你几乎可以肯定你在json本身中有一些问题，我会检查一个好的JSON验证器。
你可以把你的JSON放在一个JavaScript文件中。 这可以使用jQuery的getScript()函数在本地加载（即使在Chrome中）。
map-01.js文件：
var json = '{"layers":6, "worldWidth":500, "worldHeight":400}'
main.js
$.getScript('map-01.js') .done(function (script, textStatus) { var map = JSON.parse(json); //json is declared in the js file console.log("world width: " + map.worldWidth); drawMap(map); }) .fail(function (jqxhr, settings, exception) { console.log("error loading map: " + exception); });
输出：
world width: 500
注意，json变量是在js文件中声明和赋值的。
json_str = String.raw`[{"name": "Jeeva"}, {"name": "Kumar"}]`; obj = JSON.parse(json_str); console.log(obj[0]["name"]);
如果你在本地机器上安装了Python（或者你不介意安装一个），下面是一个独立于浏览器的解决方法，用于解决本地JSON文件访问问题：
通过创建一个将数据作为JavaScript对象返回的函数，将JSON文件转换为JavaScript。 然后你可以用<script>标签加载它并调用函数来获取你想要的数据。
Python代码如下
import json def json2js(jsonfilepath, functionname='getData'): """function converting json file to javascript file: json_data -> json_data.js :param jsonfilepath: path to json file :param functionname: name of javascript function which will return the data :return None """ # load json data with open(jsonfilepath,'r') as jsonfile: data = json.load(jsonfile) # write transformed javascript file with open(jsonfilepath+'.js', 'w') as jsfile: jsfile.write('function '+functionname+'(){return ') jsfile.write(json.dumps(data)) jsfile.write(';}') if __name__ == '__main__': from sys import argv l = len(argv) if l == 2: json2js(argv[1]) elif l == 3: json2js(argv[1], argv[2]) else: raise ValueError('Usage: python pathTo/json2js.py jsonfilepath [jsfunctionname]')
