JavaScript 似乎无法访问对象属性

Question

所以我有这个对象，看起来像这样:

我正在尝试访问when_is_meeting属性(property)。我在访问该对象中的任何其他属性时没有任何问题。但如果我尝试访问when_is_meeting我得到一个undefined如上图“什么时候”旁边所示

这就是代码的样子......

var listOfObjects = [];
    for (var modelData in responseData) {
        listOfObjects.push(service.create(name, responseData[modelData]));
        console.log('RESP', response.data.content[modelData]);
        console.log('WHEN IS IT!!!',response.data.content[modelData].when_is_meeting);
    }

有人知道这是怎么回事吗？我是不是写错了什么？我已经重复了50次了。一定是一些简单的事情，我忽略了。

----------------编辑------这是整个服务-------------------- ---

    service.fetch = function (name, id, options) {
    options = options || {};
    const ModelClass = service.models[name];
    const baseUrl = ModelClass.getUrl(service.getBaseUrl(ModelClass), ModelClass.getModelName());
    let url;
    let paged = false;
    let pageList = false;


    if (id) {
        if (id instanceof models.BaseModel) {
            const BaseModelModelName = id.getModelName();
            let baseModelWithId = ModelClass.getUrl(service.getBaseUrl(), BaseModelModelName);
            url = [baseModelWithId, id.getId(), ModelClass.getModelName(), ''].join('/');
            pageList = true;
        } else {
            url = [baseUrl, id].join('/');
        }
    } else {
        pageList = true;
        url = [baseUrl, ''].join('/');
    }

    if (options.path) {
        url = url + options.path;
        delete options.path;
    }

    if (typeof options.paged === 'object') {
        let currentPage = options.paged.page;
        let pageSize = options.paged.page_size || 20;
        paged = options.paged;
        options.page = currentPage;
        options.size = pageSize;

        if (options.paged.sort) {
            let sortParam = options.paged.sort;

            options.sort = sortParam.param+','+sortParam.order;
        }

        delete options.paged;
    }

    return AuthRequestsService.load.then(function () {

        return $http({
            method: 'GET',
            url: url,
            headers: {
                'Authorization': AuthRequestsService.getAuthorizationHeader(),
            },
            params: options,
            json: true
        });
    }).then(function (response) {
            console.log('RESPONSE',response);
            for (let i = 0; i < response.data.content.length; i++){

              if (response.data.content[i].activity_history_type == 3){

                let builder = JSON.parse(response.data.content[i].relations);
                let secondaryUrl = AppSettings.apiUrl + ['/advisor/meetings', builder.meeting].join('/');

                $http({
                    url: secondaryUrl,
                    headers: {
                        'Authorization': AuthRequestsService.getAuthorizationHeader(),
                    },
                    method:'GET',
                    json:true,

                }).then(function(res){
                   response.data.content[i].when_is_meeting = res.data.meeting_date;
                   console.log('WHEN IS',response.data.content[i].when_is_meeting); // <-- this works
                })
              }
            }
            if (!pageList) {
                return service.create(name, response.data);
            } else {
                let responseData = response.data;
                if (paged) {
                    responseData = response.data.content;
                }

                var listOfObjects = [];
                for (var modelData in responseData) {
                    listOfObjects.push(service.create(name, responseData[modelData]));
                    console.log('RESP', response.data.content[modelData]);
                    listOfObjects[modelData].when_is_meeting = response.data.content[modelData].when_is_meeting;
                    listOfObjects[modelData].whatever = 44;
                    console.log('response.data.content[modelData].when_is_meeting',response.data.content[modelData].when_is_meeting);
                    console.log('listOfObjects[modelData].when_is_meeting', listOfObjects[modelData].when_is_meeting);
                    console.log('listOfObjects[modelData].whatever', listOfObjects[modelData].whatever);
                    console.log('Keys', Object.keys(response.data.content[modelData]));

                    // console.log('PRE IF', response.data.content[modelData].when_is_meeting);
                    // listOfObjects[modelData].when_is_meeting = response.data.content[modelData].when_is_meeting;
                    // console.log('IFFFFFFFFFFFFFFFFFFFFF', listOfObjects[modelData].when_is_meeting);
                    // console.log('IN FOR LOOP RESP', response.data.content[modelData].when_is_meeting);
                    // console.log('listOfObjects[modelData] PART 2', listOfObjects[modelData]);
                    function testForKey() {
                        if (typeof response.data.content[modelData].when_is_meeting !== "undefined") {
                            // when_is_meeting now exists! Do stuff with it here.
                            console.log("We now have the key:", response.data.content[modelData].when_is_meeting)
                        }
                        else {
                            // when_is_meeting is still missing. Try again in 200ms.
                            window.setTimeout(testForKey, 200);
                            console.log('TTTIIMMMEEEEOOOUUUTTT');
                        }
                    }
                    testForKey();
                }


                if (paged) {
                  console.log('#########################', listOfObjects);
                    return {
                        objects: listOfObjects,
                        totalPages: response.data.totalPages,
                        currentPage: response.data.number,
                        isMore: (!response.data.last),
                        totalElements: response.data.totalElements
                    };
                } else {
                    return listOfObjects;
                }
            }
    });
};

