javascript - 如何从 REST 响应渲染对象

Question

我想渲染到 ui/打印到控制台，记录 GET 响应中的一些对象值。

我在服务器端使用 Node JS，在客户端使用 HTML + JS。

因为我的目标是渲染数据并且请求类型是跨域，所以我无法使用“fetch”功能。 我执行它的唯一选择是通过“JSONP”数据类型发送它。

实际上，请求已发送，响应也通过回调接收，但我的代码是向控制台打印“null”，而不是响应数据。 当我尝试使用 JSON.parse() 时，它收到了“parseerror”。

预期结果是仅获取图像标签值 (2.0.90) 并将其打印在控制台日志中/将其渲染到 UI。

 async function uiChecking() {
    let index;
    const hostsDock = [qa + dockers];
    let lengthVal = hostsDock.length;
    for (let hostIndxD = 0; hostIndxD < lengthVal; hostIndxD++) {
        index = hostIndxD;
        let url = hostsDock[hostIndxD];

        $.ajax({
            url: url,
            dataType: 'jsonp',
        }).done( function(data) {
            console.log("A " + data);
        });

    }
}

**服务器.js **

var express = require('express');
var cors = require('cors');
var app = express();
var path = require("path");
var fetch = require('fetch-cookie')(require('node-fetch'));
var btoa = require('btoa');
var http = require('http');


var corsOptionsDelegate = function (req, callback) {
    var corsOptions;
    if (whitelist.indexOf(req.header('Origin')) !== -1) {
        corsOptions = { origin: true } // reflect (enable) the requested origin in the CORS response
    }else{
        corsOptions = { origin: false } // disable CORS for this request
    }
    callback(null, data , corsOptions) // callback expects two parameters: error and options
};

app.engine('.html', require('ejs').__express);
app.set('views', __dirname + '/view');
app.set('view engine', 'html');


app.use(express.static(path.join(__dirname, 'public')));

app.get('/', function(req, res){
    res.render('index');
    res.render('logo');
    res.writeHead(200, {'Content-Type': 'application/json'});
});

// app.get('/products/:id', cors(corsOptionsDelegate), function (req, res, next) {
//     res.json({msg: 'This is CORS-enabled for a whitelisted domain.'})
// });


app.get('/data/:id', function (req, res, next) {
    var opts = {
        host: config.alertService.host,
        port: config.alertService.port,
        method: 'GET',
        path: '/DataService/rest/receiveData/' + req.params.id
    }

    var reqGet = http.request(opts, function (dataResponse) {
        var responseString = '';
        dataResponse.on('data', function (data) {
            responseString += data;
        });
        var response = {x:[],y:[],z:[],t:[]};
        dataResponse.on('end', function () {
            var responseObject = JSON.parse(responseString);
            var accs = responseObject.data.listPCS;
            for(var i in accs){
                response.x.push(accs[i].accX);
                response.z.push(accs[i].accY);
                response.y.push(accs[i].accZ);
                response.t.push(accs[i].timestamp);
            }
            res.jsonp(response);
        });
    });
    reqGet.end();
    reqGet.on('error', function (e) {
        console.error(e);
    });
});

if (app.settings.env === 'production') {
    app.error(function(err, req, res) {
        res.render('new404.html', {
            status: 500,
            locals: {
                error: error
            }
        });
    });
}

app.listen(8033, function () {
    console.log('CORS-enabled web server listening on port 8033')
});

<小时/>

Answer 1

您需要迭代响应以返回结果，例如......

$.each(data, function(index) {
    console.log(data[index].ui);
    console.log(data[index].id); console.log(data[index].Name);
});