0

会社のCMS記事リストのフィルター検索を作成しようとしています。返されるJSONデータをhtmlテーブルのデータに変換する方法がわかりません。ただし、これまでにこれを行ったことがなく、データを反復処理する方法がわかりません。

ダミーの出力データを次に示します。

[{"articleID":"7298","title":"inbrief","issueDate":"July 2012"},{"articleID":"7299","title":"inbrief","issueDate":"July 2012"},{"articleID":"7300","title":"inbrief","issueDate":"July 2012"},{"articleID":"7301","title":"inbrief","issueDate":"July 2012"}]

関連するJSコードは次のとおりです。

$.post("link",  { issue: isearch, availability: asearch, type: tsearch }, function(data) {
        var htm =''
        console.log(data);
        for(var i=0; i<data.length; i++)
        {
            jason = data.getJSONObject(i);
            articleID = jason.articleID;
            title = jason.title;
            issueDate = jason.issueDate;
            htm += '<tr id="news'+articleID+'">'
                +   '<td>'+title+'</td>'
                +   '<td>'+issueDate+'</td>'
                +   '<td><a href="cms/index/addnews/news/'+articleID+'">make top news</a></td>'
                +   '<td><a href="link">view</a></td>'
                +   '<td><a href="cms/news/updatenews/'+articleID+'">update</a></td><td><a href="" class="delete" id="'+articleID+'">delete</a></td>'
                +   '</tr>';
        }
        $('.cms').html(htm);
    });

data [i] .articleIDを使用してこれを実行しようとしましたが、それも機能しませんでした。

4

3 に答える 3

2

data.getJSONObject は関数ではありません。それを次のように変更するだけです。data[i]

http://jsfiddle.net/A3Srb/

EDIT

あなたはすでにデータを試していると言っていました[i]。データがあなたの例にあるダミーデータと同じであると確信していますか? フィドラーを使用するか、console.log(data) を追加して確認してください。

于 2012-11-14T20:54:01.667 に答える
0

これを試して、forステートメントをeachに置き換え、テーブルでhtml（）ではなくappend（）を使用すると、html（）は毎回それをクリアします

 $(document).ready(function() {
 var data = [{"articleID":"7298","title":"inbrief","issueDate":"July 2012"},{"articleID":"7299","title":"inbrief","issueDate":"July 2012"},{"articleID":"7300","title":"inbrief","issueDate":"July 2012"},{"articleID":"7301","title":"inbrief","issueDate":"July 2012"}];

    $.each(data, function(key, value){

         htm = '<tr id="news'+data[key].articleID+'">';
            htm+=   '<td>'+data[key].title+'</td>';
            htm+=   '<td>'+data[key].issueDate+'</td>';
            htm+=  '<td><a href="cms/index/addnews/news/'+data[key].articleID+'">make top news</a></td>';
            htm+=   '<td><a href="link">view</a></td>';
            htm+= '<td><a href="cms/news/updatenews/'+data[key].articleID+'">update</a></td><td><a href="" class="delete" id="'+data[key].articleID+'">delete</a></td>';
            htm+=   '</tr>';
            $('.cms').append(htm);
        });


});

これらの変数がisearchecthttp : //jsfiddle.net/94jXh/で何であるかわからなかったため、$。postロジックを含まないコードのjsfiddleを次に示します。

表記を読みやすくしたい場合は、これをhtmvar設定にサブインします。

         htm = '<tr id="news'+key.articleID+'">';
            htm+=   '<td>'+key.title+'</td>';
            htm+=   '<td>'+key.issueDate+'</td>';
            htm+=  '<td><a href="cms/index/addnews/news/'+key.articleID+'">make top news</a></td>';
            htm+=   '<td><a href="link">view</a></td>';
            htm+= '<td><a href="cms/news/updatenews/'+key.articleID+'">update</a></td><td><a href="" class="delete" id="'+key.articleID+'">delete</a></td>';
            htm+=   '</tr>';

ただし、 https ：//stackoverflow.com/users/425275/ime-vidasに同意します。テンプレートを使用すると、jqueryプラグインの方がうまく機能します。jsrenderhttps：//github.com/BorisMoore/jsrenderが好きです。

于 2012-11-14T21:11:04.773 に答える
0

効率のために、次のようなものをお勧めします。

var articleTemplate = '<tr id="news%1"><td>%2</td><td>%3</td><td><a href="cms/index/addnews/news/%1">make top news</a></td><td><a href="link">view</a></td><td><a href="cms/news/updatenews/%1">update</a></td><td><a href="" class="delete" id="%1">delete</a></td></tr>';//informal template

$.post("link",  { issue: isearch, availability: asearch, type: tsearch }, function(data) {
    var htm = $.map(data, function(a, i) {
        return articleTemplate.replace(/%1/g, a.articleID).replace('%2', a.title).replace('%3', a.issueDate);
    });
    $('.cms').html(htm.join(''));
});

これにより、構築に含まれる部分的な文字列の数が最小限に抑えられるためhtm、クライアント メモリの負荷が軽減され、ガベージ コレクションの作業が軽減されます。

他の多くのテンプレートを作成する場合は、Mustache や Handlebars などを検討してください。それ以外の場合は、上記の非公式のアプローチで問題ありません (そして非常に効率的です)。

于 2012-11-14T21:18:04.837 に答える