我正在尝试加载本地 JSON 文件，但它不起作用。这是我的 JavaScript 代码（使用 jQuery）：
var json = $.getJSON("test.json");
var data = eval("(" +json.responseText + ")");
document.write(data["a"]);
test.json 文件：
{"a" : "b", "c" : "d"}
什么都没有显示，Firebug 告诉我这data是未定义的。在 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
要求.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) {
let lines = e.target.result;
var newArr = JSON.parse(lines);
}
}
</script>
</body>
</html>
这是关于 FileReader 的一个很好的介绍：http: //www.html5rocks.com/en/tutorials/file/dndfiles/
如果您正在寻找快速而肮脏的东西，只需将数据加载到 HTML 文档的头部。
数据.js
var DATA = {"a" : "b", "c" : "d"};
索引.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"}
})();
我应该提到你的堆大小（在 Chrome 中）大约是 4GB，所以如果你的数据比这个大，你应该找到另一种方法。如果你想检查另一个浏览器试试这个：
window.performance.memory.jsHeapSizeLimit / 1024 / 1024 / 1024 + " GBs"
// "4.046875 GBs"
XMLHttpRequest加载本地json文件// required use of an anonymous callback,
// as .open() will NOT return a value but simply returns undefined in asynchronous mode!
function loadJSON(callback) {
var xObj = new XMLHttpRequest();
xObj.overrideMimeType("application/json");
xObj.open('GET', './data.json', true);
// 1. replace './data.json' with the local path of your file
xObj.onreadystatechange = function() {
if (xObj.readyState === 4 && xObj.status === 200) {
// 2. call your callback function
callback(xObj.responseText);
}
};
xObj.send(null);
}
function init() {
loadJSON(function(response) {
// 3. parse JSON string into JSON Object
console.log('response =', response);
var json = JSON.parse(response);
console.log('your local JSON =', JSON.stringify(json, null, 4));
// 4. render to your page
const app = document.querySelector('#app');
app.innerHTML = '<pre>' + JSON.stringify(json, null, 4) + '</pre>';
});
}
init();<section id="app">
loading...
</section>// required use of an anonymous callback,
// as .open() will NOT return a value but simply returns undefined in asynchronous mode!
const loadJSON = (callback) => {
const xObj = new XMLHttpRequest();
xObj.overrideMimeType("application/json");
// 1. replace './data.json' with the local path of your file
xObj.open('GET', './data.json', true);
xObj.onreadystatechange = () => {
if (xObj.readyState === 4 && xObj.status === 200) {
// 2. call your callback function
callback(xObj.responseText);
}
};
xObj.send(null);
}
const init = () => {
loadJSON((response) => {
// 3. parse JSON string into JSON Object
console.log('response =', response);
const json = JSON.parse(response);
console.log('your local JSON =', JSON.stringify(json, null, 4));
// 4. render to your page
const app = document.querySelector('#app');
app.innerHTML = `<pre>${JSON.stringify(json, null, 4)}</pre>`;
});
}
init();<section id="app">
loading...
</section>我无法相信这个问题已经回答了多少次，而没有理解和/或使用原始海报的实际代码解决问题。也就是说，我自己是一个初学者（只有 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"
}
我很惊讶没有提到从 es6 导入（与小文件一起使用）
前任：import test from './test.json'
webpack 2< 使用文件的json-loader默认值.json。
https://webpack.js.org/guides/migrating/#json-loader-is-not-required-anymore
对于打字稿：
import test from 'json-loader!./test.json';
TS2307 (TS) 找不到模块 'json-loader!./suburbs.json'
为了让它工作，我必须先声明模块。我希望这将为某人节省几个小时。
declare module "json-loader!*" {
let json: any;
export default json;
}
...
import test from 'json-loader!./test.json';
如果我试图省略loader，json-loader我会收到以下错误webpack：
重大更改：不再允许在使用加载程序时省略“-loader”后缀。您需要指定 'json-loader' 而不是 'json'，请参阅https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed
从头开始添加到您的 JSON 文件
var object1 = [
最后
]
保存
然后用纯js加载它
<script type="text/javascript" src="1.json"></script>
现在您可以将它用作 object1 - 它已经加载了！
在 Chrome 中完美运行，无需任何额外的库
最近D3js能够处理本地 json 文件。
这是问题 https://github.com/mbostock/d3/issues/673
这是 D3 使用本地 json 文件的补丁程序。 https://github.com/mbostock/d3/pull/632
尝试（不成功）加载本地 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>
我所做的是稍微编辑 JSON 文件。
myfile.json=>myfile.js
在 JSON 文件中，（使其成为 JS 变量）
{name: "Whatever"}=>var x = {name: "Whatever"}
在末尾，
export default x;
然后，
import JsonObj from './myfile.js';
在 TypeScript 中，您可以使用 import 来加载本地 JSON 文件。例如加载 font.json：
import * as fontJson from '../../public/fonts/font_name.json';
这需要一个 tsconfig 标志 --resolveJsonModule：
// tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"resolveJsonModule": true,
"esModuleInterop": true
}
}
有关更多信息，请参阅 typescript 的发行说明：https ://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-9.html
在角度（或任何其他框架）中，您可以使用 http get 加载我使用它是这样的：
this.http.get(<path_to_your_json_file))
.success((data) => console.log(data));
希望这可以帮助。
我喜欢使用的一种方法是使用对象文字填充/包装 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 文件。作为奖励，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
请注意，在 js 文件中声明并分配了 json 变量。
如果您使用 JSON 的本地数组 - 正如您在问题 (test.json) 中的示例中所示，那么您可以parseJSON()使用 JQuery 的方法 ->
var obj = jQuery.parseJSON('{"name":"John"}');
alert( obj.name === "John" );
getJSON()用于从远程站点获取 JSON - 它不会在本地工作（除非您使用本地 HTTP 服务器）
$.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_);
}
});
}
});
我还没有找到使用 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_str = String.raw`[{"name": "Jeeva"}, {"name": "Kumar"}]`;
obj = JSON.parse(json_str);
console.log(obj[0]["name"]);我为我的科尔多瓦应用程序做了这个，就像我为 JSON 创建了一个新的 javascript 文件并将 JSON 数据粘贴到String.raw然后解析它JSON.parse
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");
我所做的是，首先，从网络选项卡记录服务的网络流量，然后从响应正文中，复制 json 对象并将其保存在本地文件中。然后用本地文件名调用函数，应该可以在上面的 jsonOutout 中看到 json 对象。
对我有用的是以下内容：
输入：
http://ip_address//some_folder_name//render_output.html?relative/path/to/json/fie.json
Javascript代码：
<html>
<head>
<style>
pre {}
.string { color: green; }
.number { color: darkorange; }
.boolean { color: blue; }
.null { color: magenta; }
.key { color: red; }
</style>
<script>
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();
</script>
</head>
<body>
</body>
</html>
最简单的方法：将 json 文件保存为 *.js 并作为脚本包含到 html 模板中。
js文件如下：
let fileJsonData = {
someField: someValue,
...
}
包括这样的：
...
<script src="./js/jsonData.js"></script>
...
包含后，您可以fileJsonData在全局范围内调用。
如果您在本地机器上安装了 Python（或者您不介意安装 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]')