Объекты JSON возвращаются из Express API в кавычках - почему? а как разрешить?

Я знаю, что это моя глупая ошибка, но я чешу в затылке, пытаясь понять, в чем я ошибаюсь. Я писал приложения стека MERN раньше и не сталкивался с этим: мои данные JSON возвращаются в двойных кавычках.

На стороне сервера я читаю файл (с fs.readFile) в таком формате

{"projects":[
  {
    "project1": {
      "title": "something",
      "date": "sometime",
      "text": "some stuff",
      "img": "some url"
    }
  }
]}

и обслуживая его таким образом

router.get('/projects', function (req, res) {
    logic.getProjects()
        .then(projects => res.json(projects))
        .catch(err => console.error(err))

На стороне клиента я его получаю

 getProjects() {
        return fetch('/api/projects',{ headers:{'Content-Type': 'application/json'}})
            .then(res => res.json())
            .catch(err => console.info(err))
    }

но мое приложение React получает

"   {"projects":[
      {
        "project1": {
          "title": "something",
          "date": "sometime",
          "text": "some stuff",
          "img": "some url"
        }
      }
    ]} "

То есть он заключен в двойные кавычки, хотя - насколько я понимаю - он уже был проанализирован. Если бы кто-нибудь мог указать мне на мою (безусловно очевидную для всех, кроме меня) ошибку, я был бы признателен!

вам нужно проанализировать ответ через JSON.parse ()

Mosè Raguzzini 17.09.2018 14:36

Вы должны вернуть что-то пользователю в блоке catch, иначе браузер дождется таймаута: res.status(500).send('Something broke!') см. Здесь: expressjs.com/en/guide/error-handling.html

Dimitri L. 17.09.2018 14:41
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
353
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

readFile возвращает строку. вам нужно будет отправить его на JSON.parse(readFile).

Ваш маршрут должен быть примерно таким, как

router.get('/projects', function (req, res) {
    logic.getProjects()
        .then(projects => JSON.parse(projects))
        .then(jsonProjects => res.json(jsonProjects))
        .catch(err => console.error(err))

Другие вопросы по теме