如何使用jquery mvc从json读取数据以查看

我在数组中有以下数据

[{"FirstName":"Nancy","LastName":"Davolio","Title":"Sales Representative"},
{"FirstName":"Andrew","LastName":"Fuller","Title":"Vice President, Sales"}]

我想使用jquery将这些数据显示到如下表中：

 <table id="employee">
 <tr>
 <td>Nancy</td>
 <td>Davolio</td>
 <td>Sales Representative</td>
 ...
 </table>

南希
达沃利奥
销售代表
...

我以前做过类似的事情：

var apiUrl = 'UrlOfData';
$(document).ready(function () {
    $.getJSON(apiUrl)
        .done(function (data) {
            for (var item in data){
                $('#people').append(item.FirstName);
            }
        })
        .fail(function (jqXHR, textStatus, err) {
            $('#people').text('Error: ' + err);
        });
});

相似的

$(document).ready(function() {
      var jsonp = '[{"Lang":"jQuery","ID":"1"},{"Lang":"C#","ID":"2"}]';
      var lang = '';
      var obj = $.parseJSON(jsonp);
      $.each(obj, function() {
          lang += this['Lang'] + "<br/>";
      });
      $('span').html(lang);
    });​

$（文档）.ready（函数（）{
var jsonp='[{“Lang”：“jQuery”，“ID”：“1”}，{“Lang”：“C#”，“ID”：“2”}]；
var lang=''；
var obj=$.parseJSON（jsonp）；
$.each（对象，函数（）{
lang+=这个['lang']+“
”；
});
$（'span'）.html（lang）；
});​

我认为您不需要jQuery来实现这一点。一把剃须刀就够了。类似的方法应该可以工作（假定传递的模型是IEnumerable）：

@foreach（模型中的var员工）
{
@employee.LastName
@雇员姓名
@雇员职位
}

可以理解，对于这样的简单操作，手动组装DOM是可以的。但是我仍然有点惊讶，没有人提到jquery模板

请参阅此链接的详细信息：，其中引用了以下内容

插件使用数据属性解析模板以填充 数据。只需传入一个JavaScript对象，插件就会执行以下操作 休息

下面是一个示例模板：

类似地，模板的内容可以保存在一个单独的html文件中，而不包含脚本标记，并且可以像 以下:

这个插件有很多数据。。。可用于用数据填充各种属性的属性。还有 强大的数据模板绑定属性，可接受JSON对象， 启用对任何属性或元素内容的绑定

---

欢迎提供更多的背景和细节。你想达到什么目标？视图和后端代码的示例也很好。因此，我的目标是，使用ViewData从我的控制器获取数据，并使用jquery只需单击按钮即可将检索到的值放到视图中，而无需刷新页面，以下是我的视图的后端代码：view:@{var serializer=new System.Web.Script.Serialization.JavaScriptSerializer（）；var employees=@serializer.Serialize（ViewData[“employees”]；}$（“#employees”）.append（“+”@employees.toString”+”）-因此，基本上我想将序列化的数据附加到我的表中，您可以从上面看到。@Scott.N，除了当前提供的答案之外，您还想要什么？我使用了-$.ajax（{url:''，类型：'GET'，数据类型：'json'，成功：函数（数据）{$.each（数据，函数（键，雇员）{$（“#可清空”）.append（“+employee.FirstName+”；}）；}}}）；boldI使用razor在我的视图页“@model IEnumerable@{var serializer=new System.Web.Script.Serialization.JavaScriptSerializer（）；var employees=@serializer.Serialize（ViewData[“employees”]）；}不要使用JavaScriptSerializer…这有点可怕。试试JSON.NET我在我的查看页面上使用razor声明了我的数据，并使用了序列化'@model IEnumerable@{var serializer=new System.Web.Script.serialization.JavaScriptSerializer（）；var-employees=@serializer.Serialize（ViewData[“employees”]）；}这完全有效……但是我的jsonp的数据来自ViewData，你能给我这个建议吗？请……var-jsonp='@ViewData[“key”]'；我的表var j='@ViewData[“employees”]上没有附加数据“；var json=$.parseJSON（j）；$（json）.each（函数（i，val）{$.each（val，函数（k，v）{$（“#employee”）.append（“+k+”：“+v+”）；}）；确保@ViewData[“Employees”]是json格式的字符串。您可以尝试警报（j）所以我的目标是，使用ViewData从我的控制器获取数据，并使用jquery只需单击一个按钮就可以将检索到的值放到视图中，而无需刷新页面。

<table id="employee">
@foreach (var employee in Model)
{
 <tr>
  <td>@employee.LastName</td>
  <td>@employee.FirstName</td>
  <td>@employee.TItle</td>
 </tr>
}
</table>

<script type="text/html" id="template">
     <div data-content="author"></div>
     <div data-content="date"></div>
     <img data-src="authorPicture" data-alt="author"/>
     <div data-content="post"></div> </script> 

 $("#template-container").loadTemplate($("#template"),
     {
         author: 'Joe Bloggs',
         date: '25th May 2013',
         authorPicture: 'Authors/JoeBloggs.jpg',
         post: 'This is the contents of my post'
     }); 

 $("#template-container").loadTemplate("Templates/template.html",
     {
         author: 'Joe Bloggs',
         date: '25th May 2013',
         authorPicture: 'Authors/JoeBloggs.jpg',
         post: 'This is the contents of my post'
     });