加载本地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]') 
Interesting Posts