为啥从 json 操作中检索到的数据显示为未定义？

Posted 2023-05-08

技术标签:

【中文标题】为啥从 json 操作中检索到的数据显示为未定义？【英文标题】：why the retrived data from json action display as undefined?为什么从 json 操作中检索到的数据显示为未定义？ 【发布时间】：2020-10-27 17:15:58 【问题描述】：

这里有人看输出console.log() 和表的结构是对的吗？我认为错误在其中之一。我正在尝试从数据库中获取所需的数据，我在 loadData() 函数中使用 console.log() 数据和 $.each() 中的 val，当我单击 btn1 或 btnAllUser 时，它会显示所需的数据在控制台中作为 javascript 对象，但结果在表格字段中显示为未定义，如最后的图像中所示。我需要你的帮助，请。以下是我的控制器、视图、ajax 脚本：

 public JsonResult GetDonatorsWithParameter(int? StateId, string CityName, string blt)


    ViewBag.StateId = new SelectList(db.states, "StateId", "StateName");
    ViewBag.CityName = new SelectList(db.cities, "CityId", "CityName");



    return this.Json(new
    
        result = (from a in db.Donors
                  where (a.StateId == StateId && a.CityName == CityName && a.bloodType == blt)
                  select new  Id = a.Id, Name = a.Name, adress =( a.state.StateName+"-"+ a.CityName), PhoneNumber = a.PhoneNumber, bloodType = a.bloodType,Email=a.Email, conn = a.conn, Tconn = a.Tconn ).ToList()
    , JsonRequestBehavior.AllowGet);

观点是：

 @
ViewBag.Title = "GetDonators";
Layout = "~/Views/Shared/_Layout.cshtml";

 <div class="container" id="con">
<br />
     <div class="form-group row">
         &nbsp;&nbsp;
         الدولة: @Html.DropDownList("StateId", (SelectList)ViewBag.StateId, "اختر الدولة", htmlAttributes: new  @class = "form-control mx-2 col-md-2", id = "State" )
         المدينة:@Html.DropDownList("CityName", new SelectList(string.Empty, "Value", "Text"), htmlAttributes: new  @class = "form-control col-md-2", id = "city" )
         فصيلة الدم:@Html.DropDownList("blt", new SelectList(new[]  "+A", "-A", "+B", "-B", "+AB", "-AB", "+O", "-O" ), "اختر فصيلة الدم", new  @class = "form-control col-md-2 mr-md-3", id = "bt" )
         <input type="submit" value="Search" class="btn btn-info col-md-1 mr-1" id="btn1" />
         <input type="submit" value=" بحث" class="btn btn-info col-md-1" id="btnAllUser" />

     </div>
</div>



<div id="UpdatePanel">

</div>

这是我的 jQuery 脚本：

@section Scripts 
<script type="text/jscript">
$(function () 
    $('#State').change(function () 
        $.getJSON('/Donators/Citylist/' + $('#State').val(), function (obj) 
            var items = '<option>اختر المدينة</option>';
            $.each(obj, function (i, city) 
                items += "<option value='" + city.Value + "'>" + city.Text + "</option>";
            );
            $('#city').html(items);
        );
    );

    // This is for Get All Data
    $("#btnAllUser").click(function () 

        $.ajax(
            url: "@Url.Action("GetAllDonators", "DonorOnlines")",
            data: "",
        type: "GET",
        dataType: "json",
        success: function (data) 
            loadData(data);
        ,
        error: function () 
            alert("Failed! Please try again.");
        
    );

);

// this will use for Get Data based on parameter
$("#btn1").click(function () 
    $.ajax(
        url: "@Url.Action("GetDonatorsWithParameter", "DonorOnlines")",
        data: 
            StateId: $('#State').val(),
            CityName: $('#city').val(),
            blt: $('#bt').val()
        ,
    type: "GET",
    dataType: "json",
    success: function (data) 
        loadData(data);
    ,
    error: function () 
        alert("Failed! Please try again.");
    
);
);

    function loadData(data) 
        
    
     // Here we will format & load/show data
    var tab = $('<table class="table"></table>');
    var thead = $('<thead></thead>');
    thead.append('<th>User ID</th>');
    thead.append('<th>User name</th>');
    thead.append('<th>Address</th>');
    thead.append('<th>Phone</th>');
    thead.append('<th>bloodType</th>');
    thead.append('<th>Email</th>');
    thead.append('<th>Connection way</th>');
    thead.append('<th>time</th>');
    console.log(thead);

    tab.append(thead);
    $.each(data, function (i, val) 
        // Append database data here
        var trow = $('<tr></tr>');
        trow.append('<td>' + val.Id + '</td>');
        trow.append('<td>' + val.Name + '</td>');
        trow.append('<td>' + val.adress + '</td>');
        trow.append('<td>' + val.PhoneNumber + '</td>');
        trow.append('<td>' + val.bloodType + '</td>');
        trow.append('<td>' + val.Email + '</td>');
        trow.append('<td>' + val.conn + '</td>');
        trow.append('<td>' + val.Tconn + '</td>');
               console.log(val);
               console.log(trow);
        tab.append(trow);
       
    );
    console.log(tab);
    $("tr:odd", tab).css('background-color', '#C4C4C4');
    $("#UpdatePanel").html(tab);
;


);
</script>

