AJAX not returning an object

Question

I originally created some filters for my posts where my functions.php file would return the html, but there was a lot of html so I decided that I should just pass the data to jQuery using JSON and then output the html from my js file. But the problem I'm having now is that when I output the response to the console I just get the text.

For example I am trying to get each posts permalink and all I am receiving the following in one big paragraph;

[{"permalink":"http:\/\/websitename.co.uk\/property\/rumballs-court-bishops-stortford-hertfordshire-cm23-copy-2\/"},

{"permalink":"http:\/\/websitename.co.uk\/property\/high-wych-road-sawbridgeworth-hertfordshire-cm21-copy\/"},

{"permalink":"http:\/\/websitename.co.uk\/property\/grovebury-house-galloway-road-bishops-stortford-hertfordshire-cm23-copy\/"},

{"permalink":"http:\/\/websitename.co.uk\/property\/rumballs-court-bishops-stortford-hertfordshire-cm23\/"}]

Am I not supposed to receive an object not just a paragraph?

here's my code;

functions.php

function custom_js_css(){
    wp_enqueue_script('all_js', get_template_directory_uri() . '/js/all.min.js', 'jquery', null, true);
    wp_enqueue_style('all_css', get_template_directory_uri() . '/css/main.min.css');

    wp_localize_script( 'all_js', 'ajax_url', admin_url('admin-ajax.php') );
}
add_action('wp_enqueue_scripts', 'custom_js_css');

add_action('wp_ajax_soldfilter', 'sold_filter');
add_action('wp_ajax_nopriv_soldfilter', 'sold_filter');

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

    $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 );?>



    <?php if( $query->have_posts() ): ?>
        <?php 
        $result = array();

        while( $query->have_posts() ): $query->the_post() ?>
            <?php
                $result[] = array(
                    "permalink" =>  get_permalink(),
                );
            ?>
        <?php endwhile; ?>
    <?php

    echo json_encode($result);
    // wp_reset_postdata(); 
    endif; 
    wp_die();
}

form inside sold.php page

<form action="" method="GET" id="filters">
    <div id="top_bar">
        <input id="location_search" type="text" placeholder="Enter a search location" name="location">

        <label id="type_button">Property Type <span class="arrow">&#9660;<span></label>

        <div id="beds">
            <select name="min_beds">
                <option value="" disabled selected>Min Beds</option>
                <option value="1">1 Bed</option>
                <option value="2">2 Bed</option>
                <option value="3">3 Bed</option>
                <option value="4">4 Bed</option>
                <option value="5">5 Bed</option>
                <option value="6">6 Bed</option>
                <option value="7">7 Bed</option>
                <option value="8">8 Bed</option>
                <option value="9+">9+ Bed</option>
            </select>
            <p>to</p>
            <select name="max_beds">
                <option value="" disabled selected>Max Beds</option>
                <option value="1">1 Bed</option>
                <option value="2">2 Bed</option>
                <option value="3">3 Bed</option>
                <option value="4">4 Bed</option>
                <option value="5">5 Bed</option>
                <option value="6">6 Bed</option>
                <option value="7">7 Bed</option>
                <option value="8">8 Bed</option>
                <option value="9+">9+ Bed</option>
            </select>
        </div>

        <div id="price">
            <select name="min_price"">
                <?php for($x = 0; $x <= 2000000; $x += 100000): ?>
                    <?php if($x == 0): ?>
                        <option value="" disabled selected>Min Price</option>
                    <?php else: ?>  
                        <option value="<?php echo $x; ?>"><?php echo $x; ?></option>
                    <?php endif; ?>     
                <?php endfor; ?>
            </select>
            <p>to</p>
            <select name="max_price">
                <?php for($x = 0; $x <= 2000000; $x += 100000): ?>
                    <?php if($x == 0): ?>
                        <option value="" disabled selected>Max Price</option>
                    <?php else: ?>      
                        <option value="<?php echo $x; ?>"><?php echo $x; ?></option>    
                    <?php endif; ?>
                <?php endfor; ?>
            </select>
        </div>

        <label id="filters_button">Filters <span class="arrow">&#9660;</span></label>
    </div>

    <div id="dropdowns">
        <div id="property_types">
            <div class="column">
                <div>
                    <input type="checkbox" name="type[]" value="Detached" >
                    <img src="<?php bloginfo('template_directory'); ?>/imgs/house_icon.png" alt="house type icon">
                    <p>Detached</p>
                </div>
            </div>

            <div class="column">
                <div>
                    <input type="checkbox" name="type[]" value="Semi-Detached">
                    <img src="<?php bloginfo('template_directory'); ?>/imgs/house_icon.png" alt="house type icon">
                    <p>Semi-Detached</p>
                </div>
            </div>

            <div class="column">
                <div>
                    <input type="checkbox" name="type[]" value="Terraced">
                    <img src="<?php bloginfo('template_directory'); ?>/imgs/house_icon.png" alt="house type icon">
                    <p>Terraced</p>
                </div>
            </div>

            <div class="column">
                <div>
                    <input type="checkbox" name="type[]" value="End of Terrace">
                    <img src="<?php bloginfo('template_directory'); ?>/imgs/house_icon.png" alt="house type icon">
                    <p>End of Terrace</p>
                </div>
            </div>

            <div class="column">
                <div>
                    <input type="checkbox" name="type[]" value="Apartment">
                    <img src="<?php bloginfo('template_directory'); ?>/imgs/house_icon.png" alt="house type icon">
                    <p>Apartment</p>
                </div>
            </div>

            <div class="column">
                <div>
                    <input type="checkbox" name="type[]" value="Bungalow">
                    <img src="<?php bloginfo('template_directory'); ?>/imgs/house_icon.png" alt="house type icon">
                    <p>Bungalow</p>
                </div>
            </div>

            <div class="column">
                <div>
                    <input type="checkbox" name="type[]" value="Commercial">
                    <img src="<?php bloginfo('template_directory'); ?>/imgs/house_icon.png" alt="house type icon">
                    <p>Commercial</p>
                </div>
            </div>
        </div>

        <div id="filters_dropdown">
            <div class="column">
                <label for="first_time">Ideal First Time Buy</label>
                <input id="first_time" type="checkbox" name="flash_type[]" value="Ideal First Time Buy">
            </div>

            <div class="column">
                <label for="investment">Ideal Investment</label>
                <input id="investment" type="checkbox" name="flash_type[]" value="Ideal Investment">
            </div>

            <div class="column">
                <label for="under_offer">Under Offer</label>
                <input id="under_offer" type="checkbox" name="flash_type[]" value="Under Offer">
            </div>
        </div>
    </div>

    <button id="button" type="submit" style="display: none;">Apply filters</button>
    <input type="hidden" name="action" value="soldfilter">
