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

我注意到您说您已经尝试过 data[i]。您确定数据与示例中的虚拟数据相同吗？使用 fiddler 或添加一个 console.log(data) 来确定。

于 2012-11-14T20:54:01.667 回答
0

试试这个，用each替换你的for语句并在你的桌子上使用append（）而不是html（），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);
        });


});

这是没有 $.post 逻辑的代码的 jsfiddle，因为我不知道这些变量对于 isearch 等http://jsfiddle.net/94jXh/是什么

如果您想让您的符号更具可读性，请将其用于 htm var 设置

         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 插件会更好，我喜欢 jsrender https://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 回答