Как правильно вставить массив JSON в функцию?

Question

[maiskiykot]

Есть такой вызов функции Javascript в head документа:

window.addEvent('domready',function(){
		new Calendar({
			calContainer:'calBody',
			newDate:'04/05/2018',
			cEvents: []
		});
	})

cEvents[] - массив JSON, подставляемый вручную. Как правильно вставить AJAX-запрос типа этого:

var request = new XMLHttpRequest();

request.open('GET', 'eventFeed.php', true);

request.onload = function () {
	// begin accessing JSON data here
	var data = JSON.parse(this.response);

	for (var i = 0; i < data.length; i++) {
		console.log(data[i].title + ' is a ' + data[i].start + '.');
	}
}

request.send();

Чтобы массив корректно заполнился? PHP отдает чистый JSON - можно даже не распарсивать в функции. В яваскрипте не силен, поэтому любая помощь приветствуется!

Answer 1

[Павел Корнилов]

Как-то так:

var request = new XMLHttpRequest();

request.open('GET', 'eventFeed.php', true);

request.onload = function () {
	// begin accessing JSON data here
	var data = JSON.parse(this.response);

	for (var i = 0; i < data.length; i++) {
		console.log(data[i].title + ' is a ' + data[i].start + '.');
	}

	new Calendar({
		calContainer:'calBody',
		newDate:'04/05/2018',
		cEvents: data
	});
}

Comments

[maiskiykot]

a domready куда вставить?

[Павел Корнилов]

maiskiykot, а на зачем он нужен? Ведь нужно вставить в конструктор ответ с сервера, следовательно, его и нужно отслеживать, а не загрузку DOM.

[maiskiykot]

Так по итогу эта вся штука должна вывестись в контейнере Calbody

[Павел Корнилов]

maiskiykot, так и пусть себе выводится.
Когда идёт запрос серверу на получение данных? Можно его и отсылать по загрузке страницы:

window.addEvent('domready',function(){
	var request = new XMLHttpRequest();

	request.open('GET', 'eventFeed.php', true);

	request.onload = function () {
		// begin accessing JSON data here
		var data = JSON.parse(this.response);

		for (var i = 0; i < data.length; i++) {
			console.log(data[i].title + ' is a ' + data[i].start + '.');
		}

		new Calendar({
			calContainer:'calBody',
			newDate:'04/05/2018',
			cEvents: data
		});
	}
})

[maiskiykot]

Подставил вашу конструкцию - выводит белый лист (даже календарь сломался). Ошибок в консоли нет.

[Павел Корнилов]

maiskiykot, тогда проверяйте , что в data приходит, действительно ли массив?

window.addEvent('domready',function(){
	var request = new XMLHttpRequest();

	request.open('GET', 'eventFeed.php', true);

	request.onload = function () {
		// begin accessing JSON data here
		var data = JSON.parse(this.response);

		console.log('data = ', data);

		for (var i = 0; i < data.length; i++) {
			console.log(data[i].title + ' is a ' + data[i].start + '.');
		}

		new Calendar({
			calContainer:'calBody',
			newDate:'04/05/2018',
			cEvents: data
		});
	}
})

[maiskiykot]

Все равно белый лист. Ни разметки календаря, ни данных. Ошибок в консоли не пишет. Если вручную вставить данные в cEvents[] то все работает. Что-то с выводом console.log а что - не пойму.

[Павел Корнилов]

maiskiykot, вы мой ответ читали?

Все равно белый лист

-

тогда проверяйте , что в data приходит

А в коде я привел в нужном месте console.log('data = ', data);, чтобы вы могли посмотреть, что напишет консоль.

[Павел Корнилов]

Или дайте мне ссылку, я сам посмотрю.

[maiskiykot]

Я вставил код, но он вообще ничего не выводит. Может проблема в том, что мы пытаемся JSON массив еще раз преобразовывать? На выходе из PHP уже идет готовый массив [{...},{...},{...}]. Мне его и надо впихнуть в cEvents[]. Просто я первый попавшийся запрос AJAX написал в вопросе.

[maiskiykot]

Ссылка на библиотеку календаря
https://www.google.ru/url?sa=t&rct=j&q=&esrc=s&sou...

[maiskiykot]

А из-за кавычек не может быть проблем? У автора мвссив выглядит как

[
 {
				title:'Dad\'s Birthday',
				start:'2009-01-12',
				end:'2009-01-13',
				location:''
 }
]

