как получить json обьект из файла без сервера?
к примеру project/main.js:
(function() {
$.getJSON( “info_box.json”, function( json ) {
console.log( "JSON Data: " + json.users[ 3 ].name );
});
})();
project/info_box.json:
[
{
“title”: “Time to Share: 6 for $3.99*”,
“img”: “comp_plate_promo1.png”,
}
…
]
ошибка,:
http://joxi.ru/J2beNzncGagQm6
гуглил,вразумительного ответа не нашел, на данном компе нет никакого сервера. Да, ошибка в хроме, опере, в ИЕ и мазиле нормально
Xром не разрешает запрашивать AJAX-ом файлы с файловой системы. Ему надо специально это разрешить: http://www.chrome-allow-file-access-from-file.com
а кроме этого способа решения нет? Суть в том что делаю ТЗ и одно из условий что бы работало во всех браузерах, я ж не буду говорить, мол а вы пойдите включите во всех браузерах что бы работало…
Навряд те, кто составлял ТЗ подразумевали под “работало во всех браузерах” обход политики безопасности браузера с работой с локальными файлами. Поэтому этой проблеме не стоит уделять много внимания.
Эта ошибка возникает только при работе с локальными файлами, и она не появится при работе проекта через http сервер.
В общем не парься по вопросу запроса файлов с локальной файловой системы.
появились следующие вопросы:
- как закешировать то что вернул запрос к json? так как не хочу на каждый чих делать бегать заново с запросом (понимаю что скорее всего да, но как я не нашел и у меня не получилось). Что я имею ввиду:
var tmp = [];
$.getJSON( “src/info_box.json”, function(data) {}).done(function(data){
tmp = data;});
код я кидую не рабочий, скорее всего, так как вырезаю много лишнего и могу что-то пропустить, важна сама идея. Т.е. хочу сделать копию калбека и уже с ней работать. - можно ли выдернуть лишь кусок из файла, где лежат данные в json виде,к примеру как-то так load … data[1], где меня интересует только то что лежит в data[1].
- к своему стыду…забыл как правильно навешить обработчики в jquery не на обычный элемент в доме, а с привязкой к this. Что я имею ввиду:
this.btnPrev = this.template.querySelector(’.block-buttons__prev’);
this.btnPrev.addEventListener(‘click’, this.prevInfo.bind(this),false);
как сделать такое же в jquery?
$(’.block-buttons__next’, this.template).on(‘click’, this.nextInfo(this));
где я портачу?
По поводу кэшировния - создаете объект с кэшем, где ключами будут строки запроса, а значения - результаты обработки этого запроса. Далее, каждый раз перед отправкой запроса проверяете его наличие среди ключей объекта с кэшем, если такой ключ есть - берете из кэша, если нет - получаете с сервера и кладете в кэш.
Можно сказать “я работаю с данными через промисы”. Запросить 1 раз данные, и выполнить все обработчики, зависимые от данных тогда, когда данные загрузятся. В терминах промисов это будет выглядеть как-то так:
var jsonResponse = $.getJSON( "src/info_box.json")
// Module1
jsonResponse.then(function (data) {
// Do something with data
})
// Module2
jsonResponse.then(function (data) {
// Do something with data
})
Даже если вызвать
jsonResponse.then(function (data) {
// Do something with data
})
после фактической загрузки данных, все отработает корректно.
Без написания серверного кода такое не реализовать.
Логика точно такая-же: создание функции с закрепленным (забиндженным) контекстом. Метод, который возвращает функцию с забинженными контекстом bind, первый аргумент - контекст.
Вот документация Function.prototype.bind() - JavaScript | MDN
$('.block-buttons__next', this.template).on('click', this.nextInfo.bind(this));
для того чтобы запрашивать файлы с локальной папки нужен локальный сервер.
- для этого используют gulp или grunt (соответственно команды gulp serve, grunt serve).
Я обычно разорачиваю проект через yeoman (webapp - без каких либо фреймворков) https://github.com/yeoman/generator-webapp или angular и пользуюсь встроенными возможностями).
Или же - запусти свой пропкт через Webstorm - он моделирует работу сервера локально и такие запросы работают.
спасибо за ответы, про webstorm спасибо, хороший вариант)