0

我是一名 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>

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

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

4

2 回答 2

1

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

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

见这里：介绍 $(document).ready()

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

示例：处理 PHP JSON 对象中的数据

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

至于“不错”的布局，有很多选项我无法在这里真正开始解释它们......但如果你甚至不能首先加载数据，那一切都不是！:)

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

于 2012-08-01T19:58:51.280 回答
0

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

除此之外，还要确保来自服务器的答案是一个数组而不是一个对象。您当前的 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/

于 2012-08-01T20:01:32.610 回答