Я сохранил файл JSON в локальной системе и создал файл JavaScript, чтобы прочитать файл JSON и вывести данные. Вот файл JSON:
{"resource":"A","literals":["B","C","D"]}
Допустим, путь к файлу JSON таков: /Users/Documents/workspace/test.json
.
Не мог бы кто-нибудь помочь мне написать простой кусок кода для чтения JSON файла и печати данных внутри него на JavaScript?
Для чтения внешнего локального JSON-файла (data.json) с помощью javascript сначала создайте файл data.json:
data = '[{"name" : "Ashwin", "age" : "20"},{"name" : "Abhinandan", "age" : "20"}]';
<script type="text/javascript" src="data.json"></script>
<script type="text/javascript" src="javascrip.js"></script>
var mydata = JSON.parse(data);
alert(mydata[0].name);
alert(mydata[0].age);
alert(mydata[1].name);
alert(mydata[1].age);
Более подробную информацию см. в этой ссылке.
Загрузка файла .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 type на "text/html"
, "text/plain"
и т.д.
Вы не можете сделать AJAX вызов к локальному ресурсу, так как запрос выполняется с использованием HTTP.
Обходной путь - запустить локальный веб-сервер, передать файл и выполнить AJAX-вызов на localhost.
Что касается помощи в написании кода для чтения JSON, вам следует прочитать документацию по jQuery.getJSON()
:
[{"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
: это заставляет его возвращать не буфер
(хотя 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 файл имеет похожие имена, с помощью этого кода вы можете получить информацию об одном имени.... и он не выводит все похожие имена. 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);
}
Когда в Node.js или при использовании require.js в браузере, вы можете просто сделать:
let json = require('/Users/Documents/workspace/test.json');
Обратите внимание: файл загружается один раз, последующие вызовы будут использовать кэш.
Использование Fetch API - самое простое решение:
fetch("test.json")
.then(response => response.json())
.then(json => console.log(json));
Он отлично работает в Firefox, но в Chrome вам придется настроить параметры безопасности.
В зависимости от браузера вы можете получить доступ к локальным файлам. Но это может работать не для всех пользователей вашего приложения.
Для этого вы можете попробовать воспользоваться инструкциями отсюда: http://www.html5rocks.com/en/tutorials/file/dndfiles/.
После загрузки файла вы можете получить данные, используя:
var jsonData = JSON.parse(theTextContentOfMyFile);
Если вы используете локальные файлы, почему нельзя просто packade данные в JS-объект?
data.js
MyData = { resource:"A",literals:["B","C","D"]}
Нет запросы XMLHttpRequest, без разбора, просто использовать `файл mydata.ресурс напрямую
Очень просто.<БР> Переименуйте JSON файл, чтобы ".в JS-то" вместо " по.JSON с помощью".<БР>
<script type="text/javascript" src="my_json.js"></script>
Так выполните ваш код нормально.
<script type="text/javascript">
var obj = JSON.parse(contacts);
Тем не менее, просто для информации, содержание моих формате JSON это's выглядит как ниже СНиП.
contacts='[{"name":"bla bla", "email":bla bla, "address":"bla bla"}]';
<БР> Как много людей упоминалось ранее, это не't работа с помощью AJAX-вызов. Однако, там'ы способ обойти ее. С помощью входного элемента, вы можете выбрать свой файл.
Файл выбран (.в JSON) должны иметь следующую структуру:
[
{"key": "value"},
{"key2": "value2"},
...
{"keyn": "valuen"},
]
<БР>
<input type="file" id="get_the_file">
Затем вы можете прочитать файл с помощью JS с FileReader():
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);
});
Просто используйте $.помощью метода getjson, а затем $.каждый для прохода пара ключ /значение. Пример содержимого файла 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)
}
})
});
Вы можете использовать XMLHttpRequest() метод:
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var myObj = JSON.parse(this.responseText);
//console.log("Json parsed data is: " + JSON.stringify(myObj));
}
};
xmlhttp.open("GET", "your_file_name.json", true);
xmlhttp.send();
Вы можете увидеть ответ myObj с помощью консоли.заявление журнала(закомментирован).
Если вы знаете, в AngularJS, вы можете использовать $HTTP:
MyController.$inject = ['myService'];
function MyController(myService){
var promise = myService.getJsonFileContents();
promise.then(function (response) {
var results = response.data;
console.log("The JSON response is: " + JSON.stringify(results));
})
.catch(function (error) {
console.log("Something went wrong.");
});
}
myService.$inject = ['$http'];
function myService($http){
var service = this;
service.getJsonFileContents = function () {
var response = $http({
method: "GET",
url: ("your_file_name.json")
});
return response;
};
}
Если у вас есть файл в другую папку указать полный путь, а не именем.
Поскольку у вас есть веб-приложение, у вас может быть клиентом и сервером.
Если у вас есть только ваш браузер, и вы хотите прочитать локальный файл с помощью JavaScript, который работает в вашем браузере, это означает, что у вас есть только клиент. По соображениям безопасности браузера не позволит вам сделать такую вещь.
Однако, как lauhub описано выше, это, кажется, работает:
http://www.html5rocks.com/en/tutorials/file/dndfiles/
Другим решением является установка где-то в вашей машине веб-сервер (в Windows или обезьяна в Linux) и с помощью XMLHttpRequest или библиотеки D3, запросить файл с сервера и читать его. Сервер будет загружать файл из локальной файловой системы, и служить его к вам через интернет.
Вы должны создать новый экземпляр XMLHttpRequest и загрузить содержимое файла JSON.
Этот совет работает для меня (https://codepen.io/KryptoniteDove/post/load-json-file-locally-using-pure-javascript):
function loadJSON(callback) {
var xobj = new XMLHttpRequest();
xobj.overrideMimeType("application/json");
xobj.open('GET', 'my_data.json', true); // Replace 'my_data' with the path to your file
xobj.onreadystatechange = function () {
if (xobj.readyState == 4 && xobj.status == "200") {
// Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
callback(xobj.responseText);
}
};
xobj.send(null);
}
loadJSON(function(response) {
// Parse JSON string into object
var actual_JSON = JSON.parse(response);
});
Одно простое решение-это поставить ваш файл JSON внутри локально запущенным сервером. для этого в терминале перейти в папку проекта и запустить локальный сервер на некоторое число e порт.г 8181
python -m SimpleHTTPServer 8181
Перейдя к http://localhost:8181/ должна отображать все файлы, в том числе в JSON. Не забудьте установить Python, если вы Don'т уже есть.
Мне понравилось то, что Стано/Meetar прокомментировал выше. Я использую его для чтения .JSON-файлы. Я расширил свои примеры, используя обещание. Вот plunker то же самое. https://plnkr.co/edit/PaNhe1XizWZ7C0r3ZVQx?p=preview
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("DATA.json", function(text){
// var data = JSON.parse(text);
// console.log(data);
// });
var task1 = function (){
return new Promise (function(resolve, reject){
readTextFile("DATA.json", function(text){
var data = JSON.parse(text);
console.log('task1 called');
console.log(data);
resolve('task1 came back');
});
});
};
var task2 = function (){
return new Promise (function(resolve, reject){
readTextFile("DATA2.json", function(text){
var data2 = JSON.parse(text);
console.log('task2 called');
console.log(data2);
resolve('task2 came back');
});
});
}
Promise.race([task1(), task2()])
.then(function(fromResolve){
console.log(fromResolve);
});
Чтение JSON может быть перемещен в другую функцию, для сухой, но пример здесь-это скорее демонстрация того, как использовать обещания.
Если вы можете запустить локальный веб-сервер (как предложил Chris P выше), и если вы можете использовать jQuery, вы можете попробовать http://api.jquery.com/jQuery.getJSON/.
Вы могли бы использовать D3 для обработки обратного вызова и загрузки данных в локальный файл в формате JSON.формат JSON
, следующим образом:
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
d3.json("data.json", function(error, data) {
if (error)
throw error;
console.log(data);
});
</script>
Я взял Стано'С]1 Отличный ответ и обвил его обещание. Это может быть полезно, если вы Don'т иметь возможность как узел или webpack, чтобы возвратиться, чтобы загрузить JSON-файл из файловой системы:
// wrapped XMLHttpRequest in a promise
const readFileP = (file, options = {method:'get'}) =>
new Promise((resolve, reject) => {
let request = new XMLHttpRequest();
request.onload = resolve;
request.onerror = reject;
request.overrideMimeType("application/json");
request.open(options.method, file, true);
request.onreadystatechange = () => {
if (request.readyState === 4 && request.status === "200") {
resolve(request.responseText);
}
};
request.send(null);
});
Вы можете называть это так:
readFileP('<path to file>')
.then(d => {
'<do something with the response data in d.srcElement.response>'
});