Properly format array for jQuery display

Question

I'm currently working on a blog type page with a comment area, this is a personal learning adventure and I would appreciate detailed explanations to solidify the learning. I currently have everything structured in an MVC pattern for PHP using CodeIgniter, and my JavaScript code is also formatted in a similar fashion.

EDIT: I've added the output of the array from the build_array() function from PHP. I feel that is the root cause of my issue, if I could rework the array to not feed each comment the entire blog data it would allow me to achieve what I desire.

I appreciate all of the comments and I may not know all that you ask so please be patient with me, I'm slow. (:

I can't figure out how to get the data to be displayed properly, currently it outputs:

Blog Post Two
Blog Post Two Comment

Blog Post Two
Blog Post Two Comment

It is ignoring the first blog post and I need it to not post duplicates and post each blog post.

The code for the 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);

Build array function:

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;

Returns the following Array:

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

Original Array returned from 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 String:

{"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"}]}

jQuery Function to get work with the JSON string:

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

Template for Blog 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;
};

It looks like your JSON response contains PKs 37 and 36 (posts two and one respectively) so perhaps the issue is in your jQuery? Perhaps add some alert statements here to check that it is reading the data correctly? — halfer
– halfer, Commented Apr 13, 2014 at 22:24
@halfer Thank you for the edit, I've added alerts to the function and it gives me the object information so it's passing the object fine. — Skewled
– Skewled, Commented Apr 13, 2014 at 23:35
Since your JSON response contains both blog posts, it's safe to assume your PHP code is working fine and that the issue is in your jQuery parsing of the data. I would suggest you console.log all the variables you expect to change in the loop to determine the cause — shrmn
– shrmn, Commented Apr 14, 2014 at 0:25
@shrmn please see the updated EDIT, thanks guys I appreciate the assistance. — Skewled
– Skewled, Commented Apr 14, 2014 at 2:43
Oh okay now it's clearer what the issue is. Give me a moment — shrmn
– shrmn, Commented Apr 14, 2014 at 2:55

shrmn · Accepted Answer · 2014-04-14 15:03:03Z

1

Typing everything in a phone is not cool lol give this a try:

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

answered Apr 14, 2014 at 15:03

shrmn

1,53314 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Skewled Over a year ago

This is on track here, it's looping the first comment under each blog for the number of comments in the database, but it's not changing the the data on each iteration, and that's really good for a phone! Also the comment_toggle is just a link that when clicked displays the comments, it just shows or hides the comment div.

shrmn Over a year ago

Alright, what else needs to be done? What do you mean its not changing the data on each iteration? Please note its .append not .html in the first chunk of code

Skewled Over a year ago

I just noticed the .append, which was ok because I made the alterations based on your post. When the loop is performed it is looping the first comment for the number of comments each blog has, it's not changing the data for the comment. It skips the first comment and post the second comment repeatedly for the total number of comments for the blog_id.

shrmn Over a year ago

Can't seem to determine the cause. You should make the comments unique so you can clearly identify which comment is being printed. In the php array and json output they both show that each blog post has 2 identical comments

Skewled Over a year ago

I see what you mean, I updated the main post with a new string that changes the values to make it readable.

|

Vincent Decaux · Accepted Answer · 2014-04-13 06:17:09Z

0

You can just use in your model :

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

And in your JS, without changes in anything :

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

I don't know why you put obj[i].title[i] in your template function, cause you call this function with an entry, not an array.

answered Apr 13, 2014 at 6:17

Vincent Decaux

10.9k7 gold badges67 silver badges103 bronze badges

1 Comment

Skewled Over a year ago

I truncated the function to the relevant part. I actually was messing with the template to see if it functioned with indexes and I forgot to remove them, they were not suppose to remain.. I will fix that sorry.

Collectives™ on Stack Overflow

Properly format array for jQuery display

2 Answers 2

7 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related