嵌套 JQuery 函数 Returns 'undefined' 或 '[object Object]'

Question

你好 Whosebug 上的朋友们：

我正在努力寻找导致嵌套 jQuery 函数成为 'undefined' 或“[object Object]”的 return 值的原因。我已经注释了第一个函数的位置，其中包含函数调用。从我对这个主题的研究中可以看出，在这个令人困惑的问题上，我并不孤单。根据我在第二个 "getAttributeValue" 函数内的嵌套 jQuery 函数中使用的代码，我得到不同的结果。 Whosebug 助手可以看到我一直在尝试的代码的各种排列，但被注释掉以进行调试等。 'alert' 方法 return 以我想要的方式完美清除数据。其他 return 什么都没有，'undefined' 或“[object Object]”，但从来不是我想要的完美清晰数据。我已经呆了这么久，知道我需要帮助。

数据源是网络 api/提供 JSON 数据的网络服务。

代码如下：

//# This is the primary function that gathers data from a web api / web service:
    $(document).ready(function () {
        $("#loadData").click(function () {
            $.get(url, function (data) {
                var myHTMLDataTable = "<table class='table table-striped table-hover'>";
                myHTMLDataTable = myHTMLDataTable + "<tr><th>WebId</th><th>Attributes</th><th>Values</th></tr>";
                for (i = 0; i < data.Items.length; i++) {
                    myHTMLDataTable = myHTMLDataTable + "<tr>";
                    myHTMLDataTable = myHTMLDataTable + "<td class='col-sm-1'>" + (data.Items[i].WebId) + "</td>";
                    myHTMLDataTable = myHTMLDataTable + "<td class='col-sm-1'>" + (data.Items[i].Name) + "</td>";
                    myHTMLDataTable = myHTMLDataTable + "<td class='col-sm-1'>"+ getAttributeValue(data.Items[i].WebId) + "</td>"; //~ function call here
                    myHTMLDataTable = myHTMLDataTable + "</tr>";
                }
                myHTMLDataTable = myHTMLDataTable + "</table>";
                document.getElementById("myData").innerHTML = myHTMLDataTable;
            });
        });
    });

    //# This function returns a current value and uom for the target attribute:
    function getAttributeValue(attributeWebId) {
        var theEnvelopePlease = ""; //~ clear the variable
        var atrbUrl = "https://<<The Target Web API Root Address>>";
        var atrbPrefix = "streams/";
        var atrbWebId = attributeWebId;
        var atrbExtension = "/value";
        //~ Concatenate the URL used to make the request
        atrbUrl = atrbUrl + atrbPrefix + atrbWebId + atrbExtension;
        // theEnvelopePlease = $.getJSON(atrbUrl, function (data) { data.Value });
        return $.getJSON(atrbUrl, function (data) {

            //return (data.Value) + " " + (data.UnitsAbbreviation);
            //alert(data.Value + " " + data.UnitsAbbreviation);
            //theEnvelopePlease = theEnvelopePlease + (data.Value) + " " + (data.UnitsAbbreviation);
            (data.Value) + " " + (data.UnitsAbbreviation);

        });
        // return theEnvelopePlease;
    }

嵌套 jQuery 函数检索的 JSON 数据如下所示：

    {
      "Timestamp": "2015-06-03T22:22:00Z",
      "Value": 89.660293579101563,
      "UnitsAbbreviation": "%",
      "Good": true,
      "Questionable": false,
      "Substituted": false
    }

也许有JQuery高手审稿，很容易看出我的错误。非常感谢您的帮助。

更新：因为有人要求我想展示我使用 console.log 时得到的结果：

更新：您好@IronFlare：感谢您的建议。我用修改后的功能代码尝试了您的建议，如下所示：

    function getAttributeValue(attributeWebId) {
        var theEnvelopePlease; //~ clear the variable
        var atrbUrl = "https://<<The Target Web API Root Address>>";
        var atrbPrefix = "streams/";
        var atrbWebId = attributeWebId;
        var atrbExtension = "/value";
        //~ Concatonate the URL used to make the request
        atrbUrl = atrbUrl + atrbPrefix + atrbWebId + atrbExtension;
        $.getJSON(atrbUrl, function (data) {
            theEnvelopePlease = (data.Value) + " " + (data.UnitsAbbreviation);
        });
        return theEnvelopePlease;
    }

结果数据是'undefined'(:-c)

============================================= ==========

您好@IronFlare，感谢您的建议。我修改函数如下：

    function getAttributeValue(attributeWebId) {
        var theEnvelopePlease; //~ clear the variable
        var atrbUrl = "https://<<The Target Web API Root Address>>";
        var atrbPrefix = "streams/";
        var atrbWebId = attributeWebId;
        var atrbExtension = "/value";
        //~ Concatenate the URL used to make the request
        atrbUrl = atrbUrl + atrbPrefix + atrbWebId + atrbExtension;
        $.getJSON(atrbUrl, function (data) {
            theEnvelopePlease = (data.Value) + " " + (data.UnitsAbbreviation);
            console.log(data);
        });
        return theEnvelopePlease;
    }

这是结果视图：

============================================= =======

