Загрузка локального файла JSON
Я пытаюсь загрузить локальный файл 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 это работает, и я могу получить доступ к данным.
У кого-нибудь есть решение?
27 ответов
$.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/
Более современным способом вы можете теперь использовать Fetch API:
fetch("test.json")
.then(response => response.json())
.then(json => console.log(json));
Все современные браузеры поддерживают Fetch API. (Internet Explorer не делает, но Edge делает!)
источник:
Если вы хотите позволить пользователю выбрать локальный файл 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/
Если вы ищете что-то быстрое и грязное, просто загрузите данные в заголовок вашего 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"
}
Добавьте в свой JSON файл с самого начала
var object1 = [
и в конце
]
Сохрани это
Затем загрузите его чистым js как
<script type="text/javascript" src="1.json"></script>
И теперь вы можете использовать его как object1 - он уже загружен!
Отлично работает в Chrome и без дополнительных библиотек
Я удивлен, импорт из es6 не был упомянут (использовать с небольшими файлами)
Пример: import test from './test.json'
Webpack 2<использует json-loader по умолчанию для .json файлы.
https://webpack.js.org/guides/migrating/
Для TypeScript:
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:
BREAKING CHANGE: больше не разрешается пропускать суффикс "-loader" при использовании загрузчиков. Вам нужно указать "json-loader" вместо "json", см. https://webpack.js.org/guides/migrating/.
Нашел эту ветку при попытке (безуспешно) загрузить локальный файл 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>
Недавно D3js может обрабатывать локальный файл json.
Это проблема https://github.com/mbostock/d3/issues/673
Это патч для D3 для работы с локальными файлами json. https://github.com/mbostock/d3/pull/632
Попробуйте это таким образом (но учтите, что JavaScript не имеет доступа к файловой системе клиента):
$.getJSON('test.json', function(data) {
console.log(data);
});
Я немного отредактировал файл JSON.
myfile.json => myfile.js
В файле JSON (сделайте его переменной JS)
{name: "Whatever"} => var x = {name: "Whatever"}
В конце,
export default x;
Затем,
import JsonObj from './myfile.js';
В 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
Подход, который мне нравится использовать, состоит в том, чтобы дополнить / обернуть 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 .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 уже в междоменном дружественном формате и может также легко использоваться с API типа REST.
Конечно, нет никаких функций обработки ошибок, но зачем она вам нужна? Если вы не можете получить данные json с помощью этого метода, то можете поспорить, что у вас есть некоторые проблемы в самом json, и я бы проверил это на хорошем валидаторе JSON.
В angular (или любом другом фреймворке) вы можете загрузить с помощью http, я использую что-то вроде этого:
this.http.get(<path_to_your_json_file))
.success((data) => console.log(data));
Надеюсь это поможет.
Если вы используете локальный массив для JSON - как вы показали в своем примере в вопросе (test.json), то вы можете это parseJSON метод JQuery ->
var obj = jQuery.parseJSON('{"name":"John"}');
alert( obj.name === "John" );
getJSON используется для получения JSON с удаленного сайта - он не будет работать локально (если вы не используете локальный HTTP-сервер)
Вы можете поместить свой JSON в файл JavaScript. Это можно загрузить локально (даже в Chrome) с помощью jQuery's 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.
$.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-файла в переменную JavaScript, используя простой JavaScript:
let mydata;
fetch('datafile.json')
.then(response => response.json())
.then(jsonResponse => mydata = jsonResponse)
Публикую здесь, так как не нашел такого «решения», которое искал.
Примечание. Я использую локальный сервер, запускаемый с помощью обычной команды « python -m http.server ».
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
$.getJSONу меня работало только в Chrome 105.0.5195.125 с использованием , который работаетscript typeизmodule.
<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
Я не нашел никакого решения, используя библиотеку Google Closure. Итак, чтобы завершить список будущих висторов, вот как вы загружаете JSON из локального файла с помощью библиотеки Closure:
goog.net.XhrIo.send('../appData.json', function(evt) {
var xhr = evt.target;
var obj = xhr.getResponseJson(); //JSON parsed as Javascript object
console.log(obj);
});
Что сработало для меня следующее:
Входные данные:
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>
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 выше.
Самый простой способ: сохранить файл json как *.js и включить в шаблон html как скрипт.
js файл следующим образом:
let fileJsonData = {
someField: someValue,
...
}
включить вот так:
...
<script src="./js/jsonData.js"></script>
...
После включения вы можете позвонить в
fileJsonData в глобальном масштабе.
Если у вас установлен Python на вашем локальном компьютере (или вы не против установить его), вот независимый от браузера обходной путь для локальной проблемы доступа к файлам JSON, который я использую:
Преобразуйте файл JSON в JavaScript, создав функцию, которая возвращает данные в виде объекта JavaScript. Затем вы можете загрузить его тегом