关于javascript：加载本地JSON文件

Loading local JSON file

我正在尝试加载本地JSON文件，但它不起作用。这是我的javascript代码(使用jquery:

1
2
3

var json = $.getJSON("test.json");
var data = eval("(" +json.responseText +")");
document.write(data["a"]);

test.json文件：

1	{"a" :"b","c" :"d"}

没有显示任何内容，Firebug会告诉我数据未定义。在Firebug中，我可以看到json.responseText，它是好的和有效的，但是当我复制行时，它是奇怪的：

1	var data = eval("(" +json.responseText +")");

在Firebug的控制台中，它可以工作，我可以访问数据。

谁有解决办法？

相关讨论

EDCOX1 0Ω是异步的，所以您应该这样做：

1
2
3

$.getJSON("test.json", function(json) {
console.log(json); // this will show the info it in firebug console
});

相关讨论

我有同样的需求(测试我的AngularJS应用程序)，唯一的方法是使用Require.js：

1	var json = require('./data.json'); //(with path)

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

有关使用nodejs读取文件的详细信息：http://docs.nodejitsu.com/articles/file-system/how-to-read-files-in-nodejs

require.js：http://require js.org/

相关讨论

如果您想让用户选择本地JSON文件(文件系统中的任何位置)，那么下面的解决方案可以工作。

它使用filereader和json.parser(不使用jquery)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

<html>
<body>

<form id="jsonFile" name="jsonFile" enctype="multipart/form-data" method="post">

<fieldset>
Json File
<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) {
let lines = e.target.result;
var newArr = JSON.parse(lines);
}
}

</body>
</html>

这里有一个关于文件阅读器的很好的介绍：http://www.html5rocks.com/en/tutorials/file/dndfiles/

相关讨论

如果您正在寻找一些快速和肮脏的东西，只需将数据加载到HTML文档的头部。

数据JS

1	var DATA = {"a" :"b","c" :"d"};

索引文件

1
2
3
4
5
6
7

MIN JS

1
2
3

(function(){
console.log(DATA) // {"a" :"b","c" :"d"}
})()

相关讨论

以更现代的方式，您现在可以使用fetch API：

1
2
3

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

所有现代浏览器都支持fetch API。(Internet Explorer没有，但Edge有！)

来源：

使用取回
取回诉讼
我能用……吗？

相关讨论

ace.webgeeker.xyz公司

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

ES6版本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

相关讨论

我很惊讶没有提到从ES6导入(与小文件一起使用)

例：import test from './test.json'。

webpack 2<使用json-loader作为.json文件的默认值。

https://webpack.js.org/guides/migrating/json加载器不再是必需的

TypeScript：

1	import test from 'json-loader!./test.json';

TS2307 (TS) Cannot find module 'json-loader!./suburbs.json'

为了使它正常工作，我必须先声明模块。我希望这能为某人节省几个小时。

1
2
3
4
5
6
7
8

declare module"json-loader!*" {
let json: any;
export default json;
}

...

import test from 'json-loader!./test.json';

如果我试图从EDCOX1中省略EDCOX1×4，则从EDCOX1〔6〕中得到以下错误：

BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix
when using loaders.
You need to specify 'json-loader' instead of 'json',
see https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed

相关讨论

我无法相信，有多少次这个问题的答案没有理解和/或解决与原始海报的实际代码的问题。也就是说，我自己也是一个初学者(只有2个月的编码时间)。我的代码确实可以很好地工作，但是可以随时建议对它进行任何更改。解决方案如下：

1
2
3
4
5
6
7
8
9

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

下面是一个较短的方法来编写我上面提供的代码：

1	var json = JSON.parse($.getJSON({'url':"http://spoonertuner.com/projects/test/test.json", 'async': false}).responseText);

您还可以使用$.Ajax而不是$.GetJSon以完全相同的方式编写代码：

1	var json = JSON.parse($.ajax({'url':"http://spoonertuner.com/projects/test/test.json", 'async': false}).responseText);

最后，最后一种方法是将$.Ajax包装在一个函数中。我不能接受这一点，但我做了一些修改。我测试了它，它工作并产生与我上面的代码相同的结果。我在这里找到了这个解决方案——>将JSON加载到变量中

1
2
3
4
5
6
7
8
9
10
11
12
13
14

您在上面的代码中看到的test.json文件托管在我的服务器上，并且包含他(原始海报)发布的相同的json数据对象。

1
2
3
4

{
"a" :"b",
"c" :"d"
}

尝试是这样的(但也请注意，JavaScript不能访问客户端文件系统)：

1
2
3

$.getJSON('test.json', function(data) {
console.log(data);
});

相关讨论

最近D3JS能够处理本地JSON文件。

这就是问题所在https://github.com/mbostock/d3/issues/673(https://github.com/mbostock/d3/issues/673)

这是用于d3处理本地JSON文件的补丁。https://github.com/mbostock/d3/pull/632

相关讨论

在尝试(未成功)加载本地JSON文件时找到此线程。这个解决方案对我有效…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

…像这样使用…

1	load_json("test2.html.js")

…这是…

1
2
3

相关讨论

在Angular(或任何其他框架)中，可以使用HTTP GET加载我是这样使用的：

1 2	this.http.get(<path_to_your_json_file)) .success((data) => console.log(data));

希望这有帮助。

在typescript中，可以使用import加载本地JSON文件。例如，加载FONT.json：

1	import * as fontJson from '../../public/fonts/font_name.json';

这需要tsconfig标志--resolvejsonmodule:

1
2
3
4
5
6
7
8
9

// tsconfig.json

{
"compilerOptions": {
"module":"commonjs",
"resolveJsonModule": true,
"esModuleInterop": true
}
}

