Ajax API - Getting Pagination data

Question

I make a GET call using Ajax in wordpress template page, it works well and has the expected result. But the API I use has a limit of per page 5, and uses pagination. What I want to do is to get all data before I call myFunction(data), so that I can send that function everything, currently I only get the first 5 objects. but pagination count page is correct but data getting wrong, ex: when i select second page the same data will reflect on second page, not another set of 5 objects.

<?php
global $wp_query;
$paged = get_query_var('paged') ? get_query_var('paged') : 1;
if ( get_query_var('paged') ) { $paged = get_query_var('paged'); } elseif ( get_query_var('page')){ 
$paged = get_query_var('page'); } 
else { $paged = 1; }            
$categories = rwmb_meta( 'minti_blogcategories', 'type=checkbox_list' );
$categories = implode( ', ', $categories ); 
$args = array('post_status' => 'publish',
'orderby' => 'date',
'order' => 'DESC',
'category_name' => $categories,
'posts_per_page'=>5,
'paged' => $paged);
$wp_query = new WP_Query($args);
while ( $wp_query->have_posts() ) : $wp_query->the_post(); ?>
<?php  get_template_part( $templatepart, get_post_format() ); ?>
<?php  endwhile; ?>
<?php  if($style != 'masonry') { get_template_part( 'framework/inc/nav' ); wp_reset_postdata(); } ?>    
<?php if( ($style == 'fullwidth' || $style == 'medium') && ($sidebar != 'fullwidth' && $sidebar != 
'default')){ ?>
<div id="sidebar" class="<?php echo esc_attr($sidebar); ?> alt">
<?php get_sidebar(); ?>
</div>
<?php } ?>     
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="application/javascript">
$(document).ready(function(){
$.ajax({
type: "GET",
data: {"triggerCode": "KW_518", "noOfDays": "1", "limit":"50"},
dataType: "json",
headers: {"x-api-key" : "Here API KEY xxxxxx"},
url: "https://api.fulgid.com/api/v3/trigger-news",
success: function(data){
//$('#result').append(JSON.stringify(data));
var trHTML = '';
$.each(data.news, function (i, item) {
trHTML += ' <article class="clearfix post type-post status-publish format-standard hentry category- 
merger-acquisition-ma tag-acquisition-deal tag-ma tag-ma-deal tag-merger-acquisition tag-merger-and- 
acquisition tag-technology-industry">
<div class="entry-wrap">
<div class="entry-title">
<h2><a> ' + item.title + '</h2>
</div><div class="entry-content">' + item.desc + '</div><div class="entry-meta"><ul><li class="meta- 
category">' + item.publisher + ' &nbsp; <a href="'+ item.url +'"><i class="fa fa-link"></i></a></li> 
<li class="meta-date">' + item.publishDate + ' </li></ul></div></div></article>';
});
$('#response').append(trHTML);   
},
error: function(error){
console.log("Error:");
console.log(error);
}
});
});
</script>

Answer 1

Problem is:

$('#response').append(trHTML);

With above line of code, you will continue to concat the html of "#response". So after each time, you data from page i will become data of page i+1. To fix this you should try:

$('#response').html(trHTML);