jQuery JSON Issue - php

Question

I compiled my data into JSON via php with 2 parameters response and status. Response has the data which PHP gets when AJAX is processed and status is the error code or success command.
Now, when I pass the data to jQuery, it comes up with weird back and forward slashes, although are don't appear if I console.log(data.response) on AJAX. Please help ..
IMAGE OF OUTPUT
THE JS:
jQuery(document).ready(function($) {
$('.tax-filter').click( function(event) {
// Prevent defualt action - opening tag page
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
// Get tag slug from title attirbute
var selecetd_taxonomy = $(this).attr('title');
$('.tagged-posts').fadeOut();
data = {
action: 'filter_posts',
afp_nonce: afp_vars.afp_nonce,
taxonomy: selecetd_taxonomy,
};
$.ajax({
type: 'post',
dataType: 'json',
url: afp_vars.afp_ajax_url,
data: data,
success: function( data, textStatus, XMLHttpRequest ) {
$('.tagged-posts').html( data.response );
$('.tagged-posts').fadeIn();
/*console.log( data );
console.log( XMLHttpRequest );*/
},
error: function( MLHttpRequest, textStatus, errorThrown ) {
/*console.log( MLHttpRequest );
console.log( textStatus );
console.log( errorThrown );*/
$('.tagged-posts').html( 'No posts found' );
$('.tagged-posts').fadeIn();
}
})
});
});
THE PHP (WP)
// Script for getting posts
function ajax_filter_get_posts( $taxonomy ) {
// Verify nonce
if( !isset( $_POST['afp_nonce'] ) || !wp_verify_nonce( $_POST['afp_nonce'], 'afp_nonce' ) )
die('Permission denied');
$taxonomy = $_POST['taxonomy'];
wp_reset_postdata();
// WP Query
$args = array(
'post_type' => 'std9_photographs',
'posts_per_page' => -1,
'tax_query' => array(
array(
'taxonomy' => 'std9_photograph_cat',
'field' => 'slug',
'terms' => $taxonomy,
),
),
);
// If taxonomy is not set, remove key from array and get all posts
if( !$taxonomy ) {
unset( $args['tag'] );
}
$query = new WP_Query( $args );
$result = '';
if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post();
$result['response'][] = '<h2>'. get_the_title().' </h2>';
$result['status'] = 'success';
endwhile; else:
$result['response'] = '<h2>No posts found</h2>';
$result['status'] = '404';
endif;
$result = json_encode($result);
echo $result;
die();
}
add_action('wp_ajax_filter_posts', 'ajax_filter_get_posts');
add_action('wp_ajax_nopriv_filter_posts', 'ajax_filter_get_posts');

Answer 1

JSON will add slashes when needed (so don't worry about that). The problem is that jQuery has problem to parse that data. You are probably facing a problem encoding your response.
Edit: In order to avoid your backslashes try encoding with the following command json_encode($str, JSON_UNESCAPED_SLASHES);
The reason that you are having this forward and back slashes is because you are adding in your response html code with </h2> </a> etc.

Answer 2

First of all make sure your header is: header('Content-Type: application/json');
Secondly, do a JSON.parse() in your javascript to parse response into json object.