有关详细信息，请参阅typescript的发行说明：https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-9.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

$.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_);
}
});

}
});

如果您使用的是JSON的本地数组，正如您在问题(test .jSON)中显示的那样，那么您可以是jQuery的EDCOX1→1方法。

1 2	var obj = jQuery.parseJSON('{"name":"John"}'); alert( obj.name ==="John" );

EDCOX1×2使用用于从远程站点获取JSON——它将不在本地工作(除非您使用本地HTTP服务器)

我还没有找到任何使用谷歌关闭库的解决方案。因此，为了完成未来访问者的列表，下面介绍如何使用闭包库从本地文件加载JSON：

1
2
3
4
5

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包装添加。

1	json_callback({"a" :"b","c" :"d"});

接下来，在脚本中创建一个具有全局范围的可重用变量来保存返回的JSON。这将使返回的JSON数据可用于脚本中的所有其他函数，而不仅仅是回调函数。

1	var myJSON;

接下来是一个通过脚本注入检索JSON的简单函数。注意，我们不能在这里使用jquery将脚本附加到文档头，因为IE不支持jquery.append方法。下面代码中注释的jquery方法将在其他支持.append方法的浏览器上工作。它作为一个参考来显示差异。

1
2
3
4
5
6
7
8

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结果数据获取到全局变量中。

1
2
3
4

function json_callback(response){
myJSON = response; // Clone response JSON to myJSON object
$('#json_script').remove(); // Remove json_script from the document
}

现在，脚本的任何函数都可以使用点表示法访问JSON数据。举个例子：

1 2	console.log(myJSON.a); // Outputs 'b' to console console.log(myJSON.c); // Outputs 'd' to console

这种方法可能与您习惯看到的有点不同，但有很多优点。首先，可以在本地加载相同的JSONP文件，也可以使用相同的函数从服务器加载相同的JSONP文件。另外，JSONP已经是一种跨域友好格式，也可以很容易地与REST类型的API一起使用。

当然，没有错误处理函数，但是为什么您需要一个呢？如果您无法使用此方法获取JSON数据，那么您可以肯定JSON本身存在一些问题，我将在一个好的JSON验证器上检查它。

您可以将JSON放在一个JavaScript文件中。这可以使用jquery的getScript()函数在本地(甚至在chrome中)加载。

MAP01.JS文件：

1	var json = '{"layers":6,"worldWidth":500,"worldHeight":400}'

MIN JS

1
2
3
4
5
6
7
8
9

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

输出：

1	world width: 500

注意，JSON变量是在JS文件中声明和分配的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

json_str = String.raw`[{"name":"Jeeva
<div class="suo-content">[collapse title=""]<ul><li>如果它是一个javascript文件，为什么要这样做，而不仅仅是使用<wyn>JavaScript Object Notation</wyn>(json)：<wyn>obj = [{"name":"Jeeva"}, {"name":"Kumar"}]</wyn>。</li><li>我使用它是因为我使用Ajax获取了一些JSON数据，这些数据是字符串形式的，所以我使用<wyn>JSON.parse</wyn>来转换为一个javascript对象。</li></ul>[/collapse]</div><p><center>[wp_ad_camp_4]</center></p><hr>
[cc lang="javascript"]function readTextFile(srcfile) {
try { //this is for IE
var fso = new ActiveXObject("Scripting.FileSystemObject");;
if (fso.FileExists(srcfile)) {
var fileReader = fso.OpenTextFile(srcfile, 1);
var line = fileReader.ReadLine();
var jsonOutput = JSON.parse(line);
}

} catch (e) {

}
}

readTextFile("C:\\Users\\someuser\\json.txt");

首先，我在network选项卡中记录服务的网络流量，然后从响应主体中复制JSON对象并将其保存到本地文件中。然后用本地文件名调用函数，您应该能够在上面的jsonAutout中看到json对象。

相关讨论

我的工作是：

输入：

1	http://ip_address//some_folder_name//render_output.html?relative/path/to/json/fie.json

JavaScript代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

<html>
<head>

<style>
pre {}
.string { color: green; }
.number { color: darkorange; }
.boolean { color: blue; }
.null { color: magenta; }
.key { color: red; }
</style>

function output(inp) {
document.body.appendChild(document.createElement('pre')).innerHTML = inp;
}

function gethtmlcontents(){
path = window.location.search.substr(1)
var rawFile = new XMLHttpRequest();
var my_file = rawFile.open("GET", path, true) // Synchronous File Read
//alert('Starting to read text')
rawFile.onreadystatechange = function ()
{
//alert("I am here");
if(rawFile.readyState === 4)
{
if(rawFile.status === 200 || rawFile.status == 0)
{
var allText = rawFile.responseText;
//alert(allText)
var json_format = JSON.stringify(JSON.parse(allText), null, 8)
//output(json_format)
output(syntaxHighlight(json_format));
}
}
}
rawFile.send(null);
}

function syntaxHighlight(json) {
json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
var cls = 'number';
if (/^"/.test(match)) {
if (/:$/.test(match)) {
cls = 'key';
} else {
cls = 'string';
}
} else if (/true|false/.test(match)) {
cls = 'boolean';
} else if (/null/.test(match)) {
cls = 'null';
}
return '<span class="' + cls + '">' + match + '</span>';
});
}

gethtmlcontents();

</head>
<body>
</body>
</html>

如果您的本地计算机上安装了python(或者您不介意安装一个)，下面是一个与浏览器无关的解决本地JSON文件访问问题的方法，我使用：

通过创建将数据作为javascript对象返回的函数，将JSON文件转换为javascript。然后您可以用标记加载它，并调用函数来获取所需的数据。

python代码来了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

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]')