0

I have seen lots of responses to how to extract data from wordpress blog posts using the json api plugin. Many uses $.getJSON, $.ajax, .responseData.feed.entries, success function() etc.

What is the correct way to parse JSON API datas from wordpress, post the result to a content div page in a jQuery mobile listview.

I have the following codes but unable to get the intended result:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">

    <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
    Remove this if you use the .htaccess -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <script src="css/style.css"></script>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
    <script src="js/script.js"></script>
</head>
<body>

    <div id="blog" data-role="page">
    <div data-role="header" class="sys_hd" data-position="fixed" data-id="sys_header" >
        <h1>Sysads Posts</h1>
        </div><!-- header -->
        <div data-theme="c" data-role="content" id="postlist"> </div><!-- content -->
        <div data-role="footer" data-position="fixed" data-id="sys_footer" >
                    <div data-role="navbar" >
                <ul>
                    <li><a href="#blog" class="sys_ft">Home</a></li>
                    <li><a href="#blog" class="sys_ft">Disclaimer</a></li>
                </ul>
            </div><!-- navbar --> 
        </div><!-- footer --> 
    </div><!-- page -->
</body>
</html>

.js:

$( document).ready(function (){
    url = 'http://hopexxx.com/category/daily-devotion/feed/' ;
    $.ajax({
        type: "GET",
        url: document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=1000&callback=?&q=' + encodeURIComponent(url),
        dataType: 'json',
        error: function(){
            alert( 'Unable to load feed, Incorrect path or invalid feed' );
        },
        success: function(data ){
            var postlist = data.responseData.feed.entries;
            var html = '<ul data-role="listview" data-filter="true">' ;
            for (var i = 0 ; i < 10 ; i++) {
                var entry = postlist[i];
                html += '<li>';
                html += '<a href="#">';
                html += '<div class="entry">' + entry.title + '</div>' ;
                html += '<div class="entry">' + entry.author + '</div>' ;
                html += '<div class="entry">' + entry.publishedDate + '</div>';
                html += '<div class="entry">' + entry.contentSnippet + '</div>';
                html += '</a>';
                html += '</li>';
            }
            html += '</ul>';
            $( "#postlist" ).append(html);
           $( "#postlist ul[data-role=listview]" ).listview();

        }});
    });

I hope my question is not outside the site rule.

  • I have added the js code. It displays the lists. I need it to display just the posts when I click on each link and also for it to append more posts when a link at the buttom is clicked – Isaac Bassey Sep 25 '13 at 9:44
  • Anyone able to help – Isaac Bassey Sep 25 '13 at 12:35
1

Got this working: Added html += '';

html += '<li>';
html += '<a href="' + entry.link + '">';
html += '<div class="entry">' + entry.title + '</div>' ;
html += '<div class="entry">' + entry.author + '</div>' ;
html += '<div class="entry">' + entry.publishedDate + '</div>';
html += '<div class="entry">' + entry.contentSnippet + '</div>';
html += '</a>';
html += '</li>';
  • Next is to display each post in its own formatted page rather than the link calling the main website with all the widgets – Isaac Bassey Sep 26 '13 at 13:24
  • If you answered your question please mark it as the accepted answer. – DᴀʀᴛʜVᴀᴅᴇʀ Jul 16 '16 at 2:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.