php - 为 jQuery 显示正确格式化数组

Question

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

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

我感谢所有的评论，我可能不知道你问的所有问题，所以请耐心等待我，我很慢。 (:

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

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

博客 View 模板:

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;
};

Answer 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;
    };