Append more Data into existing Data

Question

I was hoping not to ask this question yet since I decided to read more and do more research but at the moment I am not getting much far with it.

This is my code:

function listPosts(data) {
    var $count = data.count;
    var limitposts = 5;
    var $output = $('<ul class="posts" data-role="listview" data-filter="true">')
    $.each(data.posts,function(i, val) {
        console.log(i);
        if (i<limitposts && i>=0) {
    var $post = $('<li/>').append([$("<h3>", {html: val.title}),$("<p>", {html: val.excerpt})]).wrapInner('<a href="#devotionpost" onclick="showPost(' + val.id + ')"></a>');
    $output.append($post).appendTo('#postlist');
        i++;
   // return (i !== 4);
}});

}

HTML

<!-- Page: home -->
    <div id="home" data-role="page" data-theme="d" data-title="My first App">
        <div data-role="listview">
            <a href="#devotion" id="devotionclick" data-role="button">Display Messages</a>
        </div><!-- links -->
    </div><!-- page -->

    <div id="devotion" data-role="page" data-title="My first App">
        <div data-role="header" data-theme="a" data-position="fixed"> <h2>Devotional Messages</h2></div><!-- header -->
        <div data-theme="d" data-role="listview" id="postlist"> </div><!-- content -->
        <div class="addMorePosts">Load More Posts...</div> 
    </div><!-- page -->

<script src="http://howtodeployit.com/category/daily-devotion/?json=recentstories&callback=listPosts" type="text/javascript"></script>

I initially limited the number of Posts displayed by using the Return statement. I now changed it to For statement to see if I can increment the number of Posts displayed by the click of a button.

At this stage I am trying to figure out the best logic to use. I have tried to add another Function to achieve this but no luck. Still reading and researching but was hoping for guidance or good example

What are you trying to do? Are you trying to return a value and keep the function running? You can't do that in JavaScript. If you are trying to return a value from `$.each` see [here](http://stackoverflow.com/questions/3820269/return-a-value-when-using-jquery-each) — 0xcaff, Oct 17 '13 at 21:32
All I want to achieve is I have an HTML div id 'clickme' and need to execute a click Function that would append more Posts into existing Posts — Chelseawillrecover, Oct 17 '13 at 21:42

Jon Koops · Accepted Answer · 2013-10-19T20:05:47.603

0

function addMorePosts ( data, offset, amount ) {

    var $postsList = $('#postlist'),
        posts = data.slice(offset, amount);

    $.each(posts, function ( index, post ) {

        $postsList.append(
            '<li>' +
                '<h3>' + post.title + '</h3>' +
                '<p>' + 
                    post.excerpt + 
                    '<a href="#devotionpost" onclick="showPost(' + post.id + ')"></a>' +
                '</p>' +
            '</li>'
        );

    });

}

JSFiddle: http://jsfiddle.net/V4Ucv/2/

edited Oct 19 '13 at 20:05

answered Oct 17 '13 at 21:55

Jon Koops

8,801
6
29
51

Great Jon, i will try this out and let you know how it goes. – Chelseawillrecover Oct 17 '13 at 22:01
I have been trying to crack my head on this but not getting anywhere. I am getting the error "Uncaught SyntaxError: Unexpected string" for this line ('' +). – Chelseawillrecover Oct 18 '13 at 22:55
I have included my HTML bit – Chelseawillrecover Oct 19 '13 at 08:16
1

@Chelseawillrecover I've updated my answer, I forgot a `+` somwhere. – Jon Koops Oct 19 '13 at 16:15
You are a STAR and an Amazing programmer. Just so I focus more on learning, what document should I have read that would have helped me more? – Chelseawillrecover Oct 19 '13 at 16:34
I have tested your suggestion and it appends more posts. The only thing noticed is that the initial posts retain their Listview styling but other appended Posts loose the styling – Chelseawillrecover Oct 19 '13 at 18:58
@Chelseawillrecover You should take a look at my JSFiddle example. – Jon Koops Oct 19 '13 at 20:05
Yes I did take a look. What I meant was each posts list cannot be clicked on. Sorry for making this a long conversation – Chelseawillrecover Oct 19 '13 at 20:24
@Chelseawillrecover That's probably because new entries are being added to '#postlist' and not '#postlist ul'. – Jon Koops Oct 19 '13 at 20:29
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/39571/discussion-between-chelseawillrecover-and-jon-koops) – Chelseawillrecover Oct 19 '13 at 20:36

Append more Data into existing Data

1 Answers1