检索数据 aspnetcore 中的未定义对象答案

【问题标题】：undefined object in retrieving data aspnetcore检索数据 aspnetcore 中的未定义对象
【发布时间】：2018-08-13 12:57:13
【问题描述】：

我在将记录从 json 绑定到我的脚本在我看来，但我从 console.log 获取数据。你可以吗请帮助我我错过了什么？这是我的代码...

public JsonResult GetListOfQuestions()
        {
            List<Question> QuesList = _context.Question.ToList();
            return Json(QuesList);
        }


<div id="SetQuestionsList">
        <div id="LoadingStatus">

        </div>
</div>

<script>
    $("#LoadingStatus").html("Loading....");
    $.get("/Questions/GetListOfQuestions", null, DataBind);
    function DataBind(QuesList) {
        var SetData = $("#SetQuestionsList");
        console.log(QuesList);
        for (var i = 0; i < QuesList.length; i++) {
            var aa = i + 1
            var Data =
                "<div class='row_{" + QuesList.QuestionId + "}'>" +
                    "<div class='panel panel-primary'>" +
                        "<div class='panel-heading'>" +
                            "<div class='row'>" +
                                "<div class='col-lg-10'>" +
                                    "<p>Question " + aa + "</p>" +
                                "</div>" +
                                "<div class='col-lg-1'>" +
                                    "<a href='#' class='btn btn-warning' onclick='EditQuestion({" + QuesList.QuestionId + "})'>" +
                                        "<span class='glyphicon glyphicon-edit'></span>Update" +
                                    "</a>" +
                                "</div>" +
                                "<div class='col-lg-1'>" +
                                    "<a href='#' class='btn btn-danger' onclick='DeleteQuestionRecord({" + QuesList.QuestionId + "})'>" +
                                        "<span class='glyphicon glyphicon-trash'></span>Delete" +
                                    "</a>" +
                                "</div>" +
                            "</div>" +
                        "</div>" +

                        "<div class='panel-body'>" +
                            "<div class='row'>" +
                                "<div class='col-lg-12'>" +
                                    "<div class='form-group'>" +
                                        "<b>Description</b><br />" +
                                        "<p>" + QuesList.QuestionText + "</p>" +
                                    "</div>" +
                                "</div>" +
                            "</div>" +
                        "</div>" +
                    "</div>" +
                "</div>";
            SetData.append(Data);
            $("#LoadingStatus").html(" ");
        }
    }
</script>

【问题讨论】：

您是否查看过浏览器开发控制台，是否有任何来自通话的反馈？你做了什么调试？
离题了，但是你用什么来表达你的观点？有很多可用的选项，因此您可以模板化您的视图
另外，如果你创建了一个 jsfiddle 或类似的东西会很有帮助，这样社区可以帮助你

标签： asp.net-core asp.net-ajax

【解决方案1】：

假设您使用的 jQuery >= 1.5 版本，以下应该可以帮助您确定发生了什么。目前脚本的编写方式，使用ajax速记版本，如果调用有错误，jquery会静默失败。这样，您可以选择在调用执行期间处理错误并在浏览器开发控制台中查看错误以帮助您调试问题。

更新我添加了一个jsfiddle以便你更好地理解它，以防解释不够（你应该在未来提供一个jsfiddle）

另外，请参阅以下 json，我假设您的数据类似于 https://api.myjson.com/bins/1fryq4。您必须考虑从后端转换为 json 的数据结构。

  function getQuestions(){
     $("#LoadingStatus").show();

     $.get("https://api.myjson.com/bins/1fryq4")
       .done(function( data ) {
        //call you binding function
        DataBind(data);
        })
       .fail( function(err){
         //handle the error in the UI, alert the user something went wrong, recover form the error
         alert("GetListOfQuestions error!");
         //chrome: display object in js console
         console.dir(err);
        })
       .always(function() {
         //hide loading spinner
         $("#LoadingStatus").hide();
       });
  }

Databind js 函数（简称，见 jsfiddle）

  function DataBind(QuesList) {
     var aa = 0;
     var QuestionList = $("#SetQuestionsList");

     //if you need to convert json to a js object use the builtin parser
     //Example: var data = JSON.parse(QuesList);

     //TODO good practice to check if valid list before trying to iterate the array

    //pay attention to your incoming object
    QuesList.questions.forEach(function(item){
         aa++;
         var question =
            "<div class='row_{" + item.questionId + "}'>" +
            "<div class='panel panel-primary'>" +
            "<div class='panel-heading'>" +
           "<div class='row'>" +
            "<div class='col-lg-10'>" +
           "<p>Question " + aa + "</p>" +
           "</div>" +
           "<div class='col-lg-1'>" +
           "<a href='#' class='btn btn-warning' onclick='EditQuestion({" + item.questionId + "})'>" +
           "<span class='glyphicon glyphicon-edit'></span>Update" +
           "</a>" +
           "</div>" +
          "<div class='col-lg-1'>" +
          "<a href='#' class='btn btn-danger' onclick='DeleteQuestionRecord({" + item.questionId + "})'>" +
          "<span class='glyphicon glyphicon-trash'></span>Delete" +
          "</a>" +
         "</div>" +
        "</div>" +
         "</div>" +
        ...
        "<b>Description</b><br />" +
         "<p>" + item.questionDescription + "</p>" +
         "</div>" +
         ...
         "</div>";

         QuestionList.append(question);
      });
  }

