3

我在数组中有以下数据。

[{"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>
4

4 回答 4

6

相似的

$(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);
    });​
于 2013-09-26T15:45:58.593 回答
2

我以前做过这样的事情：

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);
        });
});
于 2013-09-26T15:39:10.300 回答
0

我不相信你需要 jQuery。剃须刀中的foreach应该足够了。像这样的东西应该可以工作（假设传递的模型是 IEnumerable）：

<table id="employee">
@foreach (var employee in Model)
{
 <tr>
  <td>@employee.LastName</td>
  <td>@employee.FirstName</td>
  <td>@employee.TItle</td>
 </tr>
}
</table>
于 2013-09-26T22:03:48.673 回答
0

据了解，像这样的简单操作，手动组装 DOM 是可以的。但我还是有点惊讶没有人提到 jquery 模板。

从此链接查看详细信息：Jquery 模板，其中引用了以下内容。

该插件使用数据属性解析模板以填充数据。只需传入一个 JavaScript 对象，插件就会完成剩下的工作。

下面是一个示例模板：

<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'
     });

类似地，模板的内容可以保存在一个单独的 html 文件中，没有封闭的 script 标签，使用如下：

 $("#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'
     });

该插件有许多 data-... 属性，可用于使用数据填充各种属性。还有一个强大的 data-template-bind 属性，它接受 JSON 对象，可以绑定到任何属性或元素的内容。

于 2013-10-23T12:35:09.890 回答