а из PHP приходит

[
{
"title":"Jimmy'sBirthday",
"start":"2009-08-01",
"end":"2009-08-01",
"location":""
}
]

[Павел Корнилов]

Вы так и не ответили на мой вопрос. Что в консоли после вставки приведённого кода?
Если хотите продолжать его игнорировать и писать другие вещи - лучше тогда не отвечайте.

[maiskiykot]

Просто белый лист. В консоли у меня вообще ajax безмолствует

[Павел Корнилов]

Не может быть, я же в коде указал - console.log('data = ', data);
То есть, хоть какая-то запись быть должна. Или исключение выбрасывает предыдущий код, блокируя вывод в консоль. В любом случае, не видя конкретного сайта, помочь будет крайне затруднительно.

[maiskiykot]

Вывод пуст. Сайта нет - ковыряю исходники на локали

[Павел Корнилов]

maiskiykot, я тоже вслепую могу подсказать только концепт решения. А дебажить - уже нет.

[maiskiykot]

А посмотреть на исходники? Я ссылку отправлял.

[Павел Корнилов]

maiskiykot, тогда уже сделайте html-файл, отправляющий запрос, получающий ответ, короче, с требуемым функционалом. Тогда можно попробовать.

[maiskiykot]

исходник - там исходная болванка html. Данные JSON в файлах eventFeed.php и в Source/eventFeed.php. Класс получения данных mecPHPPlugin включил в файл Source/mooECal.js

[Павел Корнилов]

maiskiykot, другое дело.
Так данные приходят:

window.addEvent('domready',function(){
	var request = new XMLHttpRequest();

	request.open('GET', 'Demo - MooTools Events Calendar_files/data.json', true);

	console.log('request = ', request);

	request.responseType = 'json';
	request.send(null);

	request.onload = function () {
		// begin accessing JSON data here
		var data = this.response.data;

		console.log('data = ', data);

		for (var i = 0; i < data.length; i++) {
			console.log(data[i].title + ' is a ' + data[i].start + '.');
		}

		console.log(new Calendar({
			calContainer:'calBody',
			newDate:'04/05/2018',
			cEvents: data
		}));
	}
})

Адрес запроса нужно сменить на правильный.
Но почему-то календарь их не кушает... Ещё подумаю в чём дело...

[Павел Корнилов]

Всё, работает:

var request = new XMLHttpRequest();

	request.open('GET', 'eventFeed.php', true);

	console.log('request = ', request);

	request.responseType = 'json';
	request.send(null);

	request.onload = function () {
		var data = this.response.data;
		for (var i = 0; i < data.length; i++) {
			console.log(data[i].title + ' is a ' + data[i].start + '.');
		}

		if(!request.response.data) {
			console.log('request.response.data is missing');
		} else {
			console.log('data = ', data, "\n",
			new Calendar({
				calContainer:'calBody',
				newDate:'02/05/2009',
				cEvents: data
			}), Array.isArray(data));
		}

	}

[Павел Корнилов]

maiskiykot, вот, рабочий пример - http://js-master.ru/Техотдел/content/calendar/

[maiskiykot]

KorniloFF, В IE 11 не робит. Попытка заставить работать на локали провалилась . Судя по симптомам - не может прочитать файл eventFeed.php.

[Павел Корнилов]

maiskiykot, а какое содержимое файла?

[maiskiykot]

<?php
	$events[] = array('title'=>'Jimmy\'s Birthday','start'=>'2018-04-01','end'=>'2018-04-01','location'=>'');
	$events[] = array('title'=>'E-Waste Recycle Day','start'=>'2018-04-12T07:00:00-06:00','end'=>'2018-04-13T15:00:00-06:00','location'=>'Recycle Center');
	$events[] = array('title'=>'Breakfast','start'=>'2018-04-18T06:00:00-05:00','end'=>'2018-04-18T07:00:00-05:00','location'=>'');
	$events[] = array('title'=>'Wash Car','start'=>'2018-04-18T08:00:00-05:00','end'=>'2018-04-18T09:00:00-05:00','location'=>'');
	$events[] = array('title'=>'Read Up On Rocket Science','start'=>'2018-04-18T09:00:00-05:00','end'=>'2018-04-18T10:00:00-05:00','location'=>'');
	$events[] = array('title'=>'Build The Projectile','start'=>'2018-04-18T13:00:00-05:00','end'=>'2018-04-18T13:30:00-05:00','location'=>'');
	$events[] = array('title'=>'Launch The Missile','start'=>'2018-04-18T18:00:00-05:00','end'=>'2018-04-18T20:00:00-05:00','location'=>'');
	$events[] = array('title'=>'Labor Day','start'=>'2017-09-07','end'=>'2017-09-07','location'=>'');
	$events[] = array('title'=>'Subliminal Closing Party','start'=>'2017-09-30','end'=>'2017-10-01','location'=>'Pacha - Ibiza, Spain');

	header('Content-type: application/json');
	echo json_encode($events);
