小开

最佳答案

$.getJSON是异步的，所以你应该这样做:

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

小开

如果您正在使用JSON的本地数组-正如您在问题(test.json)中的示例中所示，那么您可以使用JQuery的parseJSON()方法->

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

getJSON()用于从远程站点获取JSON -它不会在本地工作(除非你使用本地HTTP服务器)

小开

最近D3js能够处理本地json文件。

这就是问题所在 https://github.com/mbostock/d3/issues/673 < / p >

这个补丁是为了让D3处理本地json文件。 https://github.com/mbostock/d3/pull/632 < / p >

小开

我也有同样的需求(测试我的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文件时发现此线程。这个方法对我很有效。

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)
}

．.． And的用法是这样的…

load_json("test2.html.js")

.．.这是<head>…

<head>
<script type="text/javascript" src="test.html.js" class="json"></script>
</head>

小开

如果您想让用户选择本地json文件(文件系统上的任何位置)，那么下面的解决方案是可行的。

它使用FileReader和JSON。解析器(没有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/

小开

$.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与闭包库:

goog.net.XhrIo.send('../appData.json', function(evt) {
var xhr = evt.target;
var obj = xhr.getResponseJson(); //JSON parsed as Javascript object
console.log(obj);
});

小开

如果您正在寻找一些快速和肮脏的东西，只需加载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"}
})();

我应该提到，你的堆大小(在Chrome)是大约4gb，所以如果你的数据大于，你应该找到另一种方法。如果你想检查另一个浏览器试试这个:

window.performance.memory.jsHeapSizeLimit / 1024 / 1024 / 1024 + " GBs"
// "4.046875 GBs"

更新ES6:

而不是使用<script>标记来加载你的数据，你可以直接在你的main.js中使用import assert加载它

import data from './data.json' assert {type: 'json'};

小开

在angular(或任何其他框架)中，你可以使用http get加载我像这样使用它:

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

希望这能有所帮助。

小开

如果你在你的本地机器上安装了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]')

小开

如何使用`XMLHttpRequest`加载本地`json`文件

ES5版本

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

ES6版本

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

在线演示

https://cdn.xgqfrms.xyz/ajax/XMLHttpRequest/index.html

小开

我不敢相信有多少次这个问题在没有理解和/或用原始海报的实际代码解决问题的情况下被回答了。也就是说，我自己是一个初学者(只有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"
}

小开

以一种更现代的方式，你现在可以使用获取API:

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

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

或async/await

async function printJSON() {
const response = await fetch("test.json");
const json = await response.json();
console.log(json);
}

来源:

如何使用async/await获取 . 0

小开

我喜欢使用的一种方法是用一个对象文字填充/包装json，然后用.jsonp文件扩展名保存文件。此方法还将保持原始json文件(test.json)不变，因为您将使用新的jsonp文件(test.jsonp)。包装器上的名称可以是任何东西，但它必须与用于处理jsonp的回调函数的名称相同。我会用你的测试。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中)。

图- 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"]);

我为我的cordova应用程序这样做，就像我为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");

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

小开

我很惊讶从es6导入没有提到(使用小文件)

例:import test from './test.json'

webpack 2 & lt;使用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';

如果我试图从json-loader中忽略loader，我从webpack中得到以下错误:

BREAKING CHANGE:不再允许省略'-loader'后缀当使用加载器时。你需要指定'json-loader'而不是'json'，看到https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed < / p >

小开

对我有效的方法如下:

输入:

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, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
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>

小开

在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的发布说明

小开

我只是稍微编辑了一下JSON文件。

__abc0 =>

在JSON文件中，(将其设置为JS变量)

__abc0 =>

最后，

export default x;

然后,

import JsonObj from './myfile.js';

小开

最简单的方法:保存json文件为*.js，并包括到HTML模板作为脚本。

Js文件是这样的:

let fileJsonData = {
someField: someValue,
...
}

包括如下内容:

...
<script src="./js/jsonData.js"></script>
...

include之后，你可以在全局范围内调用fileJsonData。

小开

从头开始添加到JSON文件中

var object1 = [

在最后

保存它

然后用纯js加载它

<script type="text/javascript" src="1.json"></script>

现在你可以使用它作为object1 -它已经加载!

完美的工作在Chrome和没有任何额外的库

小开

我如何能够加载数据从json文件在一个JavaScript变量使用简单的JavaScript:

let mydata;
fetch('datafile.json')
.then(response => response.json())
.then(jsonResponse => mydata = jsonResponse)

在这里发帖，因为我没有找到这种“解决方案”。我一直在寻找。

注意:我使用的本地服务器通过通常的&;__abc0 &;命令。

小开

$.getJSON只适用于我在Chrome 105.0.5195.125中使用await，它工作于module的script type。

<script type="module">
const myObject = await $.getJSON('./myObject.json');
console.log('myObject: ' + myObject);
</script>

没有await，我看到:

Uncaught TypeError: myObject is not iterable

当解析myObject时。

没有type="module"我看到:

Uncaught SyntaxError: await is only valid in async functions and the top level bodies of modules

加载本地JSON文件

更新ES6:

如何使用XMLHttpRequest加载本地json文件

ES5版本

ES6版本

在线演示

如何使用`XMLHttpRequest`加载本地`json`文件