Jump to content

jQuery JSON data loop

Skewled

By Skewled
in Javascript Help

 Share
Go to solution Solved by jazzman1,

Recommended Posts

Skewled Member

Skewled

Posted
Posted

I have the following JSON string of data that I'm trying to loop over:

 

{
  "35": [
    {
      "blog_id": "35",
      "dateposted": "2014-04-10",
      "content": "<p>Wow this is <span style=\"color: #008000;\"><em><span style=\"font-size: 14pt;\"><strong>very nice...<\/strong><\/span><\/em><\/span><\/p>",
      "title": "Thanks",
      "published": "1",
      "login": "admin",
      "img": "public\/img\/blog-image.png",
      "username": "Skewled",
      "comment": "thanks"
    },
    {
      "blog_id": "35",
      "dateposted": "2014-04-10",
      "content": "<p>Wow this is <span style=\"color: #008000;\"><em><span style=\"font-size: 14pt;\"><strong>very nice...<\/strong><\/span><\/em><\/span><\/p>",
      "title": "Thanks",
      "published": "1",
      "login": "admin",
      "img": "public\/img\/blog-image.png",
      "username": "Skewled",
      "comment": "fasdfa asdf asd fasdfasd [b]test[\/b]"
    }
  ],
  "34": [
    {
      "blog_id": "34",
      "dateposted": "2014-04-09",
      "content": "<p><em><strong>sdfasdf asdafsadf<\/strong> asdfasd <\/em> asdfasdf <span style=\"color: #008000;\">asdf asdf asdf asdfsa asfasdfaasdf <span style=\"color: #000000;\">asdfasdf<\/span><\/span><\/p>\n<p><span style=\"color: #008000;\"><span style=\"color: #000000;\">saf asdfasd <strong>fasdfasdf asdfasdf<\/strong> asdf adsfa asdfasdf asdf asdf asdfasdfa sdf asdf<\/span><\/span><\/p>\n<p><span style=\"color: #008000;\"><span style=\"color: #000000;\">sadfs dfasdf asdf asdf asdf<\/span><\/span><\/p>",
      "title": "Launch Party",
      "published": "1",
      "login": "admin",
      "img": "public\/img\/blog-image.png",
      "username": "Skewled",
      "comment": "<p><em><strong>sdfasdf asdafsadf<\/strong> asdfasd <\/em> asdfasdf <span style=\"color: #008000;\">asdf asdf asdf asdfsa asfasdfaasdf <span style=\"color: #000000;\">asdfasdf<\/span><\/span><\/p>\n<p><span style=\"color: #008000;\"><span style=\"color: #000000;\">saf asdfasd <strong>fasdfasdf asdfasdf<\/strong> asdf adsfa asdfasdf asdf asdf asdfasdfa sdf asdf<\/span><\/span><\/p>\n<p><span style=\"color: #008000;\"><span style=\"color: #000000;\">sadfs dfasdf asdf asdf asdf<\/span><\/span><\/p>"
    },
    {
      "blog_id": "34",
      "dateposted": "2014-04-09",
      "content": "<p><em><strong>sdfasdf asdafsadf<\/strong> asdfasd <\/em> asdfasdf <span style=\"color: #008000;\">asdf asdf asdf asdfsa asfasdfaasdf <span style=\"color: #000000;\">asdfasdf<\/span><\/span><\/p>\n<p><span style=\"color: #008000;\"><span style=\"color: #000000;\">saf asdfasd <strong>fasdfasdf asdfasdf<\/strong> asdf adsfa asdfasdf asdf asdf asdfasdfa sdf asdf<\/span><\/span><\/p>\n<p><span style=\"color: #008000;\"><span style=\"color: #000000;\">sadfs dfasdf asdf asdf asdf<\/span><\/span><\/p>",
      "title": "Launch Party",
      "published": "1",
      "login": "admin",
      "img": "public\/img\/blog-image.png",
      "username": "Skewled",
      "comment": "<p><em><strong>sdfasdf asdafsadf<\/strong> asdfasd <\/em> asdfasdf <span style=\"color: #008000;\">asdf asdf asdf asdfsa asfasdfaasdf <span style=\"color: #000000;\">asdfasdf<\/span><\/span><\/p>\n<p><span style=\"color: #008000;\"><span style=\"color: #000000;\">saf asdfasd <strong>fasdfasdf asdfasdf<\/strong> asdf adsfa asdfasdf asdf asdf asdfasdfa sdf asdf<\/span><\/span><\/p>\n<p><span style=\"color: #008000;\"><span style=\"color: #000000;\">sadfs dfasdf asdf asdf asdf<\/span><\/span><\/p>"
    }
  ]
}

I have the following loop but since the data change to a multidimensional setup I've gotten a bit lost, so if anyone would be willing to walk me through the process so I can learn I'd really appreciate it.

 


The is my api call to grab the data above:

    var load_blog = function() {
        $.get('api/get_blog', function(o) {
            
            var output = '';         
                    
            for (var i = 0; i < o.length; i++) {
                output += Template.blog(o[i]);
            } 
            
            $("#list_blog").html(output);  
        }, 'json');


    };

