Append previous chat history to current list on click of Show More button at top

Question

I have chat application and the latest data is at the bottom. I want to get previous data on click of Show More button at top of the page. I want to retain the existing data and get the old as well(just like whatsapp).

Please assist with my code below

var loadCount = 0;
self.userDetails = function() {
  $('#loading-image').show();
  var size = loadCount * 4
  var UserModel = {
    UserID: userID,
    PageSize: size
  }
  self.getData =
    jQuery.support.cors = true;
  $.ajax({
    type: "POST",
    dataType: "json",
    url: serverUrl + 'api/XXXX/XXXXXX',
    data: UserModel,
    success: function(data) {
      console.log(data);
      if (data === null || data.length === 0) {
        $("#LoadMore").hide();
      } else {

        var mappedData = $.map(data, function(item) {
          return new UserModel(item);
        });
        // With this LoadMore button at bottom of the list, I am able to get previous data below the current list.

        self.UserPostdata(self.UserPostdata().concat(mappedData));

        $("#LoadMore").show();
        loadCount = loadCount + 1;

      }
    },

    complete: function() {
      $('#loading-image').hide();
    },
  });
}

c#

public dynamic getUserDetails(string UserID, int Size)
{
    List<UserDetails> userDetails = new List<UserDetails>();

    //In usersDetails, I am getting all the data from Database.

    if (userDetails != null)
    {
        userDetails = userDetails.OrderByDescending(x => x.createdAt).Skip(Size).Take(4).ToList();
    }

    return userDetails;
}

Answer 1

Don't use concat method because it adds new values to the end of the array. Use unshift() instead, it will add your new values to the beginning of the array:

See documentation of Knockout observableArray