我已经在我的本地系统中保存了一个JSON文件,并创建了一个JavaScript文件,以便读取JSON文件并打印数据。以下是JSON文件:
{"resource":"A","literals":["B","C","D"]}
假设这是JSON文件的路径:/Users/Documents/workspace/test.json。
谁能帮我写一段简单的代码来读取JSON文件并用JavaScript打印数据?
我已经在我的本地系统中保存了一个JSON文件,并创建了一个JavaScript文件,以便读取JSON文件并打印数据。以下是JSON文件:
{"resource":"A","literals":["B","C","D"]}
假设这是JSON文件的路径:/Users/Documents/workspace/test.json。
谁能帮我写一段简单的代码来读取JSON文件并用JavaScript打印数据?
当前回答
您可以使用d3.js导入JSON文件。在你的html主体上调用d3:
<script src="https://d3js.org/d3.v5.min.js"></script>
然后把这个放在你的js脚本上:
d3.json("test.json").then(function(data_json) {
//do your stuff
})
其他回答
你可以像ES6模块一样导入它;
import data from "/Users/Documents/workspace/test.json"
要使用javascript读取外部本地JSON文件(data. JSON),首先要创建数据。json文件:
data = '[{"name" : "Ashwin", "age" : "20"},{"name" : "Abhinandan", "age" : "20"}]';
然后,
在脚本源代码中提到json文件和javascript文件的路径 <script type="text/javascript" src="data.json"></script> .json . <script type="text/javascript" src="javascript.js"></script> .js 从json文件中获取Object var mydata = JSON.parse(data); 警报(mydata [0] . name); alert (mydata [0] .age); 警报(mydata [1] . name); alert (mydata [1] .age);
有关更多信息,请参阅此参考资料。
使用jQuery和ajax可以很好地读取JSON文件和操作数据
$(document).ready(function () {
$.ajax({
url: 'country.json',
type: 'GET',
dataType: 'json',
success: function (code, statut) {
for (let i in code) {
console.log(i)
}
}
});
});
首先,创建一个json文件。在这个例子中,我的文件是words.json
[(“点名”:“艾”,“id”:“533”), (“点名”:“kiy”、“id”:“33”)、 (“点名”:“报告”、“id”:“33”)、 (“点名”:“报告”、“id”:“3”), (“点名”:“kiy”、“id”:“35”)、 (“点名”:“kiy”、“id”:“34”)]
这是我的代码,也就是node。js。请注意readFileSync的'utf8'参数:这使得它返回的不是Buffer(尽管JSON。Parse可以处理它),但是一个字符串。我正在创建一个服务器来查看结果…
var fs=require('fs'); var data=fs.readFileSync('words.json', 'utf8'); var words=JSON.parse(data); var bodyparser=require('body-parser'); 控制台.log(字); var express=require('express'); var app=express(); var server=app.listening(3030,listening); 函数侦听(){ console.log(“聆听..”); } app.use(express.static('website')); app.use(bodyparser.urlencoded({extended:false})); app.use(bodyparser.json());
当你想读取特定的id细节时,你可以把代码提到..
应用程序。得到(' /得到/ res:函数(req, id’)( var的; for (i = 0; i < words . length; + + i) ( if (words [i]。id = = id req params。)( 发送(words [res]); ) ) 游戏机。log(“成功”); ');
当您作为localhost:3030/get/33输入url时,它将给出与该id相关的详细信息....你也念名字。我的json文件有类似的名称与这段代码,你可以得到一个名称详细信息....它并没有打印所有相似的名字
应用程序。得到(' /得到/ res:函数(req, name’)( var的; for (i = 0; i < words . length; + + i) ( if (words [i]。id = = req . params名称)( 发送(words [res]); ) ) 游戏机。log(“成功”); ');
如果希望读取类似的名称详细信息,可以使用这段代码。
app.get(/ /名称/:名称,功能(要求,res) { Word = words.filter(函数(val){ 返回val.name === req.params.name; }); res.send(词); console.log(“成功”); });
如果您想读取文件中的所有信息,请使用下面的代码。
app.get (' / ', sendAll); 函数sendAll(请求、响应){ response.send(单词); }
从硬盘加载.json文件是一个异步操作,因此它需要指定一个回调函数在文件加载后执行。
function readTextFile(file, callback) {
var rawFile = new XMLHttpRequest();
rawFile.overrideMimeType("application/json");
rawFile.open("GET", file, true);
rawFile.onreadystatechange = function() {
if (rawFile.readyState === 4 && rawFile.status == "200") {
callback(rawFile.responseText);
}
}
rawFile.send(null);
}
//usage:
readTextFile("/Users/Documents/workspace/test.json", function(text){
var data = JSON.parse(text);
console.log(data);
});
这个函数也适用于加载。html或。txt文件,通过覆盖mime类型参数为"text/html", "text/plain"等。