Question

我是一名python程序员，所以我不确定如何在JavaScript中执行此操作。

示例输入（来自提供JSON的REST服务）：

[{"name": "foo", "id": 1024}, {"name": "bar", "id": 1025}]

输出：

<table>
    <thead>
            <tr><th>name</th> <th>id</th></tr>
    </thead>
    <tbody>
            <tr><td>foo</td> <td>1024</td></tr>
            <tr><td>bar</td> <td>1025</td></tr>
    </tbody>
</table>

尝试（这是我已经得到的，在尝试将其作为表格之前，首先尝试使用JQuery docs中的列表示例）：

<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <ul class="my-new-list"></ul>
        <script>
          $.getJSON('http://www.servicestack.net/ServiceStack.Northwind/customers?format=json', function(data) {
          var items = [];

          $.each(data, function(key, val) {
            items.push('<li id="' + key + '">' + val + '</li>');
          });

          $('<ul/>', {
            'class': 'my-new-list',
            html: items.join('')
          }).appendTo('body');
        });
        </script>
    </body>
</html>

我确定这只是我的一些错误，但不确定它是什么。你能指出来吗？

最好我想要一个带字典语法的python式视图（也许Handlebars可以提供这个？），这样我就可以去for person in this_list: <tr>person.name</tr>。

Answer 1

首先，你的jQuery甚至不会运行，因为你从未触发过它，或者将它包装成类似......

的东西

$(document).ready(function() { ... });

见这里：Introducing $(document).ready()

其次，无法通过Javascript 从其他域加载JSON，除非您使用JSONP，请参阅：jQuery’s JSONP Explained with Examples。 通常，您将使用PHP，.Net，Ruby将JSON加载到服务器并使其可用于您的脚本。

示例：Handling data in a PHP JSON Object

最后，javascript / jQuery允许您使用person.name之类的语法，这完全取决于您的对象或数组的结构。

至于“漂亮”的布局，有很多选项我无法真正开始在这里解释它们......但如果你甚至不能在第一时间加载数据那么一切都是如此！：）

这是一个旧的但仍然有用的教程，解释了这一点：http://www.factsandpeople.com/facts-mainmenu-5/26-html-and-javascript/89-jquery-ajax-json-and-php

Answer 2

这里有几个问题。贾斯汀詹金斯已经提到了两个最严重的问题。

除此之外，还要确保服务器的答案是数组而不是对象。您当前的url响应对象。所以在这种情况下，你必须访问数组：$.each(data.Customers ...在这里诀窍。

其次，通过遍历数组调用的函数获取键和值。但是不是对象的属性，但键在这种情况下是0 ... n（数组的索引），值是对象。因此，如果要访问数组中的对象，请改用val.property。

然后代码可能如下所示：

$.getJSON('http://www.servicestack.net/ServiceStack.Northwind/customers?format=json', function(data) {

var items = [];

$.each(data.Customers, function(key, val) {
  items.push('<li id="' + val.id + '">' + val.name + '</li>');
});

$('<ul/>', {
    'class': 'my-new-list',
    html: items.join('')
  }).appendTo('body');
});

当然假设您的请求成功。

这是一个不使用请求的jsfiddle，但显示了jquery迭代函数的使用。

http://jsfiddle.net/jomikr/zg2y5/

让JSON与REST一起使用JQuery？

2 个答案: