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ドキュメントのリストの例を試してから、テーブルにしようとします）：

<!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のようなビューが必要です（ハンドルバーでこれを提供できるかもしれません）for person in this_list: <tr>person.name</tr>。

4

2 に答える 2

1

まず、jQuery をトリガーしたことがないか、次のようなものでラップしたことがないため、jQuery は実行されません。

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

こちらをご覧ください: $(document).ready() の紹介

次に、 JSONP を使用しない限り、Javascript を介して別のドメインから JSON をロードすることはできません。参照: jQuery の JSONP Explained with Examples。通常、PHP、.Net、Ruby を使用して JSON をサーバーにロードし、スクリプトで使用できるようにします。

例: PHP JSON オブジェクトでのデータの処理

最後に、javascript/jQuery を使用するとperson.name、オブジェクトまたは配列の構造にすべて依存するような構文を使用できます。

「素敵な」レイアウトに関しては、非常に多くのオプションがあり、ここでそれらを説明することはできません...しかし、そもそもデータをロードすることさえできない場合は、すべてそうではありません! :)

これを説明する古いが、まだ有用なチュートリアルは次のとおりです。

于 2012-08-01T19:58:51.280 に答える
0

ここにはいくつかの問題があります。Justin Jenkins はすでに、最も深刻な 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/

于 2012-08-01T20:01:32.610 に答える