</form>

js

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

        var filter = $('#filters');


        $.ajax({
            url: ajax_url,
            data: filter.serializeArray(), // form data
            // type:filter.attr('method'), // POST
            success:function(response){
                // for(var i = 0; i < response.length; i++){
                //     console.log(response[i]);
                // }
                    console.log(response);


                // $('#response').html(data);
                // post_count();
            }
        });
        // return false;

        // console.log(data);
    });
});

if I output the response using the for loop that you can see in the js file I get the same paragraph but with a single character on each line

You need to parse the json data in your js file. before looping in success function, parse the json data. add this line response = $.parseJSON(response); — Vamsi Krishna, Jun 13 '18 at 09:31

Joseph_J · Accepted Answer · 2018-06-13T09:38:19.883

1

When you echo out the json_encoded array on the php page it is a string representation of the json object. You need to convert the string to an object.

You can do that a couple ways.

On your js page use:

var data = JSON.parse(response);
console.log(data);

The other way is to embellish your ajax a little more by declaring the data type that is expected to be received from the PHP script. See dataType: 'json'

$.ajax({
  url: ajax_url,
  data: filter.serializeArray(), // form data
  //type:filter.attr('method'), // POST
  dataType: 'json', //<--This should automatically convert the string to json for you. 
  success:function(response){
   // for(var i = 0; i < response.length; i++){
   //  console.log(response[i]);
   // }
   console.log(response);
   // $('#response').html(data);
   // post_count();
   }
  });

edited Jun 13 '18 at 09:38

answered Jun 13 '18 at 09:31

Joseph_J

3,654
2
13
22

i guess dataType specifying is the format of the data that you are sending through ajax. like you are sending ajax or xml or text. it is not the data format that you receiving. – Abhinav Jun 13 '18 at 09:52
@Abhinav `contentType` is the header sent to the server. `dataType` is the expected response. Please read: https://stackoverflow.com/questions/2722750/ajax-datatype By the way, it took me absolutely zero effort for me to find this. And if you were my downvote, please research a little better before downvoting people. – Joseph_J Jun 13 '18 at 09:59

score 1 · Answer 2 · edited Jun 13 '18 at 09:59

You are geting ajax encoded string that should be parse before using. otherwise it is just a sting,.so

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

    var filter = $('#filters');


    $.ajax({
        url: ajax_url,
        data: filter.serializeArray(), // form data
         type: POST
        success:function(response){
         var  data = JSON.parse(responce);
             for(var i = 0; i < data.length; i++){
                console.log(data[i]);
             }

    });

});
});

Should work.

AJAX not returning an object

functions.php

form inside sold.php page

js

2 Answers2