Parse JSON Data into HTML

Question

I'm using the Google Feeds API to display the latest posts from my Facebook.

The statues are coming from an XML file from fbrss.com and this code I have below successfully works:

    <script type="text/javascript">
    google.load("feeds", "1")

    $.ajax({
        url      : document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=3&callback=?&q=' + encodeURIComponent('feedhere.xml'),
        dataType : 'json',
        success  : function (data) {
            if (data.responseData.feed && data.responseData.feed.entries) {
                $.each(data.responseData.feed.entries, function (i, e) {
                    console.log("------------------------");
                    console.log("postContent     : " + e.title);
                    console.log("link    : " + e.link);
                    console.log("date:      " + e.publishedDate);

                });
                ;
            }
        }
    });
</script>

The response I get from console, as expected

    postContent     : Example post, just testing our facebook news right now!
link    : https://www.facebook.com/LINKTOPOST
date:      Fri, 04 Apr 2014 23:54:02
------------------------
postContent     : We're getting ready to launch our new website! Stay tuned for more updates and more info. We're very excited.
link    : https://www.facebook.com/LINKTOPOST
date:      Fri, 04 Apr 2014 23:06:59 -0700

Now I've tried appending the jsonData to a div like so, but I don't think I was doing it correctly.

 if (data.responseData.feed && data.responseData.feed.entries) {
                $.each(data.responseData.feed.entries, function (i, e) {
                    window.NewsPost = e.title;
                    console.log("------------------------");
                    console.log("postContent     : " + e.title);
                    console.log("link    : " + e.link);
                    console.log("date:      " + e.publishedDate);

                });
                                }

            $("#facebookrss").append("<div>Test" + NewsPost +"</div>");

        }
    });

I assigned a global variable so I could use it outside of that. But I'm not getting anything inside my #facebookrss div.

I'm trying to have the date and postcontent into seperate divs, with the postcontent being wrapped in the link so they can visit the facebook page.

I also am trying to parse the date as "MM - DD". The Google Feeds API doesn't seem very well fleshed out, but I'm also very new to javascript.

Thanks so much to anyone who can help whatsoever.

EDIT: HAVE SUCCESSFULLY SOLVED IT, THANK YOU CACKHAROT. BELOW IS MY FINAL CODE FITTING INTO FORMATTING AND INCLUDES BETTER FORMATTED DATE.

$.ajax({
        url      : document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=3&callback=?&q=' + encodeURIComponent('feedhere.xml'),
        dataType : 'json',
        success  : function (data) {
            if (data.responseData.feed && data.responseData.feed.entries) {
                $.each(data.responseData.feed.entries, function (i, e) {
                    window.NewsPost = e.title;
                    console.log("------------------------");
                    console.log("postContent     : " + e.title);
                    console.log("link    : " + e.link);
                    console.log("date:      " + e.publishedDate);
                    // construct div tag to have the new post details

                    var date = new Date(e.publishedDate);
                    monthNames =
                        [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ];
                    datemonth = monthNames[ date.getMonth() ];
                    dateday = date.getDay();

                    var construct_news = '<div class="facebook-feed">';
                    construct_news += '<div class="left">';
                    construct_news += '<div class="footer-circle-large">';
                    construct_news +='<div class="month">' + datemonth + '</div>';
                    construct_news += '<div class="day">' + dateday + '</div>';
                    construct_news += '</div>';
                    construct_news += '</div>';
                    construct_news += '<div class="right">';

                    construct_news += '<div>';
                    construct_news += '<span class="facebook-update"><a target="_blank" href="'+ e.link+'">' + e.title + '</a></span>';

                    construct_news += '</div>';
                    construct_news += '</div>';
                    construct_news += '</div>';

                    $("#facebookrss").append(construct_news); // append it to rss div

                });
            }
        }
    });

I've tried storing it into variable then using something such as .html("Test" + postContentVar); — intoxxx
– intoxxx, Commented Apr 7, 2014 at 2:07
So add that code to your question and explain what you expect to see and what you are actually seeing — Phil
– Phil, Commented Apr 7, 2014 at 2:11

cackharot · Accepted Answer · 2014-04-07 06:04:36Z

1

Try this

if (data.responseData.feed && data.responseData.feed.entries) {
    $.each(data.responseData.feed.entries, function (i, e) {
        window.NewsPost = e.title;
        console.log("------------------------");
        console.log("postContent     : " + e.title);
        console.log("link    : " + e.link);
        console.log("date:      " + e.publishedDate);
        // construct div tag to have the new post details

        var new_post_tag = '<div>';
        new_post_tag += '<h4>' + e.title + '</h4>';
        new_post_tag += '<p>' + e.link + '</p>';
        new_post_tag += '<p>' + e.publishedDate + '</p>';
        new_post_tag += '</div>';

        $("#facebookrss").append(new_post_tag); // append it to rss div
    });
}

answered Apr 7, 2014 at 6:04

cackharot

6981 gold badge6 silver badges13 bronze badges

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

3 Comments

intoxxx Over a year ago

You are awesome! what's funny is your approach doesn't seem all too different what I tried. Actually, i put yours in and it didn't work at first. I tried removing a span element from #facebookrss then it was working. Does append only work on empty elements or something?

intoxxx Over a year ago

Also, if I can parse the date into a mm-dd format, do I really need to create an array with month names or does jquery have an easier solution? Thank you so much!

intoxxx Over a year ago

Nevermind, Ifigured that one out myself. I had to edit it a bit for my styling of course. But I have updated the OP with my solution in case anyone needs help on the same thing.

Collectives™ on Stack Overflow

Parse JSON Data into HTML

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related