Почему не выводится fetch?

Question

[Ingernirated]

Почему он не хочет выдавать содержимое файла, но и ошибку тоже не пишет?

Синтаксис метода fetch:

let promise = fetch(url[, options]);
url – URL, на который сделать запрос,
options – необязательный объект с настройками запроса.

<button class="redStream">Make</button>

let fet = fetch('info.json').then(function(response) {
	return response.json();
}).catch(alert);

var rs = document.querySelector(".redStream");
rs.addEventListener("click", fet);

// info.json
{
"data0": "<h1>hello</h1>",
"data1":"<h1>world</h1>",
"data2":"<h1>hello wordls</h1>"
}

Answer 1

[Алексей Ярков]

Почему он не хочет выдавать содержимое файла

А куда его выдавать? Запрос отработал, ошибку не выдал. Вы же результат не выводите никуда.
https://jsfiddle.net/yarkov_aleksei/7L21gL5x/

Comments

[Ingernirated]

почему он сам вызывается, а не забит на кнопку?
и зачем тут тофотология в виде двух then.function(response) ?

[Ingernirated]

о - это на что он намекает?
SyntaxError: Unexpected token o in JSON at position 1

let fet = fetch('info.json').then(function(response) {
	return response.json();
}).then(function(response) {
	JSON.parse(response);})
  .catch(alert);

[Алексей Ярков]

Ingernirated: обновил ответ

[Алексей Ярков]

Ingernirated:

JSON.parse(
	JSON.stringify({
		"data0": "<h1>hello</h1>",
		"data1":"<h1>world</h1>",
		"data2":"<h1>hello wordls</h1>"
	})
)

[Ingernirated]

Алексей Ярков: чёт я запутался,

JSON.parse(
  JSON.stringify({
    "data0": "<h1>hello</h1>",
    "data1":"<h1>world</h1>",
    "data2":"<h1>hello wordls</h1>"
  })
)

это здесь как очутилось?
оно же отдельным файлом лежит info.json

[Алексей Ярков]

Ingernirated: я к тому, что ваш JSON.parse не сработает, пока вы не преобразуете с помощью JSON.stringify. Просто работайте с ответом как с JSON и все =)

[Ingernirated]

Алексей Ярков:
я тут кое-шо почитал ещё,подскажи пожалуйста, что мне вместо многоточия надо подставить, чтобы из файла info.json получить весь текст?

var fet = fetch('info.json', {method : 'GET'}).then(function(response) {
	return response.json();
}).then(function(json) {
	return JSON.parse(...);
}).catch(alert);

var rs = document.querySelector(".redStream");
rs.addEventListener("click", fet);

[Алексей Ярков]

Ingernirated: ты не видишь что написал? Получается выполнение запроса не по клику, а при загрузке страницы. JSON.parse НЕ НУЖЕН!!!

[Ingernirated]

Алексей Ярков:
хьюстон, у нас проблемы (
как вывести не в консоль, а получить текст из json?

var fet = fetch('info.json', {method : 'GET'}).then(function(response) {
	return response.json();
}).catch(alert);

var rs = document.querySelector(".redStream");
rs.addEventListener("click", () => {
	fet.then(response => document.body.appendChild(response.data0))
});
<code>

[Алексей Ярков]

Ingernirated: перед тем, как сделать appendChild надо сделать createElement =)

[Ingernirated]

Алексей Ярков: допустим, а так почему не хочет?

var fet = fetch('info.json', {method : 'GET'}).then(function(response) {
	return response.json();
}).catch(alert);

var rs = document.querySelector(".redStream");
rs.addEventListener("click", () => {
	fet.then(response => document.body.innerHTML += JSON.parse(response).data0)
});

[Алексей Ярков]

Ingernirated: https://plnkr.co/edit/DY9OsJphqTXN3pi0CSLH?p=preview

[Ingernirated]

Алексей Ярков: просто от души, спасибо!!!
подскажи пожалуйста , запись () => эквивалентно function()?
и почему фетч самовызывался, если он был добавлен к событию, как переменная, а не функция?

[Алексей Ярков]

запись () => эквивалентно function()

запись () =>

почему фетч самовызывался

fetch('info.json', {method : 'GET'})
.then(function(response) {
  return response.json();
})
.catch(alert); // вернет промис

fetch('info.json', {method : 'GET'})
.then(function(response) {
  return response.json();
})
.then(function(json) {
  console.log(json);
})
.catch(alert); // выполнит действие над промисом и соответственно результатом запроса