Как получить значение из предложенного JSONP с помощью чистого JavaScript?

Question

[ZaxapKramer]

Здравствуйте. Относительно давно занимался такими вещами - извлечением данных из jsonp. И на данный момент приспичило взять javascript (без jquery и прочего).

Вот, собственно, наш герой - JSONP собственной персоной:

response({
	"files": [
		{
			"type": "js",
			"name": "script"
		},
		{
			"type": "html",
			"name": "file"
		}
	]
});

А вот, собственно, так я попытался получить type:

// ...
function ajax(url, callback, parse) {
	var xhr = new XMLHttpRequest();
	xhr.open('GET', url);
	xhr.onload = function(){
		if (this.readyState == 4) {
			if (xhr.status >= 200 && xhr.status < 400) {
				callback(parse ? JSON.parse(xhr.responseText) : xhr.responseText);
			}
		}
	};
	xhr.send(null);
}

ajax(jsonp_url, function(data) {
	data.files.forEach(function(item, i){
		alert(data.item.type);
	});
});
// ...

До этого были еще попытки, но остановился на forEach... но этот forEach все равно не хочет работать. Основная проблема заключается именно в извлечении type, а не в forEach.

P.S. Jquery просьба не предлагать.

Answer 1

[ZaxapKramer]

Проблему решил.
Избавился от callback - получил просто JSON (без "P").
Далее применил JSON.parse() на этот самый JSON (в моей функции ajax последним параметром указал true), получил значение через описанный в вопросе forEach. Удачи:)

Answer 2

[Rou1997]

Это не JSON, а JSONP. JSON выглядит так:

{
  "files": [
    {
      "type": "js",
      "name": "script"
    },
    {
      "type": "html",
      "name": "file"
    }
  ]
}

Comments

[ZaxapKramer]

Спасибо, исправил.

[Rou1997]

ZaxapKramer: Так с JSONP и работают иначе, поищите в поисковиках, или же сперва приводят к JSON, и потом парсят.

[ZaxapKramer]

Rou1997, спасибо за наводку... Проблему решил. В чистом JS я не особо силен, в силу преобладания везде JQuery (удобно же), от которого сейчас избавляюсь.

Добавлю немного мыслей: сейчас есть множество "альтернатив" jquery с поддержкой IE9 и выше весом ~1-20кб (jq весит ~80-120), также есть ECMAScript 5 (для которого, считаю, "сейчас" самое время)... Думаю, каждый раз тащить библиотеку, которая иногда весит больше сайта, просто ненужно, особенно когда обычно используется только ~50% ее функционала. Бесспорно, "гиганты", выжимающие из библиотеки весь ее потенциал, оправдывают такой вес. Но простенькие сайты с минимумом изображений (и не только), которым необходима, зачастую, только манипуляция с DOM (и другое, по мелочи) просто тратят трафик.
Это так, долька перфекционизма (ну или глупости - кому как), не более.

[Rou1997]

ZaxapKramer: 84 КБ - это ничто, попробуйте посчитать даже по самым худшим скоростям интернета, и убедитесь, а вообще-то кому как, лично для меня главное чтобы писалось быстрее, тут либо jQuery, либо вовсе Angular, React и т.п. фреймворки.

[ZaxapKramer]

Rou1997, бывает, когда нужно просто манипулировать с DOM (как мне сейчас, только еще ajax-функцию написал длиной в ~300 символов) - тогда просто берешь библиотеку, можно даже схожую по синтаксису с JQuery, но содержащую только DOM)) Да, 84кб - ничто, согласен, но я в такие моменты всегда вспоминаю про мобильники, их трафик и скорость (приведу в пример даже себя с долгой отправкой сообщений даже в том же приложении вк)... Вы правы, тем более, с кэшированием это - ничто (хотя, первый заход зависит от скорости интернета, опять же))) Тем не менее... Почему бы не "выпендриться" с той же balalaika.js?

[Rou1997]

ZaxapKramer: Бывают иные проекты, что зайдут люди с десктопного ПК, не велики баре, сам не люблю мобильники и мобильные ОС.

[ZaxapKramer]

Rou1997, ну вся эта каша у меня с уменьшением веса сайтов за счет использования других решений, оптимизации и т.п. извращений началась с PageSpeed от Google и мыслях об адаптивных сайтах, которые весят иногда по 2 мегабайта, и их мобильники планшеты, да и USB-модемы принимают с грустью. Речь не только а JQ, а вообще о подходе к таким вещам в целом. С моим неплохим, вроде бы, интернетом, сайты весом в 2мб, бывает, заметно "подтормаживают". Тоже не люблю мобильники, но что поделать...