I then have the HTML template separate from the code here:


    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.login + '</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.blog_id +'"></div>';
        output += '<div class="hide" id="blog_comment_' + obj.blog_id + '">' + obj.comment + '</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;
    };

I'm not sure how to change my template to work with the new object data.

 

Thanks!

Link to comment
https://forums.phpfreaks.com/topic/287722-jquery-json-data-loop/
Share on other sites
denno020 Regular Member

denno020

Posted
Posted (edited)

Personally, I would use $.each() to loop through your output.

 

Here is the code which will work:

$.each(jsonData, function() { //Loop through each blog_id section
    $.each(this, function(){ //Loop through each comment in this blog_id
      output += Template.blog(this); //output the current comment
    });
});

example: http://jsfiddle.net/A3r7H/

Hope that helps

Denno

Edited by denno020
Skewled Member

Skewled

Posted
  • Author
Posted

Denno,

 

 Thank you for your reply, I've been doing some reading about $(each) and it functions like a for loop. I know I need to come up with a method of storing the first blog_id and then during each iteration store the value so that on the next iteration it skips over the data but I can't figure out how to put it into code. I've been playing with the jfiddle and reading around on google, lot's of helpful information but I haven't found anything with filtering the data or iterating over the data. I blame my poor search skills lol.

 

 Currently it outputs:

 Blog Post Two

 Blog Post Two Comment

 Blog Post Two

 Blog Post Two Comment

Here is the jsfiddle: http://jsfiddle.net/66c8z/1/, in this it actually shows the data somewhat correctly but just has the duplicates.

 

Updated Function:

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

 

 

 

  • Solution
jazzman1 Member

jazzman1

Posted
  • Solution
Posted

Try,

<html>
    <head>
        <title>Json Object</title>
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                var testInfo = ''; // define a testInfo variable
                var data = {
                    "35": [
                        {
                            "blog_id": "35",
                            "dateposted": "2014-04-10",
                            "content": "<p>Wow this is <span style=\"color: #008000;\"><em><span style=\"font-size: 14pt;\"><strong>very nice...<\/strong><\/span><\/em><\/span><\/p>",
                            "title": "Thanks",
                            "published": "1",
                            "login": "admin",
                            "img": "public\/img\/blog-image.png",
                            "username": "Skewled",
                            "comment": "thanks"
                        },
                        {
                            "blog_id": "35",
                            "dateposted": "2014-04-10",
                            "content": "<p>Wow this is <span style=\"color: #008000;\"><em><span style=\"font-size: 14pt;\"><strong>very nice...<\/strong><\/span><\/em><\/span><\/p>",
                            "title": "Thanks",
                            "published": "1",
                            "login": "admin",
                            "img": "public\/img\/blog-image.png",
                            "username": "Skewled",
                            "comment": "fasdfa asdf asd fasdfasd [b]test[\/b]"
                        }
                    ],
                    "34": [
                        {
                            "blog_id": "34",
                            "dateposted": "2014-04-09",
                            "content": "<p><em><strong>sdfasdf asdafsadf<\/strong> asdfasd <\/em> asdfasdf <span style=\"color: #008000;\">asdf asdf asdf asdfsa asfasdfaasdf <span style=\"color: #000000;\">asdfasdf<\/span><\/span><\/p>\n<p><span style=\"color: #008000;\"><span style=\"color: #000000;\">saf asdfasd <strong>fasdfasdf asdfasdf<\/strong> asdf adsfa asdfasdf asdf asdf asdfasdfa sdf asdf<\/span><\/span><\/p>\n<p><span style=\"color: #008000;\"><span style=\"color: #000000;\">sadfs dfasdf asdf asdf asdf<\/span><\/span><\/p>",
                            "title": "Launch Party",
                            "published": "1",
                            "login": "admin",
                            "img": "public\/img\/blog-image.png",
                            "username": "Skewled",
                            "comment": "<p><em><strong>sdfasdf asdafsadf<\/strong> asdfasd <\/em> asdfasdf <span style=\"color: #008000;\">asdf asdf asdf asdfsa asfasdfaasdf <span style=\"color: #000000;\">asdfasdf<\/span><\/span><\/p>\n<p><span style=\"color: #008000;\"><span style=\"color: #000000;\">saf asdfasd <strong>fasdfasdf asdfasdf<\/strong> asdf adsfa asdfasdf asdf asdf asdfasdfa sdf asdf<\/span><\/span><\/p>\n<p><span style=\"color: #008000;\"><span style=\"color: #000000;\">sadfs dfasdf asdf asdf asdf<\/span><\/span><\/p>"
                        },
                        {
                            "blog_id": "34",
                            "dateposted": "2014-04-09",
                            "content": "<p><em><strong>sdfasdf asdafsadf<\/strong> asdfasd <\/em> asdfasdf <span style=\"color: #008000;\">asdf asdf asdf asdfsa asfasdfaasdf <span style=\"color: #000000;\">asdfasdf<\/span><\/span><\/p>\n<p><span style=\"color: #008000;\"><span style=\"color: #000000;\">saf asdfasd <strong>fasdfasdf asdfasdf<\/strong> asdf adsfa asdfasdf asdf asdf asdfasdfa sdf asdf<\/span><\/span><\/p>\n<p><span style=\"color: #008000;\"><span style=\"color: #000000;\">sadfs dfasdf asdf asdf asdf<\/span><\/span><\/p>",
                            "title": "Launch Party",
                            "published": "1",
                            "login": "admin",
                            "img": "public\/img\/blog-image.png",
                            "username": "Skewled",
                            "comment": "<p><em><strong>sdfasdf asdafsadf<\/strong> asdfasd <\/em> asdfasdf <span style=\"color: #008000;\">asdf asdf asdf asdfsa asfasdfaasdf <span style=\"color: #000000;\">asdfasdf<\/span><\/span><\/p>\n<p><span style=\"color: #008000;\"><span style=\"color: #000000;\">saf asdfasd <strong>fasdfasdf asdfasdf<\/strong> asdf adsfa asdfasdf asdf asdf asdfasdfa sdf asdf<\/span><\/span><\/p>\n<p><span style=\"color: #008000;\"><span style=\"color: #000000;\">sadfs dfasdf asdf asdf asdf<\/span><\/span><\/p>"
                        }
                    ]
                }
                $.each(data, function(blogObjects, blogObject) {
                    $.each(blogObject, function(blog, blogInfo) {
                       // console.log(blogInfo.content);
                        testInfo += 'Blog ID: ' + blogInfo.blog_id + '<br>'
                        testInfo += 'Dateposted: ' + blogInfo.dateposted + '<br>'
                        testInfo += 'Content: ' + blogInfo.content + '<br>'
                        testInfo += 'Title: ' + blogInfo.title + '<br>'
                        testInfo += 'Published: ' + blogInfo.published + '<br>'
                        testInfo += 'Login: ' + blogInfo.login + '<br>'
                        testInfo += 'Image: ' + blogInfo.img + '<br>'
                        testInfo += 'Username: ' + blogInfo.username + '<br>'
                        testInfo += 'Comment: ' + blogInfo.comment + '<br>'
                    });
                }); //end of each construct
                $('#test').html(testInfo); // write down the info to html document
            });

        </script>
    </head>
    <body>
        <div id="test"></div>
    </body>
