Question

StackOverflow上的Hello好友：

我正在努力找到导致嵌套jQuery函数返回'undefined'或'[object Object]'值的原因。我已经评论了第一个函数的位置，它包含函数调用。从我对这个问题的研究中我可以看出，在这个令人困惑的问题上，我并不孤单。根据我在第二个“getAttributeValue”函数内嵌套jQuery函数中使用的代码位，我会得到不同的结果。 Stackoverflow帮助程序可以看到我一直在尝试的代码的各种排列，但是被注释掉用于调试等。“alert”方法以我想要的方式返回完美的清晰数据。其他人什么都不返回，'undefined'或'[object Object]'，但绝不是我想要的完美清晰数据。我已经足够长时间知道我需要帮助了。

数据源是提供JSON数据的Web api / web服务。

以下是代码：

//# 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时得到的内容： enter image description here

更新：嗨@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;
    }

以下是结果视图： enter image description here

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

更新：对于那些关注此主题的人，我尝试过这种排列：

    //# Stackoverflow 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;
    }

以下是结果视图： enter image description here

Answer 1

您的代码存在问题，以及alert在return不起作用时的原因是因为$.getJSON没有将其回调输出传递给主功能。执行此行时：

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

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

getAttributeValue

希望这有帮助！

Answer 2

对于那些将来会发布此帖子的人，我很高兴提供我最终找到的解决方案（5天后）。我主要关注jQuery的关键错误主要是使用CSS选择器来操纵现有的HTML / DOM元素。在其他语言（如C＃）中，您可以在程序上调用函数并返回结果并继续执行其余程序。在我以前的尝试中，JQuery不断返回＆＃39; undefined或＆＃39; [object Object]＆＃39;无论我怎么做。在这种情况下，我通过首先构建＆＃34; myHTMLDataTable＆＃34;来找到我的解决方案。并应用一个独特的＆＃34; id＆＃34;属性为我想填充值的<td>元素。因此，我修改后的代码首先使用for循环构建表，然后使用第二个循环填充目标表单元格，该循环调用现在正在运行的函数，该函数返回我正在拼命寻找的清晰数据。这是工作代码：

    //# Stackoverflow 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);
        });
    }

以下是结果的屏幕截图： enter image description here

嵌套的JQuery函数返回'undefined'或'[object Object]'

2 个答案: