Jquery 将数据从json数组获取到表中

我正在尝试为我公司的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);
    });

$.post（“链接”，{问题：isearch，可用性：asearch，类型：tsearch}，函数（数据）{
var htm=“”
控制台日志（数据）；
对于（var i=0；idata.getJSONObject不是函数。您只需将其更改为
data[i]


我注意到您说您已经尝试了数据[I]。您确定数据与示例中的虚拟数据相同吗？请使用fiddler或添加console.log（data）来确定。试试这个，用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);
        });


});

$（文档）.ready（函数（）{
var数据=[{“articleID”：“7298”，“title”：“inbrief”，“issueDate”：“2012年7月”}，{“articleID”：“7299”，“title”：“inbrief”，“issueDate”：“2012年7月”}，{“articleID”：“7201”，“title”：“inbrief”，“issueDate”：“2012年7月”}；
$。每个（数据、函数（键、值）{
htm=''；
htm+=''+数据[键]。标题+''；
htm+=''+数据[键].issueDate+''；
htm+=''；
htm+=''；
htm+=''；
htm+=''；
$（'.cms'）.append（htm）；
});
});

这里是没有$.post逻辑的JSFIDLE代码，因为我不知道isearch ect的那些变量是什么

如果您想使您的符号更具可读性，请将其分为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>';

htm=''；
htm+=''+键.标题+''；
htm+=''+密钥.issueDate+''；
htm+=''；
htm+=''；
htm+=''；
htm+=''；

不过，我同意，使用模板jquery插件会更好，我喜欢jsrender
为了提高效率，我建议如下：

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(''));
});

var articleTemplate='%2%3'；//非正式模板
$.post（“链接”，{问题：isearch，可用性：asearch，类型：tsearch}，函数（数据）{
var htm=$.map（数据、函数（a、i）{
返回articleTemplate.replace（/%1/g，a.articleID）。replace（“%2”，a.title）。replace（“%3”，a.issueDate）；
});
$（'.cms'）.html（htm.join（''））；
});

这样可以最大限度地减少构建
htm
过程中涉及的部分字符串的数量，从而减少客户端内存的负载，并减少垃圾收集的工作量

如果你做了很多其他模板，那么考虑一些胡子或把手，否则上面的非正式方法是很好的（而且非常有效）。 GojjSunObjor不是你的虚拟数据中的函数……考虑一个模板（例如，把手）做<代码>控制台。日志（数据）；< /Cord>给你一个字符串或一个数组。数据[I]似乎让我进入了数组，但有两个问题。1）它显示所有内容的“未定义”2）数据。长度返回3238。实际上应该是30耶左右。数据给出每个字符，所以数据[i]从数据中返回单个字符。因此，出于某种原因，它是字符串而不是数组？好的，我们已经设置好了，我还需要data=JSON.parse（data）；感谢您的帮助
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(''));
});