</html>
Skewled Member

Skewled

Posted
  • Author
Posted

Output:

Blog ID: 36
Dateposted: 2014-04-13
Content:
blog article one

Title: blog post one
Published: 1
Login: admin
Image: public/img/blog-image.png
Username: Gaddam
Comment: blog post one comment
Blog ID: 36
Dateposted: 2014-04-13
Content:
blog article one

Title: blog post one
Published: 1
Login: admin
Image: public/img/blog-image.png
Username: Gaddam
Comment: blog post one comment
Blog ID: 37
Dateposted: 2014-04-13
Content:
blog article two

Title: blog post two
Published: 1
Login: admin
Image: public/img/blog-image.png
Username: Skewled
Comment: blog two comment
Blog ID: 37
Dateposted: 2014-04-13
Content:
blog article two

Title: blog post two
Published: 1
Login: admin
Image: public/img/blog-image.png
Username: Skewled
Comment: blog two comment
Skewled Member

Skewled

Posted
  • Author
Posted (edited)

The extra post:

 

(First Post of the Blog)
Title: blog post one
Image: public/img/blog-image.png
Dateposted: 2014-04-13
Content:
blog article one

(Comment Stays)
Login: admin
Username: Gaddam
Comment: blog post one comment

(Filter this out because only needs to be displayed once)
Title: blog post one
Image: public/img/blog-image.png
Dateposted: 2014-04-13
Content:
blog article one

 

(Comment Stays)
Login: admin
Username: Gaddam
Comment: blog post one comment

 

 

I'm trying to filter out the need to repost the title, image, dateposted, and content for each comment.

Edited by Skewled
Skewled Member

Skewled

Posted
  • Author
Posted (edited)

Yes I know what I want to achive, one blog post with the comments under each post. All of the trouble started with MySQL returning multiple rows because of the JOIN, the php array was rebuilt but it needs to filter the array more. 

 

Thank you for all the help!!

 

Marked Solved because the jQuery was correct to achieve the desire results with the JSON data passed to the function, the PHP array needs to be re-factored to compile the JSON data better.

Edited by Skewled
denno020 Regular Member

denno020

Posted
Posted

I know this has been marked as solved, but just wanted to add that you don't have to go back to PHP and edit your data to get the behaviour you want.

You could just do something like this:

 

$.each(jsonData, function() {
  var titlePrinted = false;
    $.each(this, function(){
      if (!titlePrinted) {
        //add the title
        titlePrinted = true;
      }
      //add the rest of the comment
    });
});
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.