【发布时间】：2019-10-19 15:07:23
【问题描述】：
我有一个 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获取数组
对以下答案的回复（无法在本地重现答案我错过了什么？）
感谢 Emissary 的解释，您的代码就像一个魅力，但我无法让它与本地服务器一起使用。我不打算将此上传到网络上。浏览器对 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' 替换为 'express'。我一定在这里遗漏了一些基本的东西吗？再次感谢您迄今为止的帮助。
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}...`));
``
【问题讨论】：
-
fetch('http://localhost:3000/array').then(() => { /* do something */ })- MDN -
感谢您的信息，我没有从我的函数中获得价值，我做错了什么吗？ window.testDataArray = function(){ return fetch('localhost:3000/array').then((data) => {return data }) };
-
感谢 Emissary 的链接，我已经修改了上面的代码，但仍然无法为我的 javascript 函数获取数组。有什么想法吗？
标签： javascript arrays node.js endpoint