【问题标题】:Iterate through list in javascript遍历javascript中的列表
【发布时间】:2014-09-22 13:38:32
【问题描述】:

我正在使用 Google 地图 API 开发一个 .NET MVC 4 网络应用程序。

在这个项目中,我必须在地图上表示几个多边形。我想出的解决方案是在database 中创建两个表,一个具有每个多边形的标识符,另一个保存每个多边形的每个角的纬度和经度。现在我必须将这些多边形加载到视图中的地图上。

我试图通过在ViewBag 中加载一个列表并在一个脚本中通过它来实现这一点,该脚本将代表地图中的多边形。我发送给ViewBag 的是List<List<string[]>>。 “主”列表的每个成员都代表一个多边形,它由许多标记 (List<string[]>) 组成。在string[] 中,我保存了每个标记的纬度、经度和描述。

我现在的问题是通过Javascript 中的此类列表。这甚至可能吗?或者有没有我没有考虑过的更顺畅的解决方案?

谢谢!

【问题讨论】:

  • 能否记录下使用js获取的数据:console.log(viewBagData)?我想帮助你,但需要先看一个数据示例。

标签: javascript asp.net google-maps asp.net-mvc-4 google-maps-api-3


【解决方案1】:

我要做的是将一个对象中的数据传递给您的视图,并在您的视图中使用@Html.Raw(Json.Encode(polygons))。下面的例子。

C# 模型:

public class Polygon {
  public string Name { get; set; } // name of polygon
  public List<string> Markers { get; set; } // list of markers
}

MVC 控制器:

List<Polygon> polygons = ...; // List of Polygons, retrieved from database

return View(polygons);

剃刀视图:

@model List<Polygon>

<script>
  var polygons = @Html.Raw(Json.Encode(Model)); // will render as var polygons = [ { Name: 'Polygon1', Markers: [ 'marker1', 'marker2' ] }, { Name: 'Polygon2', Markers: [...] } ];

  // from @Kosmo's answer
  polygons.forEach(function(polygon) {
    console.log('Name is ' + polygon.Name);
    console.log('Markers are ' + polygon.Markers.join(','));
  });
</script>

你最终得到的是一个 JSON 格式的 List,它是你在 Controller 中创建它时传入的数据。

【讨论】:

    【解决方案2】:

    你可以这样做:

     <script>
       var arr = '@YourList`;
    
       arr .forEach(function(item) {
         // whatevery you want here
       });
     </script>
    

    【讨论】:

      【解决方案3】:

      是的,如果您将 ViewBag 值保存在 javascript 上的变量中,这已经成为可能。

      你可以这样做:

      <script>
      var myViewBagValue = '@ViewBag.NameOfViewBag';
      
      //then you can iterate using one of all those ways that javascript provides
      
      //every(), filter(), forEach(), map(), some() and etc.
      
      </script>
      

      这样,您的内容将始终存储在 javascript 值中,您可以毫无问题地进行操作。

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2018-10-07
        • 2022-01-04
        • 2016-08-27
        • 2011-09-14
        相关资源
        最近更新 更多