?>

[Павел Корнилов]

maiskiykot, проверю у себя - отпишусь.

[Павел Корнилов]

maiskiykot, всё работает, просто нужно дебажить свои ошибки самостоятельно:

<?php
  $events[] = array('title'=>'Jimmy\'s Birthday','start'=>'2018-04-01','end'=>'2018-04-01','location'=>'');
  $events[] = array('title'=>'E-Waste Recycle Day','start'=>'2018-04-12T07:00:00-06:00','end'=>'2018-04-13T15:00:00-06:00','location'=>'Recycle Center');
  $events[] = array('title'=>'Breakfast','start'=>'2018-04-18T06:00:00-05:00','end'=>'2018-04-18T07:00:00-05:00','location'=>'');
  $events[] = array('title'=>'Wash Car','start'=>'2018-04-18T08:00:00-05:00','end'=>'2018-04-18T09:00:00-05:00','location'=>'');
  $events[] = array('title'=>'Read Up On Rocket Science','start'=>'2018-04-18T09:00:00-05:00','end'=>'2018-04-18T10:00:00-05:00','location'=>'');
  $events[] = array('title'=>'Build The Projectile','start'=>'2018-04-18T13:00:00-05:00','end'=>'2018-04-18T13:30:00-05:00','location'=>'');
  $events[] = array('title'=>'Launch The Missile','start'=>'2018-04-18T18:00:00-05:00','end'=>'2018-04-18T20:00:00-05:00','location'=>'');
  $events[] = array('title'=>'Labor Day','start'=>'2017-09-07','end'=>'2017-09-07','location'=>'');
  $events[] = array('title'=>'Subliminal Closing Party','start'=>'2017-09-30','end'=>'2017-10-01','location'=>'Pacha - Ibiza, Spain');

  // header('Content-type: application/json');
  echo '{"data":' . json_encode($events) . '}';
?>

[maiskiykot]

В edge заработало! А IE 11 молчит - вывод пустой.

[Павел Корнилов]

maiskiykot, вот - https://js-master.ru/?Javascripts___Органайзер

[maiskiykot]

Скачал, проверил - edge работает, IE 11 - чистый белый лист.

[maiskiykot]

win 10 Pro

[Павел Корнилов]

maiskiykot, а на самой странице - по ссылке выше?

[maiskiykot]

Только ссылка на скачивание архива. В Edge еще виден календарь

[Павел Корнилов]

maiskiykot, да, сейчас сам посмотрел. Ну, не знаю, я под ИЕ уже давно не ориентируюсь, если под него подгонять скрипты сразу удлиняются раза в 1.5

[maiskiykot]

Для меня вообще JS - загадка. Однако календарь без AJAX отлично работает в IE 11

[Павел Корнилов]

maiskiykot, значит, нужно искать кроссброузерный AJAX, работающий в ИЕ. Остальной код весь полностью верный.

[maiskiykot]

Я нашел вот такой AJAX. Он одинаково выводит JSON однако одинаково на какой-то toString ругается и не выводит в календаре.

window.addEvent('domready',function(){
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            console.log('responseText:' + xmlhttp.responseText);
            try {
                var data = xmlhttp.responseText;
            } catch(err) {
                console.log(err.message + " in " + xmlhttp.responseText);
                return;
            }
			new Calendar({
				calContainer:'calBody',
				newDate:'04/01/2018',
				cEvents: data,
			})
        }
    };

    xmlhttp.open("GET", 'eventFeed.php', true);
    xmlhttp.send(null);
});

Answer 2

[maiskiykot]

Вынужден был исследовать пакет автора библиотеки. Ошибка нашлась после ликвидации кавычек в запросе. Вот и читай потом мануалы блин! Две недели запускал календарь.