【讨论】：

只是从json返回的数据没有正确绑定..在我的console.log中，我可以看到我的记录，但它不会绑定到我的视图并显示未定义..对不起，如果我对你的问题没有帮助，因为我是这方面的新手。请帮帮我 (6) [{...}, {...}, {...}, {...}, {...}, {...}] 0 {questionId: "54e26f6f-16db-4702-24b3-08d5f6ceae08", questionTypeId: " 4e0698de-adee-4d8e-bd6c-a6fc1a7ffae8", questionDescription: "你是一个好奇和逻辑的人，喜欢 dis...你可以通过阅读、学习或解决问题来学习吗？", quizId: "a8a7013f-3636-4cc2-a384-e0d8d5240b3a ", questionTypeName: "是或否", ...}
@amaurosis 我更新了答案以包含一个 jsfiddle，以防它仍然没有意义。您的错误是未正确映射数据。希望对你有帮助
嗨，威尔，非常感谢您的帮助.. 现在没有错误，但没有显示任何内容.. 即使 console.log() 没有显示，请查看下面的代码错过了什么。
@amaurosis 听起来您有 a）数据映射问题或 b）您的 dom 操作已关闭。使用 jsfiddle 作为工作场所，这样我就可以深入了解您的问题。我从这里的帖子中帮不上什么忙。 jsfiddle 演示了获取 json 响应并显示它。您需要修改 jsfiddle 以模仿和复制您遇到的问题，以便社区可以帮助您。当你更新 jsfiddle 时让我知道，我会看看

【解决方案2】：

<script type="text/javascript">
        function getQuestions() {
            $("#LoadingStatus").show();

            $.get("/Questions/GetListOfQuestions")
                .done(function (data) {
                    //call you binding function
                    console.log(data)
                    DataBind(data);
                })
                .fail(function (err) {
                    //handle the error in the UI, alert the user something went wrong, recover form the error
                    alert("GetListOfQuestions error!");
                    //chrome: display object in js console
                    console.dir(err);
                })
                .always(function () {
                    //hide loading spinner
                    $("#LoadingStatus").hide();
                });
        }

        function DataBind(QuesList) {
            var aa = 0;
            var QuestionList = $("#SetQuestionsList");
            console.log(QuesList);
            //if you need to convert json to a js object use the builtin parser
            //Example: var data = JSON.parse(QuesList);

            //TODO good practice to check if valid list before trying to iterate the array

            //pay attention to your incoming object
            QuesList.questions.forEach(function (item) {
                aa++;
                var question =
                    "<div class='row_{" + item.QuestionId + "}'>" +
                    "<div class='panel panel-primary'>" +
                    "<div class='panel-heading'>" +
                    "<div class='row'>" +
                    "<div class='col-lg-10'>" +
                    "<p>Question " + aa + "</p>" +
                    "</div>" +
                    "<div class='col-lg-1'>" +
                    "<a href='#' class='btn btn-warning' onclick='EditQuestion({" + item.QuestionId + "})'>" +
                    "<span class='glyphicon glyphicon-edit'></span>Update" +
                    "</a>" +
                    "</div>" +
                    "<div class='col-lg-1'>" +
                    "<a href='#' class='btn btn-danger' onclick='DeleteQuestionRecord({" + item.QuestionId + "})'>" +
                    "<span class='glyphicon glyphicon-trash'></span>Delete" +
                    "</a>" +
                    "</div>" +
                    "</div>" +
                    "</div>" +
                    "<div class='panel-body'>" +
                    "<div class='row'>" +
                    "<div class='col-md-6'>" +
                    "<div class='form-group'>" +
                    "<b>Question Type</b><br />" +
                    "<text>" + item.QuestionTypeName + "</text>" +
                    "</div>" +
                    "</div>" +
                    "</div>" +
                    "<div class='row'>" +
                    "<div class='col-lg-12'>" +
                    "<div class='form-group'>" +
                    "<b>Description</b><br />" +
                    "<p>" + item.QuestionDescription + "</p>" +
                    "</div>" +
                    "</div>" +
                    "</div>" +
                    "</div>" +
                    "</div>" +
                    "</div>";

                QuestionList.append(question);
            });
        }
</script>

【讨论】：