console.log(data) 的输出是

result: Array(9)
0: Id: 4, Name: "علي عبدالله", adress: "اليمن-22", PhoneNumber: "714885965", bloodType: "B-", …
1: Id: 5, Name: "هيثم صلاح محمد", adress: "اليمن-24", PhoneNumber: "735699885", bloodType: "+A", …
2: Id: 7, Name: "علي قاسم محمد", adress: "اليمن-24", PhoneNumber: "775636545", bloodType: "A+", …
3: Id: 8, Name: "hossam", adress: "اليمن-21", PhoneNumber: "775696855", bloodType: "A-", …
4: Id: 9, Name: "ali ahmed ali", adress: "اليمن-21", PhoneNumber: "774455661", bloodType: "O+", …
5: Id: 10, Name: "salem saleh", adress: "اليمن-21", PhoneNumber: "774488996", bloodType: "+A", …
6: Id: 12, Name: "salah ali", adress: "اليمن-21", PhoneNumber: "715489693", bloodType: "+A", …
7: Id: 13, Name: "hospital", adress: "اليمن-22", PhoneNumber: "714693145", bloodType: "+A", …
8: Id: 14, Name: "salwa", adress: "اليمن-تعز", PhoneNumber: "714569965", bloodType: "-A", …

【问题讨论】：

谁能帮帮我 【参考方案1】：

我测试了您的代码，它运行良好。检查一下，也许您在代码中添加了其他内容。 loadData 中的 console.log(val) 究竟返回了什么？

var test = [
Id: 4, Name: "علي عبدالله", adress: "اليمن-22", PhoneNumber: "714885965", bloodType: "B-", Email: "test", conn: "conn", Tconn: "123",
Id: 4, Name: "علي عبدالله", adress: "اليمن-22", PhoneNumber: "714885965", bloodType: "B-", Email: "test", conn: "conn", Tconn: "123",
Id: 4, Name: "علي عبدالله", adress: "اليمن-22", PhoneNumber: "714885965", bloodType: "B-", Email: "test", conn: "conn", Tconn: "123",
Id: 4, Name: "علي عبدالله", adress: "اليمن-22", PhoneNumber: "714885965", bloodType: "B-", Email: "test", conn: "conn", Tconn: "123"];

loadData(test);

function loadData(data) 
     // Here we will format & load/show data
    var tab = $('<table class="table"></table>');
    var thead = $('<thead></thead>');
    thead.append('<th>User ID</th>');
    thead.append('<th>User name</th>');
    thead.append('<th>Address</th>');
    thead.append('<th>Phone</th>');
    thead.append('<th>bloodType</th>');
    thead.append('<th>Email</th>');
    thead.append('<th>Connection way</th>');
    thead.append('<th>time</th>');

    tab.append(thead);
    $.each(data, function (i, val) 
            console.log(i);
        console.log(val);

        // Append database data here
        var trow = $('<tr></tr>');
        trow.append('<td>' + val.Id + '</td>');
        trow.append('<td>' + val.Name + '</td>');
        trow.append('<td>' + val.adress + '</td>');
        trow.append('<td>' + val.PhoneNumber + '</td>');
        trow.append('<td>' + val.bloodType + '</td>');
        trow.append('<td>' + val.Email + '</td>');
        trow.append('<td>' + val.conn + '</td>');
        trow.append('<td>' + val.Tconn + '</td>');
        tab.append(trow);
       
    );
    $("tr:odd", tab).css('background-color', '#C4C4C4');
    $("#UpdatePanel").html(tab);
;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container" id="con">
<br />
     <div class="form-group row">
         &nbsp;&nbsp;
         الدولة: @Html.DropDownList("StateId", (SelectList)ViewBag.StateId, "اختر الدولة", htmlAttributes: new  @class = "form-control mx-2 col-md-2", id = "State" )
         المدينة:@Html.DropDownList("CityName", new SelectList(string.Empty, "Value", "Text"), htmlAttributes: new  @class = "form-control col-md-2", id = "city" )
         فصيلة الدم:@Html.DropDownList("blt", new SelectList(new[]  "+A", "-A", "+B", "-B", "+AB", "-AB", "+O", "-O" ), "اختر فصيلة الدم", new  @class = "form-control col-md-2 mr-md-3", id = "bt" )
         <input type="submit" value="Search" class="btn btn-info col-md-1 mr-1" id="btn1" />
         <input type="submit" value=" بحث" class="btn btn-info col-md-1" id="btnAllUser" />

     </div>
</div>



<div id="UpdatePanel">

</div>

【讨论】：

json 动作将数据作为对象数组返回，我正在编辑我的 json 动作

以上是关于为啥从 json 操作中检索到的数据显示为未定义？的主要内容，如果未能解决你的问题，请参考以下文章

表达式解析为未使用的 i 值 [重复]

为啥我的 HTTP DELETE 请求正文显示为未定义？

为啥 Firebug 不为未定义的属性显示“未捕获的类型错误”？

无法访问 json 对象属性和值在 rails 视图中显示为未定义

JSON 构造函数显示为未定义

如何将从 json 检索到的数据从一个视图传递到另一个视图？ [复制]