从NodeJS/Express向EJS模板发送JSON数据有问题

Question

无法访问ejs模板中的JSON数据。黑暗的SyntaxError抛出。数据存储在一个MySQL JSON表中。不确定为什么ejs模板不能解析数据。如果我将相同的数据直接放在模板中(存根数据)，图表就会显示它应该显示的内容。获取未识别的SyntaxError:意外标识符错误

app.use((req, res, next) => {
    var sql = "select data from market_data where id=1";
    var marketData = [];
    var myData = [];

    db.query(sql, function (err, res) {
        if (err) throw err;
        marketData = JSON.parse(res[0]['data']);
        console.log(marketData);
        for (let i=0;i<marketData.length;i++) {

            myData.push({
              date: new Date(marketData[i]['DateTime']),
              open: marketData[i]['Open'],
              high: marketData[i]['High'],
              low: marketData[i]['Low'],
              close: marketData[i]['Close']
            });
          }

          app.locals.chartData = myData;

        });
        next();
});

app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));
app.use('/d3', express.static(__dirname+'/node_modules/d3/dist/'));
app.use('/fc', express.static(__dirname+'/node_modules/d3fc/build/'));
app.get('/', function (req, res) {  
    res.render('index', {chartData: app.locals.chartData});

});

<div id="chart" style="width: 100%; height: 250px;"></div>
        <script type="text/javascript">

            var data = <%- JSON.stringify(chartData) %>


            var yExtent = fc.extentLinear()
            .accessors([
                function(d) { return d.high; },
                function(d) { return d.low; }
            ]);

            var xExtent = fc.extentDate()
            .accessors([function(d) { return d.date; }]);

            var gridlines = fc.annotationSvgGridline();
            var candlestick = fc.seriesSvgCandlestick();
            var multi = fc.seriesSvgMulti()
                .series([gridlines, candlestick]);

            var chart = fc.chartSvgCartesian(
                fc.scaleDiscontinuous(d3.scaleTime()),
                d3.scaleLinear()
            )
            .yDomain(yExtent(data))
            .xDomain(xExtent(data))
            .plotArea(multi);

            d3.select('#chart')
            .datum(data)
            .call(chart);
        </script>

**console.log output from middleware (one record for brevity)
{ Day: 'Wed',
    Low: 2688.5,
    Date: '01-30-2019',
    High: 2689,
    Open: 2688.5,
    Time: '22:05:00',
    Close: 2688.75,
    Market: 'ES',
    Volume: 397,
    DateTime: '01-30-2019 22:05:00' }
error:
Uncaught SyntaxError: Unexpected identifier
console.log from ejs template (two records shown for brevity)
[{"date":"2019-02-03T23:00:00.000Z","open":2699.25,"high":2702.25,"low":2698,"close":2702.25},{"date":"2019-02-03T23:05:00.000Z","open":2702,"high":2702,"low":2700.5,"close":2701.75}]**

Answer 1

我也有过类似的问题。尝试将数据呈现为jSON字符串

res.render('index', {chartData: JSON.stringify(app.locals.chartData) });

并在ejs文件中使用JSON.parse解析数据。

var data = JSON.parse('<%- chartData %>')