Add “load extra” performance to an AJAX response

We’ve got a customized put up sort named lodging and it has one taxonomy, named accommodation_city. Its youngsters are 4 phrases, easy metropolis names.

What I’ve finished to date, is make 2 queries:

1. Will present the 4 metropolis names horizontaly
2. Will present ALL the posts which might be included in these 4 phrases.

$phrases = get_terms('accommodation_city'); ?>
<ul class="cat-list">
  <li><a category="cat-list_item energetic" href="#!" data-slug="">All cities</a></li>
  <?php foreach($phrases as $time period) : ?>
    <li>
      <a category="cat-list_item" href="#!" data-slug="<?= $term->slug; ?>">
        <?= $term->title; ?>
      </a>
    </li>
  <?php endforeach; ?>
</ul>

The code abobe will merely present the first question.

  $accs = new WP_Query([
    'post_type' => 'accommodation',
    'posts_per_page' => 2,
    'order_by' => 'date',
    'order' => 'desc',
    'tax_query' => array(
      array(
        'taxonomy' => 'accommodation_city',
        'field' => 'slug',
        'operator' => 'EXISTS'
      )
    )
  ]);

  if ($accs->have_posts()): ?>
    <ul class="project-tiles">
      <?php
      whereas($accs->have_posts()) : $accs->the_post();
        echo get_the_title() . "<br>";
      endwhile;
      ?>
    </ul>
    <?php wp_reset_postdata();
  endif;

The code above will merely present the 2nd question, however limiting the outcomes to 2 posts.

Now we go to the half the place we create some Javascript, as a way to make our AJAX name.

jQuery('.cat-list_item').on('click on', operate() {

  jQuery('.cat-list_item').removeClass('energetic');
  jQuery(this).addClass('energetic');

  jQuery.ajax({
    sort: 'POST',
    url: '/wp-admin/admin-ajax.php',
    dataType: 'html',
    knowledge: {
      motion: 'filter_projects',
      class: jQuery(this).knowledge('slug'),
    },
    success: operate(res) {
      jQuery('.project-tiles').html(res);
    }
  })
});

Our aim right here is to indicate 4 cities after which everytime we click on on one metropolis title, to indicate it is posts which might be associated to that time period.

The code to try this is beneath:

operate filter_projects() {
  $catSlug = $_POST['category'];

  if ($catSlug){
    $ajaxposts = new WP_Query([
      'post_type' => 'accommodation',
      'posts_per_page' => 2,
      'orderby' => 'menu_order',
      'order' => 'desc',
      'tax_query' => array(
        array(
          'taxonomy' => 'accommodation_city',
          'field' => 'slug',
          'terms' => $catSlug,
        )
      )
    ]);
  } else {
    $ajaxposts = new WP_Query([
      'post_type' => 'accommodation',
      'posts_per_page' => 2,
      'orderby' => 'menu_order',
      'order' => 'desc',
      'tax_query' => array(
        array(
          'taxonomy' => 'accommodation_city',
          'field' => 'slug',
          'operator' => 'EXISTS'
        )
      )
    ]);
  }

  $response="";

  if($ajaxposts->have_posts()) {
    whereas($ajaxposts->have_posts()) : $ajaxposts->the_post();
      $response .= get_the_title() . "<br>";
    endwhile;
  } else {
    $response="empty";
  }

  echo $response;
  exit;
}
add_action('wp_ajax_filter_projects', 'filter_projects');
add_action('wp_ajax_nopriv_filter_projects', 'filter_projects');

How can I add “Load extra” performance to the code above? Is it doable? Ought to I change my code to REST API as a way to do one thing like that?