更新：对于那些关注这个话题的人，我尝试了这个排列：

    //# Whosebug permutation 03:
    function getAttributeValue(attributeWebId) {
        var theEnvelopePlease; //~ clear the variable
        var atrbUrl = "https://<<The Target Web API Root Address>>";
        var atrbPrefix = "streams/";
        var atrbWebId = attributeWebId;
        var atrbExtension = "/value";
        //~ Concatenate the URL used to make the request
        atrbUrl = atrbUrl + atrbPrefix + atrbWebId + atrbExtension;
        theEnvelopePlease = $.getJSON(atrbUrl, function (data) {
            console.log(data.Value) + " " + (data.UnitsAbbreviation);
            return (data.Value) + " " + (data.UnitsAbbreviation);
        });
        return theEnvelopePlease;
    }

这是结果视图：

Answer 1

你的代码的问题，以及 alert 在 return 不工作时工作的原因，是因为 $.getJSON 没有将其回调输出传递给主函数.执行此行时：

(data.Value) + " " + (data.UnitsAbbreviation);

回调上下文中只有运行，因此 getAttributeValue 没有收到该数据。您应该能够通过在运行 $.getJSON 之前定义一个空变量来解决此问题，将该变量更改为您收到的响应，然后 returning 该变量，您的代码显示您开始做。你所拥有的非常接近正确。据我所知，您需要做的就是删除 $.getJSON 之前的第一个 return 并取消注释以 //theEnvelopePlease = 开头的行和第二个 return 语句， // return theEnvelopePlease;。这应该导致 getAttributeValue 看起来像这样：

function getAttributeValue(attributeWebId) {
    var theEnvelopePlease;
    ...
    atrbUrl = atrbUrl + atrbPrefix + atrbWebId + atrbExtension;
    $.getJSON(atrbUrl, function (data) {
        theEnvelopePlease = (data.Value) + " " + (data.UnitsAbbreviation);
    });
    return theEnvelopePlease;
}

希望对您有所帮助！

Answer 2

对于那些将来会关注此帖子的人，我很高兴提供我终于找到的解决方案（5 天后）。我在 jQuery 上的主要错误本质上是为了使用 CSS 选择器来操纵现有的 HTML/DOM 元素。在 C# 等其他语言中，您可以按程序调用函数并返回结果并继续程序的其余部分。在我之前的尝试中，无论我尝试什么，JQuery 都会不断返回 'undefined or '[object Object]'。在这种情况下，我通过首先构建 "myHTMLDataTable" 并将唯一的 "id" 属性应用于我想要填充值的 <td> 元素找到了我的解决方案。所以我修改后的代码首先使用 for 循环构建 table，然后使用第二个循环填充目标 table 单元格，该循环调用现在工作的函数 returns 我拼命清除数据寻求。这是工作代码：

    //# Whosebug SOLUTION:
    //# This is the primary function that gathers data from a web api / web service:
    $(document).ready(function () {
        $("#loadData").click(function () {
            //~ First Build the data Table:
            $.get(url, function (data) {
                var myHTMLDataTable = "<table class='table table-striped table-hover'>";
                myHTMLDataTable = myHTMLDataTable + "<tr><th>WebId</th><th>Attributes</th><th>Values</th></tr>";
                for (i = 0; i < data.Items.length; i++) {
                    myHTMLDataTable = myHTMLDataTable + "<tr>";
                    myHTMLDataTable = myHTMLDataTable + "<td class='col-sm-1'>" + (data.Items[i].WebId) + "</td>";
                    myHTMLDataTable = myHTMLDataTable + "<td class='col-sm-1'>" + (data.Items[i].Name) + "</td>";
                    myHTMLDataTable = myHTMLDataTable + "<td class='col-sm-1' id='" + (data.Items[i].WebId) + "'></td>"; //~ The target table cell using the unique 'WebId'
                    myHTMLDataTable = myHTMLDataTable + "</tr>";
                }
                myHTMLDataTable = myHTMLDataTable + "</table>";
                document.getElementById("myData").innerHTML = myHTMLDataTable;
            });
            //~ Second Populate the target table cell by calling the 'getAttributeValue' function in a second for loop:
            $.get(url, function (data) {
                for (i = 0; i < data.Items.length; i++) {
                    getAttributeValue(data.Items[i].WebId);
                }
            });
        });
    });

    //# This function returns a current value and uom for the target attribute directly into the target cell:
    function getAttributeValue(attributeWebId) {
        var atrbURL = "https://<<The Target Web API Root Address>>";
        var atrbPrefix = "streams/";
        var atrbWebId = attributeWebId;
        var atrbExtension = "/value";
        //~ Concatenate the URL used to make the request
        atrbUrl = atrbURL + atrbPrefix + atrbWebId + atrbExtension;
        $.getJSON(atrbUrl, function (data) {
            var myInnerValue = "";
            $.each(data, function (key, val) {
                if (key == 'Value') {
                    myInnerValue = myInnerValue + val + " ";
                }
                if (key == 'UnitsAbbreviation') {
                    myInnerValue = myInnerValue + val;
                }
            });
            $("#" + attributeWebId + "").text(myInnerValue);
        });
    }

这是结果的屏幕截图：

嵌套 JQuery 函数 Returns 'undefined' 或 '[object Object]'

Nested JQuery Function Returns 'undefined' or '[object Object]'

javascript

jquery

web-services

webservice-client

getjson