Answer 1

出现此问题的原因是，当您展开切换开关以查看对象时，控制台显示它现在拥有的内容，而不是记录时的内容。

这在这里得到了很好的解释:http://felix-kling.de/blog/2011/08/18/inspecting-variables-in-javascript-consoles/

当您使用 Ajax 时，这种情况并不罕见。您试图在一切完成之前访问结果；即，代码中的其他内容正在处理您的 response.data 并在 console.log 语句后添加缺少的键。

@Steven 在上述评论中建议的日志记录语句证实了这一点。 Object.keys(response.data.content[modelData])) 将显示生成日志语句时可用的键，因此不会出现与仅将对象本身记录到安慰。结果确认 when_is_meeting 在记录时确实缺失。

为了正确解决此问题，我们需要查看您的更多代码，以便我们能够弄清楚您为何在其他事物完成使用结果之前尝试访问它。

或者，您可以使用超时来测试 response.data.content[modelData] 的可用性，并仅在它存在时才访问它，就像下面的例子一样。但实际上并不建议这样做 - 更好地找出响应处理中的问题所在。

var listOfObjects = [];
for (var modelData in responseData) {
    listOfObjects.push(service.create(name, responseData[modelData]));

    // testForKey looks for the required key 'when_is_meeting' and if it does not
    // exist it starts a timeout to test for it again in the future.
    function testForKey() {
        if (typeof response.data.content[modelData].when_is_meeting !== "undefined") {
            // when_is_meeting now exists! Do stuff with it here.
            console.log("We now have the key:", response.data.content[modelData].when_is_meeting)
        }
        else {
            // when_is_meeting is still missing. Try again in 200ms.
            window.setTimeout(testForKey, 200);
        }
    }
    testForKey();
}

(我没有测试过这段代码 - 它可能有语法错误)

更新 - 修复您提供的代码

您提供的代码显示，正如预测的那样，when_is_meeting 键正在通过单独的 Ajax 调用添加到您的结果中。此调用异步完成，因此其结果不可用于其下面的日志语句。该片段展示了一种修复该问题的方法。和以前一样，我没有对这段代码进行语法检查。

return AuthRequestsService.load.then(function () {
    return $http({
        method: 'GET',
        url: url,
        headers: {
            'Authorization': AuthRequestsService.getAuthorizationHeader(),
        },
        params: options,
        json: true
    });
}).then(function (response) {
    console.log('RESPONSE',response);
    for (let i = 0; i < response.data.content.length; i++){

      if (response.data.content[i].activity_history_type == 3){

        let builder = JSON.parse(response.data.content[i].relations);
        let secondaryUrl = AppSettings.apiUrl + ['/advisor/meetings', builder.meeting].join('/');

        // Store the result of this $http call as a promise.
        response.data.content[i].when_is_meeting_promise = $http({
            url: secondaryUrl,
            headers: {
                'Authorization': AuthRequestsService.getAuthorizationHeader(),
            },
            method:'GET',
            json:true,

        })
        // Remove your .then handler from here. It will be dealt with below.
        //.then(function(res){
        //   response.data.content[i].when_is_meeting = res.data.meeting_date;
        //   console.log('WHEN IS',response.data.content[i].when_is_meeting); // <-- this works
        //})
      }
    }
    if (!pageList) {
        return service.create(name, response.data);
    } else {
        let responseData = response.data;
        if (paged) {
            responseData = response.data.content;
        }

        var listOfObjects = [];
        for (var modelData in responseData) {
            // OK, now access the promise you stored above. This means you'll be sure you'll
            // have the when_is_meeting key.
            responseData[modelData].when_is_meeting_promise.then(function(when_is_meeting_result) {
                // Now you can copy the neeting date into your responseData object.
                responseData[modelData].when_is_meeting = when_is_meeting_result.data.meeting_date;

                // Carry on....
                listOfObjects.push(service.create(name, responseData[modelData]));
                console.log('RESP', response.data.content[modelData]);

                // This should now work...
                console.log('response.data.content[modelData].when_is_meeting',response.data.content[modelData].when_is_meeting);
            });
        }
    }
});