WordPress AJAX multiple data parameters

Question

So I have created filterability on my posts so I can filter them by price, property type ect. But now I have been tasked with also making it so that only eight properties will show until a load more button is clicked then eight more will load. I have looked around and I can see that I need to use offset in the wp_query then increment it in my js by the number of posts shown. But my issues is the way I have defined my data in AJAX I have just used serializeArray() and in the tutorials (https://madebydenis.com/ajax-load-posts-on-wordpress/)I have seen they are adding more to the data like below;

data: {
    'cat': cat,
    'ppp': ppp,
    'offset': offset,
    'action': 'mytheme_more_post_ajax'
}

Is there a way I can add serializeArray() to this to fetch my JSON data? or should I go about this another way?

Here's my full php and js code so you can see how I have got my filters to work so far;

functions.php

function custom_js_css(){
    wp_enqueue_script('all_js', get_template_directory_uri() . '/js/all.min.js', 'jquery', '1.0', true);
    wp_localize_script( 'all_js', 'ajax_url', admin_url('admin-ajax.php') );
}
add_action('wp_enqueue_scripts', 'custom_js_css');

add_action('wp_ajax_forsalefilter', 'for_sale_filter');
add_action('wp_ajax_nopriv_forsalefilter', 'for_sale_filter');

function for_sale_filter(){
    $posts = array(
        'posts_per_page'    =>  -1,
        'post_type'         =>  'property',
        'orderby'           =>  'date',
        'meta_key'          =>  'property_status',
        'meta_value'        =>  'For Sale',
    );

    $posts['meta_query'] = array( 'relation' => 'AND' );

    // price filtering
    if($_GET['min_price'] && !empty($_GET['min_price'])){
        $min_price = $_GET['min_price'];
    }else{
        $min_price = 0;
    }

    if($_GET['max_price'] && !empty($_GET['max_price'])){
        $max_price = $_GET['max_price'];
    }else{
        $max_price = 10000000;
    }

    $posts['meta_query'][] = array(
        'key'       => 'property_price',
        'type'      => 'NUMERIC',
        'value'     => array($min_price, $max_price),
        'compare'   => 'BETWEEN'
    );

    // bed filtering

    if($_GET['min_beds'] && !empty($_GET['min_beds'])){
        $min_beds = $_GET['min_beds'];
    }else{
        $min_beds = '1'; 
    }

    if($_GET['max_beds'] && !empty($_GET['max_beds'])){
        $max_beds = $_GET['max_beds'];
    }else{
        $max_beds = '9+'; 
    }

    $posts['meta_query'][] = array(
        'key'       => 'bedrooms',
        'value'     => array($min_beds, $max_beds),
        'compare'   => 'BETWEEN'
    );

    //location filtering

    if(isset( $_GET['location'] ) && $_GET['location']){
        $location = $_GET['location'];
        $location_val = stripslashes($location);

        $posts['meta_query'][] = array(
            'relation'  => 'OR',
            array(
                'key'       => 'street',
                'value'     => $location_val,
                'compare'   => 'LIKE'
            ),

            array(
                'key'       => 'town',
                'value'     => $location_val,
                'compare'   => 'LIKE'
            ),

            array(
                'key'       => 'county',
                'value'     => $location_val,
                'compare'   => 'LIKE'
            ),

            array(
                'key'       => 'postcode',
                'value'     => $location_val,
                'compare'   => 'LIKE'
            )
        );                          
    }

    // property type filtering
    if(isset( $_GET['type'] ) && $_GET['type']){
        $posts['meta_query'][] = array(
            'key'       => 'type_of_property',
            'value'     => $_GET['type'],
            'compare'   => 'IN'
        );
    }

    // secondary flash filtering
    if(isset( $_GET['flash_type'] ) && $_GET['flash_type']){
        $posts['meta_query'][] = array(
            'key'       => 'optional_category',
            'value'     => $_GET['flash_type'],
            'compare'   => 'IN'
        );
    }

    $query = new WP_Query( $posts );

    if( $query->have_posts() ){
        $result = array();

        while( $query->have_posts() ){
            $query->the_post();

            $main_field = get_field('images');
            $first_row = $main_field[0];
            $img = $first_row['image'];
            $img_med = $img['sizes']['medium'];

            $result[] = array(
                "permalink" =>  get_permalink(),
                "image"     =>  $img_med,
                "property_type" =>  get_field('type_of_property'),
                "bedrooms"      => get_field('bedrooms'),
                "street"        => get_field('street'),
                "town"          =>  get_field('town'),
                "price"         =>  get_field('property_price'),
                "second_flash"  =>  get_field('optional_category'),
                "status"        =>  get_field('property_status')
            );
        }
        echo json_encode($result);
    }
    wp_die();
}

js

jQuery(function($){
    $('#filters').submit(function(e){
        e.preventDefault();

        var filter = $('#filters');
        var root_dir = document.location.origin;

        $.ajax({
            url: ajax_url,
            data: filter.serializeArray(), // form data
            dataType: 'json',
            beforeSend:function(xhr){
                $('#properties').html("\
                    <div id='property_preloader'>\
                      <div id='gif'>\
                            <img src='http://domain.co.uk/wp-content/themes/dist/imgs/preloader.gif' alt='Preloader Icon'>\
                        </div>\
                    </div>"
                 );
            },
            success:function(response){
                $('#response').empty();
                $('#properties').html(""+
                    "<div class='container'>"+
                        "<div class='row'><div class='col-12'><div id='crumb'></div><div id='flash_crumbs'></div></div></div>"+
                        "<div class='row' id='response'></div>"+ 
                    "</div>");

                for(var i = 0; i < response.length; i++){
                    var status = response[i].status;
                    var flash_url;

                    if(response[i].status == "For Sale"){
                        flash_url = root_dir + '/wp-content/themes/dist/imgs/forsale.svg';
                    }else if(response[i].status == "Sold"){
                        flash_url = root_dir + '/wp-content/themes/dist/imgs/sold.svg';
                    }else{
                        flash_url = root_dir + '/wp-content/themes/dist/imgs/sstc.svg';
                    }

                    var html =""+
                        "<div class='col-sm-6 col-md-4 col-lg-3 post'>" +
                            "<div class='shadowwrapper2'>" +
                                "<a href='" + response[i].permalink + "'>" +
                                    "<div class='propertywrapper'>" +
                                        "<img class='img-fluid gal_imgs' src='" + response[i].image + "' alt='alt'/>" +
                                        "<span class='second_flash'>" + response[i].second_flash + "</span>" +
                                    "</div>" +
                                    "<div class='cornerflash'><img src='" + flash_url + "' alt='corner flash'></div>" +
                                    "<div class='propertyinfo'>" +
                                        "<div class='row m-0'>" +
                                            "<div class='col-6 p-0 mt-2'>" + response[i].property_type + "</div>" +
                                            "<div class='col-6 p-0 mt-2'>" + response[i].bedrooms + " bedrooms</div>" +
                                        "</div>" +
                                    "</div>" +
                                    "<div class='streetpricewrapper'>" +
                                        "<p class='streetname'>" + response[i].street + ", " + response[i].town + "</p>" +
                                        "<p class='price'>£" + response[i].price + "</p>" + 
                                    "</div>" +                    
                                "</a>" +
                            "</div>" +
                        "</div>";

                    $('#response').append(html);
                }
                crumb(); 
            },
            error: function(XMLHttpRequest, textStatus, errorThrown){
                $('#properties').html(""+
                    "<div class='container'>"+
                        "<div class='row'><div class='col-12'><div id='crumb'></div><div id='flash_crumbs'></div></div></div>"+
                        "<div class='row' id='response'></div>"+ 
                    "</div>");

                var html = "<div class='col-12'><p>Sorry we found no results for your search. Please try widen your search</p></div>";
                $('#response').html(html);
                crumb();
            } 
        });
    });
});

Answer 1

serializeArray creates an array of objects (aka a collection). You can simply push new elements onto the array, like so;

    // using $ notation in variable to indicate a jQuery object
    var $filter = $('#filters');
    // serialize here, so you can add to it before passing in AJAX call...
    var filter = $filter.serializeArray();
    filter.push({ offset: 2 }); // or whatever offset you need to push on....
    // you could add more here if needed....
    filter.push( { other_value: 'foo' } );

    var root_dir = document.location.origin;

    $.ajax({
        url: ajax_url,
        // send the filter variable here, instead of serializing here...
        data: filter,
        // .... remainder of your code ....