node js консоль и конечная точка, возвращающие объект, но не могут быть получены как json объект

Question

Я использую API анализа настроений НЛП для проекта и онлайн-курса. Я думаю, что я близко, но я не могу закончить sh последний шаг. В настоящее время, когда я отправляю URL для анализа с помощью вызова API, я получаю возвращенный объект в консоли сервера, а затем отправляю данные в маршрут / настройку. Затем у меня есть функция, в которой я пытаюсь извлечь данные из / sentiment и обновить страницу, чтобы показать результаты. # Когда я пытаюсь получить данные из / sentiment, я получаю пустой объект, и моя страница обновляется с неопределенными значениями. Когда я go to / sentiment, я вижу все данные, но выборка не работает. Я думаю, что это соответствующие части моего кода:

index. js (на стороне сервера):

var path = require('path');
const express = require('express');
const mockAPIResponse = require('./mockAPI.js');
const dotenv = require('dotenv');
const bodyParser = require('body-parser');

const app = express()
app.use(express.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
const cors = require('cors');
app.use(cors());

app.use(express.static('dist'))

dotenv.config();
console.log(`Your API key is ${process.env.API_ID}`);

console.log(__dirname)

projectData = {};

url = {};

const AYLIENTextAPI = require('aylien_textapi');

let textapi = new AYLIENTextAPI({
    application_id: process.env.API_ID,
    application_key: process.env.API_KEY,
})


let apiCall = async (url) => {
    textapi.sentiment({
        'url': url
    }, function(error, response) {
        if (error === null) {
            JSON.stringify(response);
            projectData = response;
            console.log(projectData);
        }else{
            console.log(error)
        }
    })
};

app.route('/')
    .get(function (req, res) {
        console.log(process.env);
        res.sendFile('dist/index.html', { root: __dirname + '/,'})
    })
    .post(getSentiment);

function getSentiment(req, res){
    console.log(req.body);
    projectData = req.body;
    console.log(projectData);
    res.status(200).send(projectData);
};

const port = 8000;

// designates what port the app will listen to for incoming requests
app.listen(port, function () {
    console.log(`Example app listening on ${port}`)
})

app.get('/sentiment', getData);

function getData(req, res){
    JSON.stringify({projectData});
    res.status(200).send(projectData)
    console.log(projectData)
};

app.post('/postURL', getURL);

function getURL(req, res){
    console.log(req.body);
    url = req.body.data;
    console.log(url)
    apiCall(url)
}

formHandler. js:

import { postURL } from "./postURL"
import { updateUI } from "./updateUI"

function handleSubmit(event) {
    event.preventDefault()

    // check what text was put into the form field
    let url = document.getElementById('URL').value
    postURL('/postURL', url)
    updateUI();
};

export { handleSubmit }

updateUI. js:

const updateUI = async () =>{
    const res = await fetch('/sentiment');
    try {
        const allData = await res.json();
        console.log(allData)
        document.getElementById("polarity").innerHTML = allData.polarity;
        document.getElementById("polarityConfidence").innerHTML = allData.polarity_confidence;
        document.getElementById("subjectivity").innerHTML = allData.subjectivity;
        document.getElementById("subjectivityConfidence").innerHTML = allData.subjectivity_confidence;
        return allData
    } catch(error) {
        console.log(error)
    }
};

export { updateUI }

Я не знаю, почему я вижу все данные на стороне сервера и в / sentiment, но получаю пустой объект только при попытке извлечь его в updateUI функция. Любая помощь будет очень, очень признательна.

Большое спасибо, Майкл

Answer 1

JSON.stringify + res.send = Content-Type "text / html"

Ваше клиентское приложение не может десериализовать его до JSON. Ваша проблема в том, что вы JSON.stringify определяете его и отправляете его через res.send с сервера.

Эта комбинация устанавливает неправильный заголовок Content-Type.

Чтение Express API do c для res.send:

Когда параметр является строкой, метод устанавливает тип содержимого «text / html»:

Таким образом, вы можете видеть его в своем браузере нормально, потому что браузер рендерит текст, но клиентское приложение не может десериализовать его с помощью res.json(), потому что тип контента неправильно установлен с сервера.

function getData(req, res){
    JSON.stringify({projectData});
    res.status(200).send(projectData) <- "text/html"
    console.log(projectData)
};

Необходимо установить application/json.

Вот что вам нужно сделать

1. Изменить конечную точку на sendJson
2. Не JSON.stringify это. Отправьте объект и позвольте Express сериализовать его.

function getData(req, res){
    // JSON.stringify({projectData}); <- don't stringify it
    res.sendJson(projectData) // <- use sendJSON
    console.log(projectData)
};

Считать Express API do c для res.json:

Отправляет JSON ответ. Этот метод отправляет ответ (с правильным типом содержимого), который является параметром, преобразованным в строку JSON с использованием JSON .stringify ().

Answer 2

Вам необходимо указать полный путь к серверу, например

const res = await fetch('http://localhost:8000/sentiment');

Или попробуйте переместить

app.get('/sentiment', getData);

Выше

app.route('/')

Обновление

const allData = await res.json(); // problem is here

попробуй

 console.log(res.data); // here you will see what you are getting.
 const allData = await res.data; // You might will be having the response here

---

Тебе это может быть полезно.

const updateUI = async () =>{
    const res = await fetch('/sentiment');
    try {
        const allData = res.data; // here
        console.log(allData)
        document.getElementById("polarity").innerHTML = allData.polarity;
        document.getElementById("polarityConfidence").innerHTML = allData.polarity_confidence;
        document.getElementById("subjectivity").innerHTML = allData.subjectivity;
        document.getElementById("subjectivityConfidence").innerHTML = allData.subjectivity_confidence;
        return allData
    } catch(error) {
        console.log(error)
    }
};

export { updateUI }