Question

我正在尝试为我公司的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这样做，但这对我来说也不起作用。

Answer 1

data.getJSONObject不是函数。您只需将其更改为data[i]

即可

http://jsfiddle.net/A3Srb/

EDIT

我注意到你说你已经尝试了数据[i]。您确定数据与示例中的虚拟数据相同吗？使用fiddler或添加console.log（数据）以确定。

Answer 2

试试这个，用你的每个替换你的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 setting

         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

Answer 3

为了提高效率，我建议这样的事情：

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这样的东西，否则上面的非正式方法很好（并且效率很高）。

将数据从json数组转换为表

3 个答案: