Как исправить ошибку при загрузке файла с помощью fetch?

Question

[Max Mykhailenko]

Есть сервер на node.js, после того как я перехожу по ссылке на другую страницу, нужно загрузить данные из json файла в массив в js, делаю через fetch(), увидел в ютубе как код работал, но на видео не показан был код сервера и тд. Вот сам код js:

fetch("./data.json")
  .then(function(resp){
    return resp.json();
  })
  .then(function(data) {
    console.log(data);
  });

Это код node js:

const http = require("http");
const fs = require("fs");

http.createServer((req, res) => {
	switch (req.url) {

		case '/': 
    const html = fs.readFileSync('index.html', 'utf8'); 
    res.writeHead(200, {'Content-Type': 'text/html'});
      res.end(html);

		case '/exmpl.js':
    const js = fs.readFileSync('exmpl.js', 'utf8'); 
		res.writeHead(200, {'Content-Type': 'text/javascript'});
  		res.end(js);	

    case '/Gistograma.html':
    const gist = fs.readFileSync('Gistograma.html', 'utf8'); 
    res.writeHead(200, {'Content-Type': 'text/html'});
      res.end(gist);

    case '/Gistogr.js':
    const gistjs = fs.readFileSync('Gistogr.js', 'utf8'); 
    res.writeHead(200, {'Content-Type': 'text/javascript'});
      res.end(gistjs);

      case '/server1.js':
    const server1 = fs.readFileSync('server1.js', 'utf8'); 
    res.writeHead(200, {'Content-Type': 'text/javascript'});
      res.end(server1);

  		default: 
  		res.writeHead(404, {'Content-Type': 'text/plain'});
  		res.end('ERROR 404');
	}
}).listen(3000, () => console.log('server is on'));

Код js находится в server1.js , а node js в server.js. Все файлы лежат в одной папке. Подскажите что сделать что бы прочитать содержимое data.json. Ошибку выбивает вот такую:

Comments

[Lynn «Кофеман»]

Предвосхищая ваш следующий вопрос: В вашем switch-е остро не хватает break-ов.

Answer 1

[EVG]

Во-первых, ваш сервер должен уметь обработать запрос на '/data.json'.
В приведенном же вами коде бэковой части обрабатываются запросы на: '/', '/exmpl.js', '/Gistograma.html', '/Gistogr.js', '/server1.js'. А в блоке default вообще указаны инструкции, что если придет запрос на что-то другое, что не входит в этот список, то ответить кодом 404 - стандартный код ответа HTTP, в случае если запрашиваемый ресурс не найден.

Таким образом, если добавите что-то вроде следующего, то проблема должна быть решена:

case '/data.json':
    const js = fs.readFileSync('data.json', 'utf8'); 
    res.writeHead(200, {'Content-Type': 'application/json'});
  		res.end(js);

Comments

[Max Mykhailenko]

Спасибо, эту ошибку исправил, но появилась другая:

Не понимаю чем она может быть вызвана

[EVG]

Если в отладчике браузера пройдешь на вкладку "Network", найдешь строчку для данного запроса и посмотришь в response, то должен увидеть, что в теле ответа сервера текст "ERROR 404", это соответсвует тому, что твой сервер отвечает.

В тоже время, в блоке then() после fetch(), происходит парсинг тела ответа как JSON, но эта строка не соответствует JSON, из-за чего ошибка и происходит

[Max Mykhailenko]

EVG, В респонсе показывает содержимое json файла, там где закрывается первая } там позиции как раз 68,69 Не могу понять вообще в чем причина, вроде json как json или я чего то не понимаю просто?

[EVG]

так ведь в тексте ошибки указано, что парсер не ожидал в этом месте встретить символ ','

Да и по скриншоту видно, что json не валидный - если хотите вернуть массив объектов, то они должны быть заключены в квадратные скобки

Именно поэтому в этом месте парсер не ожидал этого символа

[Max Mykhailenko]

EVG, а как сделать что бы он прочитал с символами? понимаю что вопрос может глупый но если можно... =) А то я символ "," удалил где он мешал теперь показывает ту же ошибку только не символ "{" который следующим стоял

[EVG]

ну вот смотри... тебе нужно заджисонить как массив три таких объекта
Объект 1 - {foo: "bar 1"}
Объект 2 - {foo: "bar 2"}
Объект 3 - {foo: "bar 3"}

Для этого просто напросто пишешь вот так:
[{foo: "bar 1"}, {foo: "bar 2"}, {foo: "bar 3"}]

Обрати внимание на местоположение квадратных скобок и запятых

А вот немножко доков https://www.w3schools.com/js/js_json_intro.asp

[Max Mykhailenko]

EVG, Спасибо большое!)

[Yustas Alexu]

const js = fs.readFileSync('data.json', 'utf8');
и пусть весь мир подождет