use*_*315 210 javascript json
我在本地系统中保存了一个JSON文件并创建了一个JavaScript文件,以便读取JSON文件并打印出数据.这是JSON文件:
{"resource":"A","literals":["B","C","D"]}
假设这是JSON文件的路径:/Users/Documents/workspace/test.json.
任何人都可以帮我写一段简单的代码来阅读JSON文件并在JavaScript中打印数据吗？
小智 167
要使用javascript读取外部Local JSON文件(data.json),首先要创建data.json文件:
data = '[{"name" : "Ashwin", "age" : "20"},{"name" : "Abhinandan", "age" : "20"}]';
提及脚本源中json文件的路径以及javascript文件.
<script type="text/javascript" src="data.json"></script>
<script type="text/javascript" src="javascrip.js"></script>
从json文件中获取Object
var mydata = JSON.parse(data);
alert(mydata[0].name);
alert(mydata[0].age);
alert(mydata[1].name);
alert(mydata[1].age);
有关更多信息,请参阅此参考.
Sta*_*ano 113
.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);
});
此函数也可用于通过覆盖mime类型参数来加载一个.html或多个.txt文件"text/html","text/plain"等等.
Chr*_*ord 79
您无法对本地资源进行AJAX调用,因为请求是使用HTTP进行的.
解决方法是运行本地Web服务器,提供文件并对localhost进行AJAX调用.
在帮助您编写代码以读取JSON方面,您应该阅读以下文档jQuery.getJSON():
http://api.jquery.com/jQuery.getJSON/
Sye*_*ebe 26
[{"name":"ay","id":"533"},
{"name":"kiy","id":"33"},
{"name":"iy","id":"33"},
{"name":"iy","id":"3"},
{"name":"kiy","id":"35"},
{"name":"kiy","id":"34"}]'utf8'参数readFileSync:这使得它不返回Buffer(虽然JSON.parse可以处理它),而是一个字符串.我正在创建一个服务器来查看结果...var fs=require('fs');
var data=fs.readFileSync('words.json', 'utf8');
var words=JSON.parse(data);
var bodyparser=require('body-parser');
console.log(words);
var express=require('express');
var app=express();
var server=app.listen(3030,listening);
function listening(){
console.log("listening..");
}
app.use(express.static('website'));
app.use(bodyparser.urlencoded({extended:false}));
app.use(bodyparser.json()); app.get('/get/:id',function(req,res){
var i;
for(i=0;i<words.length;++i)
{
if(words[i].id==req.params.id){
res.send(words[i]);
}
}
console.log("success");
});localhost:3030/get/33它将提供与该id相关的详细信息....并且您也按名称阅读.我的json文件有这个代码的simillar名称你可以得到一个名字的详细信息....并且它没有打印所有的simillar名称 app.get('/get/:name',function(req,res){
var i;
for(i=0;i<words.length;++i)
{
if(words[i].id==req.params.name){
res.send(words[i]);
}
}
console.log("success");
});app.get('/get/name/:name',function(req,res){
word = words.filter(function(val){
return val.name === req.params.name;
});
res.send(word);
console.log("success");
});app.get('/all',sendAll);
function sendAll(request,response){
response.send(words);
}
Ser*_* C. 20
你可以像 ES6 模块一样导入它；
import data from "/Users/Documents/workspace/test.json"
mus*_*ons 18
你可以简单地做:
let json = require('/Users/Documents/workspace/test.json');
请注意:文件加载一次,后续调用将使用缓存.
Ale*_*sky 14
使用Fetch API是最简单的解决方案：
fetch("test.json")
.then(response => response.json())
.then(json => console.log(json));
它在Firefox中完美运行，但是在Chrome中，您必须自定义安全设置。
lau*_*hub 11
您可以访问本地文件,具体取决于您的浏览器.但这可能不适用于您应用的所有用户.
为此,您可以尝试以下说明:http://www.html5rocks.com/en/tutorials/file/dndfiles/
加载文件后,您可以使用以下方法检索数据:
var jsonData = JSON.parse(theTextContentOfMyFile);
小智 11
您导入 JSON 文件的 JS 文件应该是一个模块：
<script type="module" src="script.js"></script>
然后在里面script.js导入你的json文件：
import data from "./data.json" assert { type: "json" };
您可以检查数据是否已加载console.log(data)
小智 9
如果您使用的是本地文件,为什么不将数据打包为js对象？
data.js
MyData = { resource:"A",literals:["B","C","D"]}
没有XMLHttpRequests,没有解析,只是MyData.resource直接使用
正如许多人之前提到的，使用AJAX调用无法正常工作。但是，有一种解决方法。使用输入元素，可以选择文件。
所选文件（.json）必须具有以下结构：
[
{"key": "value"},
{"key2": "value2"},
...
{"keyn": "valuen"},
]
<input type="file" id="get_the_file">
然后，您可以使用带有FileReader（）的JS来读取文件：
document.getElementById("get_the_file").addEventListener("change", function() {
var file_to_read = document.getElementById("get_the_file").files[0];
var fileread = new FileReader();
fileread.onload = function(e) {
var content = e.target.result;
// console.log(content);
var intern = JSON.parse(content); // Array of Objects.
console.log(intern); // You can index every object
};
fileread.readAsText(file_to_read);
});
小智 8
非常简单.
将您的json文件重命名为".js"而不是".json".
<script type="text/javascript" src="my_json.js"></script>
所以请正常关注您的代码.
<script type="text/javascript">
var obj = JSON.parse(contacts);
但是,仅仅是为了获取信息,我的json的内容看起来像下面的剪辑.
contacts='[{"name":"bla bla", "email":bla bla, "address":"bla bla"}]';
您可以在异步等待的帮助下使用 fetch() 来完成此操作。这是从 url 获取数据的最新且最安全的方式。
const url = "../asset/videoData.json";
const fetchJson = async () => {
try {
const data = await fetch(url);
const response = await data.json();
} catch (error) {
console.log(error);
}
};
您也可以使用它从外部 url 获取数据。
仅当您的本地主机上运行本地网络服务器时，上述所有解决方案才有效。如果您想在不使用 Web 服务器的情况下实现此目的，则可能需要通过使用文件上传控件上传 JSON 文件来进行一些手动操作。由于安全风险，如果没有本地服务器，浏览器将不会提供此功能。
您也可以在没有本地网络服务器的情况下解析上传的文件。这是我已经实现类似问题的解决方案的示例代码。
<div id="content">
<input type="file" name="inputfile" id="inputfile">
<br>
<h2>
<pre id="output"></pre>
</h2>
</div>
<script type="text/javascript">
document.getElementById('inputfile')
.addEventListener('change', function () {
let fileReader = new FileReader();
fileReader.onload = function () {
let parsedJSON = JSON.parse(fileReader.result);
console.log(parsedJSON);
// your code to consume the json
}
fileReader.readAsText(this.files[0]);
})
</script>
就我而言，我想读取本地 JSON 文件并将其显示在桌面上的 html 文件中，这就是我所要做的。
注意：不要尝试使用 JavaScript 自动上传文件，即使由于浏览器施加的相同安全限制，这也是不允许的。
小智 5
只需使用 $.getJSON 然后使用 $.each 来迭代键/值对。JSON 文件和功能代码的内容示例：
{
{
"key": "INFO",
"value": "This is an example."
}
}
var url = "file.json";
$.getJSON(url, function (data) {
$.each(data, function (key, model) {
if (model.key == "INFO") {
console.log(model.value)
}
})
});
| 归档时间： |
|
| 查看次数： |
791395 次 |
| 最近记录： |