Отправка данных из node.js во внешний интерфейс с использованием чистого js

Question

Я пытаюсь отправить объект с данными с сервера Node.js в файл js (для использования этих данных в веб-интерфейсе).

В файле main. js Я манипулирую DOM. Я делаю следующий запрос:

let dataName = [];
let request = async ('http://localhost:3000/') => {
    const response = await fetch(url);
    const data = await response.json();
    dataName = data.name;
}

let name = document.getElementById('name');
name.textContent = dataName;

Затем в файле сервер. js У меня есть объект:

data = [
    {
        "id": 1,
        "name": "Jhon"
    },
    {
        "id": 2,
        "name": "Mike"
    }
];

И я хотел бы отправить это как json строка (или другой способ) на main. js в качестве ответа на мой запрос.

Проблема: Мои данные отображаются в окне в браузер. Как я мог получить это как ответ?

Я пытался

let express = require('express');
let app = express();
app.use(express.static(`main`));
app.get('/', function(req, res){
    res.json(data); //also tried to do it through .send, but there data only on window in browser
});
app.listen(3000);

Может кто-нибудь сказать мне, что изменить в моем коде или указать мне, в каком направлении Google? (Я не хочу использовать шаблонизаторы).

Помогите мне, пожалуйста :) Мир с вами.

Answer 1

Я думаю, что вы пытаетесь обслуживать свой веб-интерфейс и данные JSON по одному и тому же URL-адресу /.

Вам необходимо настроить код сервера следующим образом:

let express = require('express');
let app = express();
app.use(express.static(`main`));
app.get('/api', function(req, res){
    res.json(data); //also tried to do it through .send, but there data only on window in browser
});
app.listen(3000);

Теперь ваши данные будут доступны как JSON из /api. Затем вы можете сделать запрос к интерфейсу следующим образом:

let dataName = [];
let request = async () => {
    const response = await fetch('http://localhost:3000/api');
    const data = await response.json();
    dataName = data.name;
}

let name = document.getElementById('name');
name.textContent = dataName;

Была также проблема с url, который не был правильно определен как аргумент. Я настроил функцию, чтобы просто использовать строку URL в нужном месте.

Answer 2

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

(при условии, что данные являются строкой)

клиент:

let data = getSomeDataYouWantToSend()
fetch('/send', {
    method: 'POST',
    headers: {
      'Content-Type': 'text/plain'
    },
    body: data
})

Предполагается, что у вас есть файлы * stati c в каталоге /main и html файлы в каталоге /views

сервер:

let express = require('express')
let app = express()

app.use(express.static(`${__dirname}/main`))
app.set('views', `${__dirname}/views`)

app.get('/', (req, res) => {
    res.render('index.html')
})

app.post('/send', (req, res) => {
    console.log(req.body) // <- here is your data sent from client frontend
})

app.listen(3000)