Передать массив Node.js из конечной точки в функцию Javascript - PullRequest
Новая
       17

Передать массив Node.js из конечной точки в функцию Javascript

0 голосов
/ 19 октября 2019

У меня есть HTML-диаграмма, которая будет отображать мой массив из функции JavaScript 'window.testDataArray'. Я хотел бы заменить образец массива данными массива с конечной точки сервера. Я не уверен, что мне нужно сделать, чтобы добиться этого.

Клиентская сторона 


window.testDataArray = function(){

        return [6.5,5.2,3.4,5.8] //sample array
    };

Обновленная клиентская сторона (не работает) Я не уверен, что синтаксис здесь правильный. Любая помощь очень приветствуется. Я очень новичок в javascript и node.js. 

window.testDataArray = async function(){
        //      return [1,2,3,4,5,6,7,8,9,9,8,7,4,5,6,1,2,3] 
        try{
        return await fetch('http://localhost:3000/array').then(function (data) { 
            return data 
        }).catch(function(error){return 'testDataArray' + (error)
    });

        }
        catch(error){'Error testDataArray' + error}
    };

Сторона сервера 


const express = require('express');
const app = express();

app.get('/array', (req, res) => {
    test()
    async function test (){

    res.send(await local_db.get_data('heights'));//returns array e.g.[5.1,4.3,2.1,5.8] 
    }
    //await local_db.disconnect();
})


const port = process.env.PORT || 3000;
app.listen(port, () => console.log(`Listening on port ${port}...`));

//console.log("Server running at http://127.0.0.1:3000/ or http://localhost:3000/");

'window.testDataArray' находится в utlis.js и вызывается из 'Line Chart.html». window.testDataArray не может получить массив из конечной точки сервера node.js http://localhost:3000/array

Ответ на ответы ниже (Невозможно воспроизвести ответ локально, что мне не хватает?)

Спасибо за объяснение, эмиссар, ваш код работает как чудо, но я не могу заставить его работать с локальным сервером. Я не собираюсь загружать это в Интернет. Ответ браузера на конечную точку runkit: 'Cannot GET /'. Но когда я перехожу на 'http://localhost:3000/array', я получаю [0,10,5,2,20,30,45]. Пожалуйста, смотрите ваш код ниже. Я заменил вашу конечную точку runkit на локальную. 

<!DOCTYPE html>
<!-- saved from url=(0061)https://www.chartjs.org/samples/latest/charts/line/basic.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Line Chart</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
    <canvas id="myChart"></canvas>
    <style>

@keyframes chartjs-render-animation{from{opacity:.99}to{opacity:1}}.chartjs-render-monitor{animation:chartjs-render-animation 1ms}.chartjs-size-monitor,.chartjs-size-monitor-expand,.chartjs-size-monitor-shrink{position:absolute;direction:ltr;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1}.chartjs-size-monitor-expand>div{position:absolute;width:1000000px;height:1000000px;left:0;top:0}.chartjs-size-monitor-shrink>div{position:absolute;width:200%;height:200%;left:0;top:0}</style></head>

<body>
    <script>

        const chart = new Chart(
    document.getElementById('myChart').getContext('2d'), 
    { 
        type: 'line',
        // ... 
    }
)

//const API_HOST = 'https://so-58465005-mqksg0z5tsf8.runkit.sh'
const API_HOST = 'http://localhost:3000'

fetch(`${API_HOST}/array`)
    .then(response => response.json())
    .then(data => { 
        chart.config.data.labels = Array.from(Array(data.length)).map((_, i) => i + 1)
        chart.config.data.datasets.push({ label: 'my data', data })
        chart.update()
    })

    </script>
</body></html>

Пожалуйста, найдите код на стороне сервера ниже. Я заменил «@ runkit / runkit / express-endpoint / 1.0.0» на «экспресс». Должно быть, я что-то упустил здесь? Еще раз спасибо за помощь. 

const express = require("express")
const cors = require('cors')

const app = express()

app.use(cors())

app.get("/array", (req, res) => {
    const data = [0, 10, 5, 2, 20, 30, 45]
    res.send(JSON.stringify(data))
    res.end();
})


const port = process.env.PORT || 3000;
app.listen(port, () => console.log(`Listening on port ${port}...`));
``

1 Ответ

0 голосов
/ 19 октября 2019

Есть несколько проблем с вашим проектом, я реплицировал ваш сервер на RunKit - обратите внимание на два важных компонента:

  • типы составных объектов не могутбыть возвращенным без сериализации их на стороне сервера и десериализации их в клиенте - данные HTTP передаются в виде простого текста - обычно это делается с помощью JSON.
  • , это не яснооткуда вы обслуживаете файл .html, но похоже, что вы столкнетесь с ошибками кросс-источника - я включил промежуточное программное обеспечение для этого, для дальнейшего чтения в CORS, доступного здесь .

Чтобы решить проблему, описанную в этом вопросе, вы в настоящее время пытаетесь статически применить данные к конфигурации до того, как на запрос будет дан ответ. Вместо этого попробуйте отреагировать на данные в обещании, возвращаемом fetch.

Забыв на данный момент async / await, этого можно достичь, передав функцию обратного вызова в .then - аналогично тому, как выуже реагируют на события нажатия кнопки в другом месте в вашем прикрепленном примере. 

const chart = new Chart(
    document.getElementById('myChart').getContext('2d'), 
    { 
        type: 'line',
        // ... 
    }
)

const API_HOST = 'https://so-58465005-mqksg0z5tsf8.runkit.sh'

fetch(`${API_HOST}/array`)
    .then(response => response.json())
    .then(data => { 
        chart.config.data.labels = Array.from(Array(data.length)).map((_, i) => i + 1)
        chart.config.data.datasets.push({ label: 'my data', data })
        chart.update()
    })
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<canvas id="myChart"></canvas>
...