在视图 (JS) 中填充表时未定义的值

Question

我有js函数从谷歌API获取速度限制

这是代码

function getSpeedData() {
//Getting dates from dates inputs and imei
var start = $('#startDate').val();
var stop = $('#endDate').val();
var imei = parseInt($('#selectVehicles').val());

//Converting to needed format
var newstart = moment(start, "DD/MM/YYYY").format("YYYY-MM-DD");
var newstop = moment(stop, "DD/MM/YYYY").format("YYYY-MM-DD");

//Getting data from back-end
var roadsapikey = "**********";
var dburl = $('#getData').data('request-url');
var path = 'path= ';
var model = {
    start: newstart,
    end: newstop,
    imei: imei
};
$.ajax({
    url: dburl,
    dataType: 'json',
    type: 'GET',
    data: model,
    success: function (data) {
        if (data.length !== 0) {
            speeddata = data;
            for (var i = 0; i < speeddata.length; i++) {
                path = "path=" + speeddata[i].Latitude2 + ',' + speeddata[i].Longitude2;
                var googleurl = "https://roads.googleapis.com/v1/speedLimits?"
                    + path + "&key=" + roadsapikey;
                $.ajax({
                    url: googleurl,
                    dataType: 'json',
                    type: 'GET',
                    success: function (data) {
                        speedlimits = data;
                        for (var i = 0; i < speedlimits.speedLimits.length; i++) {
                            speedobject.push({
                                speedlimits: speedlimits.speedLimits[i].speedLimit
                            });
                            speeddata.forEach((item, index) => Object.assign(item, speedobject[index]));
                        }

                    }
                });
            }
            console.log(speeddata);
            for (i = 0; i < speeddata.length; i++) {
                $('#speeddata').append('<tr>' + '<td id="imei">' + speeddata[i].Imei + '</td>' +
                    '<td id="lat">' + speeddata[i].Latitude2 + '</td>' +
                    '<td id="lng">' + speeddata[i].Longitude2 + '</td>' +
                    '<td id="speed">' + speeddata[i].Speed + '</td>' +
                    '<td id="speedlimit">' + speeddata[i].speedlimits + '</td>' + '</tr>');
            }
        }
    },
    error: function () {
        alert("Error");
    }
});

}

第一步，我从 db 获取值。在此之后，对于每个值，我都会获得 lat 和 lng，并在 for 循环中创建路径并将请求发送到谷歌 api 并获得响应。从这个响应中，我得到了 speedLimit 属性并将这些属性写入新数组。在此之后，我合并数组。

合并后我在控制台中有这个

阵列屏幕

合并后，我需要创建表(仅数据(并用值填充它。

这是代码的这一部分

 for (i = 0; i < speeddata.length; i++) {
                $('#speeddata').append('<tr>' + '<td id="imei">' + speeddata[i].Imei + '</td>' +
                    '<td id="lat">' + speeddata[i].Latitude2 + '</td>' +
                    '<td id="lng">' + speeddata[i].Longitude2 + '</td>' +
                    '<td id="speed">' + speeddata[i].Speed + '</td>' +
                    '<td id="speedlimit">' + speeddata[i].speedlimits + '</td>' + '</tr>');
            }

但我有这个

桌子

我的错误在哪里？属性似乎是正确的。

谢谢你的帮助。

Answer 1

你应该在第二个 ajax success fn 中创建数组。速度限制属性在创建字符串时未定义。

喜欢这个：

    ...
    success: function (data) {
        if (data.length !== 0) {
            speeddata = data;
            for (var i = 0; i < speeddata.length; i++) {
                path = "path=" + speeddata[i].Latitude2 + ',' + speeddata[i].Longitude2;
                var googleurl = "https://roads.googleapis.com/v1/speedLimits?"
                    + path + "&key=" + roadsapikey;
                $.ajax({
                    url: googleurl,
                    dataType: 'json',
                    type: 'GET',
                    success: function (data) {
                        speedlimits = data;
                        for (i = 0; i < speeddata.length; i++) {
                            $('#speeddata').append('<tr>' + '<td id="imei">' + speeddata[i].Imei + '</td>' +
                                '<td id="lat">' + speeddata[i].Latitude2 + '</td>' +
                                '<td id="lng">' + speeddata[i].Longitude2 + '</td>' +
                                '<td id="speed">' + speeddata[i].Speed + '</td>' +
                                '<td id="speedlimit">' + speedlimits.speedLimits[i].speedlimit + '</td>' + '</tr>');
                        }       
                    }
                });
            }
        }
    }
    ...

console.log显示价值的最终状态。它不显示调用时的状态。如果要在调用时查看值状态，请使用console.dir