undefined object in retrieving data aspnetcore - asp.net-core

Question

I'm having trouble in binding the records from json to my
script in my view but I'm getting data from console.log. Can you
please help me what am I missing? here's my code...
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>

Answer 1

Assuming you are using a version of jQuery >= 1.5, the following should help you determine what's going on. The way the script is currently written, using the ajax shorthand version, if there is an error in the call, jquery will fail silently. This way, you have an option to handle an error during the call execution and view the error in the browser dev console to help you debug the issue.
Update I added a jsfiddle for you to understand it better in case the explanation isn't enough (you should provide a jsfiddle in the future)
Also, see the following json, I'm assuming your data is similar to https://api.myjson.com/bins/1fryq4. You have to take into account the data structure that is being converted into json from the backend.
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 function (shortened, see 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);
});
}

Answer 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>