Question

我正在开发一个显示开放街道地图的网页，并通过长坐标和纬度坐标从SQL服务器数据库中获取数据我使用asp.net mvc并给我这个错误的
未捕获的TypeError：无法读取未定义的属性“名称”
我通过javascript绑定数据库中的数据

模型
这个模型数据我创建了GetMap（），它通过Json函数

从数据库返回数据

  [HttpPost]
        public JsonResult GetMap()
        {
            var data1 =(from p in db.Map
                    select new
                    {
                        Name = p.Name,
                        Latitude = p.Latitude,
                        Logitude = p.Logitude,
                        Location = p.Location,
                        Description = p.Description,
                        Id = p.Id
                    }).ToList().Select(res => new Map
                    {
                        Name = res.Name,
                        Latitude = res.Latitude,
                        Logitude = res.Logitude,
                        Location = res.Location,
                        Description = res.Description,
                        Id = res.Id


                    });
            return Json(data1, JsonRequestBehavior.AllowGet);
        } 
</pre>

查看档案
查看显示地图并通过Json函数返回数据的文件

    <div id="mapid" style="height:600px"></div>
    <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {

        var map = L.map('mapid').setView([31.291340, 34.244190], 13);

        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);





            $.ajax({
                type: "POST",
                url: '/Maps/GetMap',
                success: function (data) {
                    var result = JSON.stringify(data);

                    for (var i = 0; i < result.length; ++i) {

                        var popup =
                            '<b>Name:</b> ' + data[i].Name +
                         '<br/><b>Latitude:</b> ' + data[i].Latitude +
                           '<br/><b>Longitude:</b> ' + data[i].Logitude +
                        '<br/><b>Location:</b> ' + data[i].Location;


                        L.marker([data[i].Latitude, data[i].Logitude])
                            .bindPopup(popup)
                           .addTo(map); 

                    }

                },
                error: function (xhr) {

                    console.log(xhr.responseText);
                    alert("Error has occurred..");
                }
            });
        });

    </script>

Answer 1

问题在于以下几点：

 var result = JSON.stringify(data);
 for (var i = 0; i < result.length; ++i) {

JSON.stringify()将javascript object转换为json文本，将stores转换为字符串。

您不需要迭代json字符串，因为您需要迭代collection。

您必须直接迭代data。

 for (var i = 0; i < data.length; i++) {}

POST 方法的响应由ajax成功回调自动解析。

此外，当您执行POST请求时，您不需要JsonRequestBehavior.AllowGet属性。这仅适用于GET动词，因为它可以保护您免受涉及JSON请求的特定攻击。

Answer 2

你在这里生成一个字符串

var result = JSON.stringify(data);

然后循环直到字符串长度，这是该字符串中的字符数（不是你的json数组长度）

for (var i = 0; i < result.length; ++i) { }

字符串长度将超过json数组长度。

所以简单地修复你的循环以使用正确的变量。

for (var i = 0; i < data.length; ++i) {

}

此外，无需致电Json.stringify。只需循环遍历json数组。

或者，您可以使用$.each

success: function (data) {
  $.each(data,function(indx,item)
  {
    console.log(item.Name);
  }
}

您的服务器代码也可以简化。没有必要进行两次投影。

[HttpPost]
public JsonResult GetMap()
{
        var data1 =db.Map.Select(res => new Map
                              {
                                Name = res.Name,
                                Latitude = res.Latitude,
                                Logitude = res.Logitude,
                                Location = res.Location,
                                Description = res.Description,
                                Id = res.Id
                             }).ToList();
    return Json(data1);
}

当您的操作方法使用JsonRequestBehavior.AllowGet

进行修饰时，您无需指定[HttpPost]

Answer 3

此错误表示您尝试引用给定对象（undefined）上不存在的字段（名称）。代码中有三个位置引用了Name字段：

p.Name
res.Name
data[i].Name

因此，当您尝试引用p属性时，res，data[i]或Name中的一个未定义。

未捕获的TypeError：无法读取未定义的属性“名称”

3 个答案: