Загрузка локального JSON-файла
-
27-10-2019 - |
Вопрос
Я пытаюсь загрузить локальный JSON-файл, но это не сработает.Вот мой JavaScript-код (с использованием jQuery:
var json = $.getJSON("test.json");
var data = eval("(" +json.responseText + ")");
document.write(data["a"]);
Файл test.json:
{"a" : "b", "c" : "d"}
Ничего не отображается, и Firebug сообщает мне, что данные не определены.В 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
require.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/
Более современным способом, теперь вы можете использовать Fetch API:
fetch("test.json")
.then(response => response.json())
.then(json => console.log(json));
Все современные браузеры поддерживают API Fetch. (Internet Explorer нет, но Edge делает!)
источник:
Если вы ищете что -то быстрое и грязное, просто загрузите данные в голову вашего 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"}
})()
Ace.webgeeker.xyz
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);
}
function init() {
loadJSON(function(response) {
// Parse JSON string into object
var actual_JSON = JSON.parse(response);
});
}
ES6 версия
const loadJSON = (callback) => {
let 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 = () => {
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);
}
const init = () => {
loadJSON((response) => {
// Parse JSON string into object
let actual_JSON = JSON.parse(response);
});
}
Я не могу поверить, сколько раз на этот вопрос отвечал без понимания и/или решения проблемы с фактическим кодом первоначального плаката. Тем не менее, я сам новичок (всего 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/migrate/#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
:
Разрыв изменения: больше не разрешается опускать суффикс «-загрузчика» при использовании погрузчиков. Вам нужно указать «json-погрузчик» вместо «json», см. https://webpack.js.org/guides/migrate/#automatic-loader-module-name-extension-removed
Попробуйте такой способ (но также обратите внимание, что JavaScript не имеет доступа к клиентской файловой системе):
$.getJSON('test.json', function(data) {
console.log(data);
});
Совсем недавно 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>
В TypeScript вы можете использовать импорт для загрузки локальных файлов JSON. Например, загрузка font.json:
import * as fontJson from '../../public/fonts/font_name.json';
Это требует флага TSConfig -ResolveJsonModule:
// tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"resolveJsonModule": true,
"esModuleInterop": true
}
}
Для получения дополнительной информации см. Примечания к релизам: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-9.html
В угловой (или в любой другой структуре) вы можете загрузить, используя http, я использую это примерно так:
this.http.get(<path_to_your_json_file))
.success((data) => console.log(data));
Надеюсь это поможет.
$.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 - как вы показали в своем exmaple в вопросе (test.json), вы можете - это можно parseJSON
Метод jQuery ->
var obj = jQuery.parseJSON('{"name":"John"}');
alert( obj.name === "John" );
getJSON
используется для получения JSON с удаленного сайта - он не будет работать локально (если вы не используете локальный HTTP -сервер)
Я не нашел никакого решения, используя библиотеку закрытия Google. Так что просто чтобы заполнить список для будущих висторов, вот как вы загружаете 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 буквальным объектом, а затем сохранить файл с расширением файла .jsonp. Этот метод также оставляет ваш оригинальный файл JSON (test.json) неизменным, так как вы будете работать с новым файлом JSONP (test.jsonp). Имя на обертке может быть чем угодно, но оно должно быть тем же именем, что и функция обратного вызова, которую вы используете для обработки JSONP. Я использую ваш Test.json, опубликованный в качестве примера, чтобы показать добавление обертки JSONP для файла 'test.jsonp'.
json_callback({"a" : "b", "c" : "d"});
Затем создайте многоразовую переменную с глобальной областью в своем сценарии, чтобы удерживать возвращенный JSON. Это сделает возвращенные данные JSON доступными для всех других функций в вашем сценарии, а не только для функции обратного вызова.
var myJSON;
Далее идет простая функция, чтобы получить ваш JSON с помощью сценария. Обратите внимание, что мы не можем использовать jQuery здесь для добавления сценария к главе документа, поскольку IE не поддерживает метод jQuery. Applend. Метод 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 теперь можно получить с помощью любых функций сценария с использованием DOT обозначения. В качестве примера:
console.log(myJSON.a); // Outputs 'b' to console
console.log(myJSON.c); // Outputs 'd' to console
Этот метод может немного отличаться от того, что вы привыкли видеть, но имеет много преимуществ. Во -первых, тот же файл JSONP может быть загружен локально или с сервера, используя те же функции. В качестве бонуса, JSONP уже находится в кросс-домене, и может также быть легко использован с API типа REST.
Конечно, нет никаких функций обработки ошибок, но зачем вам это? Если вы не можете получить данные JSON, используя этот метод, то вы можете поспорить, что у вас есть некоторые проблемы в самом JSON, и я бы проверил их на хорошем валидаторе JSON.
Вы можете поместить свой json в файл javascript.Это может быть загружено локально (даже в Chrome) с помощью jQuery getScript()
функция.
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
Обратите внимание, что переменная json объявлена и назначена в файле js.
json_str = String.raw`[{"name": "Jeeva"}, {"name": "Kumar"}]`;
obj = JSON.parse(json_str);
console.log(obj[0]["name"]);
Я сделал это для своего приложения Cordova, как я создал новый файл JavaScript для JSON и вставил данные 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 в локальном файле. Затем вызовите функцию с помощью локального имени файла, вы сможете увидеть объект JSON в JSONOUTOUT выше.
Что сработало для меня, так это следующее:
Вход:
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.
myfile.json
=> myfile.js
В файле JSON (сделайте это переменной JS)
{name: "Whatever"}
=> var x = {name: "Whatever"}
В конце,
export default x;
Затем,
import JsonObj from './myfile.js';
Если у вас установлен Python на локальной машине (или вы не против установить его), вот независимый от браузера обходной путь для локальной проблемы доступа к файлам JSON, который я использую:
Преобразовать файл JSON в JavaScript, создав функцию, которая возвращает данные как объект JavaScript. Тогда вы можете загрузить егоu003Cscript> tag and call the function to get the data you want.
Сейчас начнется Код 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]')