为 jQuery 显示正确格式化数组答案

【问题标题】：Properly format array for jQuery display为 jQuery 显示正确格式化数组
【发布时间】：2014-05-27 03:30:31
【问题描述】：

我目前正在开发一个带有评论区的博客类型页面，这是一次个人学习冒险，我希望能得到详细的解释以巩固学习。我目前使用 CodeIgniter 为 PHP 构建了 MVC 模式的所有内容，并且我的 JavaScript 代码也以类似的方式格式化。

编辑：我已经从 PHP 的 build_array() 函数中添加了数组的输出。我觉得这是我的问题的根本原因，如果我可以重新设计数组以不将整个博客数据提供给每个评论，它将允许我实现我想要的。

我很感激所有的 cmets，我可能不知道你问的所有问题，所以请耐心等待我，我很慢。（：

我不知道如何让数据正确显示，目前它输出：

Blog Post Two
Blog Post Two Comment

Blog Post Two
Blog Post Two Comment

它忽略了第一篇博文，我需要它不要重复发布并发布每篇博文。

api/get_blog() 的代码：

$query = $this->db->query(
                "SELECT blog.blog_id, blog.dateposted, blog.content, blog.title, blog.published,
                    user.login, user.img,
                    bc.username, bc.comment
                    FROM blog
                    JOIN user
                      ON blog.user_id = user.user_id
                    LEFT JOIN blog_comments bc
                      ON blog.blog_id = bc.blog_id
                    WHERE blog.published = 1
                    ORDER BY blog.blog_id DESC
                    ");

            $data = $query->result_array();

            $result = $this->build_array($data);

构建数组函数：

foreach ($data as $row) {
        if (!isset($outputArr[$row['blog_id']])) {
          $outputArr[$row['blog_id']] = array();
        }
    $outputArr[$row['blog_id']][] = $row;
}

if(!empty($outputArr)) {
    $result = $outputArr;
}
return $result;

返回以下数组：

<pre>Array
(
    [37] => Array
        (
            [0] => Array
                (
                    [blog_id] => 37
                    [dateposted] => 2014-04-13
                    [content] => <p>blog article two</p>
                    [title] => blog post two
                    [published] => 1
                    [login] => admin
                    [img] => public/img/blog-image.png
                    [username] => Skewled
                    [comment] => blog two comment
                )

            [1] => Array
                (
                    [blog_id] => 37
                    [dateposted] => 2014-04-13
                    [content] => <p>blog article two</p>
                    [title] => blog post two
                    [published] => 1
                    [login] => admin
                    [img] => public/img/blog-image.png
                    [username] => Skewled
                    [comment] => blog two comment
                )

        )

    [36] => Array
        (
            [0] => Array
                (
                    [blog_id] => 36
                    [dateposted] => 2014-04-13
                    [content] => <p>blog article one</p>
                    [title] => blog post one
                    [published] => 1
                    [login] => admin
                    [img] => public/img/blog-image.png
                    [username] => Gaddam
                    [comment] => blog post one comment
                )

            [1] => Array
                (
                    [blog_id] => 36
                    [dateposted] => 2014-04-13
                    [content] => <p>blog article one</p>
                    [title] => blog post one
                    [published] => 1
                    [login] => admin
                    [img] => public/img/blog-image.png
                    [username] => Gaddam
                    [comment] => blog post one comment
                )

        )

)
</pre>

从 MySQL 返回的原始数组：

<pre>Array
(
    [0] => Array
        (
            [blog_id] => 37
            [dateposted] => 2014-04-13
            [content] => <p>blog article two</p>
            [title] => blog post two
            [published] => 1
            [login] => admin
            [img] => public/img/blog-image.png
            [username] => Skewled
            [comment] => blog two comment
        )

    [1] => Array
        (
            [blog_id] => 37
            [dateposted] => 2014-04-13
            [content] => <p>blog article two</p>
            [title] => blog post two
            [published] => 1
            [login] => admin
            [img] => public/img/blog-image.png
            [username] => Skewled
            [comment] => blog two comment
        )

    [2] => Array
        (
            [blog_id] => 36
            [dateposted] => 2014-04-13
            [content] => <p>blog article one</p>
            [title] => blog post one
            [published] => 1
            [login] => admin
            [img] => public/img/blog-image.png
            [username] => Gaddam
            [comment] => blog post one comment
        )

    [3] => Array
        (
            [blog_id] => 36
            [dateposted] => 2014-04-13
            [content] => <p>blog article one</p>
            [title] => blog post one
            [published] => 1
            [login] => admin
            [img] => public/img/blog-image.png
            [username] => Gaddam
            [comment] => blog post one comment
        )

)
</pre>

JSON 字符串：

{"37":[{"blog_id":"37","dateposted":"2014-04-13","content":"<p>blog article two<\/p>","title":"blog post two","published":"1","login":"admin","img":"public\/img\/blog-image.png","username":"Tom","comment":"blog post 2 comment 1"},{"blog_id":"37","dateposted":"2014-04-13","content":"<p>blog article two<\/p>","title":"blog post two","published":"1","login":"admin","img":"public\/img\/blog-image.png","username":"Frank","comment":"blog post 2 comment 2"},{"blog_id":"37","dateposted":"2014-04-13","content":"<p>blog article two<\/p>","title":"blog post two","published":"1","login":"admin","img":"public\/img\/blog-image.png","username":"Joey","comment":"blog post 2 comment 3"}],"36":[{"blog_id":"36","dateposted":"2014-04-13","content":"<p>blog article one<\/p>","title":"blog post one","published":"1","login":"admin","img":"public\/img\/blog-image.png","username":"Ted","comment":"blog one comment number one"},{"blog_id":"36","dateposted":"2014-04-13","content":"<p>blog article one<\/p>","title":"blog post one","published":"1","login":"admin","img":"public\/img\/blog-image.png","username":"John","comment":"blog one comment two"},{"blog_id":"36","dateposted":"2014-04-13","content":"<p>blog article one<\/p>","title":"blog post one","published":"1","login":"admin","img":"public\/img\/blog-image.png","username":"Bill","comment":"blog one comment three"}]}

使用 JSON 字符串的 jQuery 函数：

var load_blog = function() {
    $.getJSON('api/get_blog', function(data) {
       $.each(data, function() { //Loop through each blog_id section
            var output = '';
                $.each(this, function(){ //Loop through each comment in this blog_id
                    output += Template.blog(this); //output the template
                }); 
            $("#list_blog").html(output);
        });
    });  
};

博客视图模板：

this.blog = function(obj) {
    var output = '';
    output += '<div class="blog-post" style="margin: 5px;">';
    output += '<h2 class="blog-post-title">';
    output += obj.title + '</h2>';
    output += '<p class="blog-post-meta">';
    output += '<img src="' + obj.img +'">' + ' ' + obj.dateposted + ' by ' + obj[i].login[i] + '</p>';
    output += '<p>' + obj.content + '</p>';
    output += '</div>';
    output += '<span class="options">';
    output += '<a class ="blog_update_display" data-id="' + obj.blog_id + '" href="#"><i class="glyphicon glyphicon-pencil"></i></a> Leave Comment ';
    output += '<div class="blog_comment_container" id="blog_comment_container_'+ obj[i].blog_id[i] +'"></div>';
    output += '<div class="hide" id="blog_comment_' + obj.blog_id + '">' + obj[i].comment[i] + '</div>';
    output += '</span>';
    output += '<hr>';
    output += '<span><a class="comment_toggle" data-id="'+ obj.blog_id +'" id="blog_title_' + obj.blog_id + '" href="#">View Comments</a></span> ';
    output += '<div class="hide" id="blog_comment_block_' + obj.blog_id + '">';
    output += '<hr>';
    if (obj.username) {
    output += '<h5 class="users">' + obj.username + ' commented:</h5>';
    output += '<p>' + obj.comment + '</p>';
    } else {
        output += '<p>Be the first to comment!</p>';
    }
    output += '</div>';
    output += '<hr>';
    output += '</div>';
    return output;
};

【问题讨论】：

看起来您的 JSON 响应包含 PKs 37 和 36（分别发布两个和一个），所以问题可能出在您的 jQuery 上？也许在这里添加一些alert 语句来检查它是否正确读取数据？
@halfer 感谢您的编辑，我已经向函数添加了警报，它为我提供了对象信息，因此它可以很好地传递对象。
由于您的 JSON 响应包含两篇博客文章，因此可以安全地假设您的 PHP 代码工作正常并且问题出在您的 jQuery 数据解析中。我建议你 console.log 所有你希望在循环中改变的变量来确定原因
@shrmn 请查看更新后的编辑，谢谢大家，感谢您的帮助。
哦，好吧，现在问题更清楚了。给我一点时间

标签： php jquery mysql arrays codeigniter

【解决方案1】：

在手机中输入所有内容并不酷，请尝试一下：

    var load_blog = function() {
        $.getJSON('api/get_blog', function(data) { 
            $.each(data, function() { 
                //Loop through each blog_id
                $("#list_blog").append( Template.blog(this) ); 
            });
        }); 
    };

    this.blog = function(obj) { 
        var output = '';
        output += '<div class="blog-post" style="margin: 5px;">'; 
        output += '<h2 class="blog-post-title">'; 
        output += obj[0].title + '</h2>'; 
        output += '<p class="blog-post-meta">'; 
        output += '<img src="' + obj[0].img +'">' + ' ' + obj[0].dateposted + ' by ' + obj[0].login + '</p>'; 
        output += '<p>' + obj[0].content + '</p>'; 
        output += '</div>';

        // COMMENTING
        output += '<span class="options">';
        output += '<a class ="blog_update_display" data-id="' + obj[0].blog_id + '" href="#"><i class="glyphicon glyphicon-pencil"></i></a> Leave Comment '; 
        output += '<div class="blog_comment_container" id="blog_comment_container_'+ obj[0].blog_id +'"></div>'; 
        output += '</span>';

        // LOOP THROUGH COMMENTS
        for(var i=0;i < obj.length;i++) {
        output += '<div class="hide" id="blog_comment_' + obj[i].blog_id + '">' + obj[i].comment + '</div>';
        output += '<hr>';

        }

    /* NO IDEA WHAT BELOW DOES 
        output += '<span><a class="comment_toggle" data-id="'+ obj[0].blog_id +'" id="blog_title_' + obj[0].blog_id + '" href="#">View Comments</a></span> ';
        output += '<div class="hide" id="blog_comment_block_' + obj[0].blog_id + '">';
        output += '<hr>';
        if (obj[0].username) { 
        output += '<h5 class="users">' + obj[0].username + ' commented:</h5>';
        output += '<p>' + obj[0].comment + '</p>'; 
        } else { 
        output += '<p>Be the first to comment!</p>'; 
        } 
        output += '</div>'; 
        output += '<hr>';
        output += '</div>';
    */
        return output;
    };

【讨论】：

这是正常的，它循环每个博客下的第一条评论以获取数据库中的 cmets 数量，但它不会更改每次迭代的数据，这对手机来说真的很好！此外，comment_toggle 只是一个链接，单击该链接会显示 cmets，它只会显示或隐藏评论 div。
好的，还有什么需要做的？你是什么意思它不改变每次迭代的数据？请注意它的 .append 不是 .html 在第一块代码
我刚刚注意到.append，这没关系，因为我根据您的帖子进行了更改。执行循环时，它会循环每个博客拥有的 cmets 数量的第一条评论，它不会更改评论的数据。对于 blog_id 的 cmets 总数，它会跳过第一条评论并重复发布第二条评论。
似乎无法确定原因。您应该使 cmets 独一无二，以便您可以清楚地识别正在打印的注释。在 php 数组和 json 输出中，它们都显示每篇博文都有 2 个相同的 cmets
我明白你的意思，我用一个新字符串更新了主帖子，该字符串更改了值以使其可读。

【解决方案2】：

你可以在你的模型中使用：

return json_encode($query->result());

在你的 JS 中，没有任何改变：

output += obj.title + '</h2>';

我不知道您为什么将 obj[i].title[i] 放在模板函数中，因为您使用条目而不是数组调用此函数。

【讨论】：

我将函数截断到相关部分。我实际上是在弄乱模板，看看它是否与索引一起工作，我忘了删除它们，它们不应该保留..对不起，我会解决这个问题。