Error in getting json data via POST ajax - php

Question

I'm sending two values to another php via ajax and trying to get back two values and display one in a dropbox, and another in a input box.
This is the ajax code:
function searchq6(){
var searchstate = $("input[name='region']").val();
var searchTxt = $("input[name='suburb']").val();
$.ajax({
url: 'search-suburb.php',
type: 'POST',
dataType: 'JSON',
data: {
searchVal: searchTxt,
st:searchstate},
})
.done(function(response) {
var response = JSON.parse(response);
console.log(response);
})
.fail(function(jqXHR, textStatus, errorThrown) {
console.log(errorThrown);
});
}
And this is what I'm sending back from the php file:
$output = '' ;
if (isset($_POST['searchVal'])){
$searchq = $_POST['searchVal'];
$st = $_POST['st'];
$query = mysqli_query($link, "SELECT DISTINCT title FROM `wp_locations` WHERE state='".$st."' AND `title` LIKE '%".$searchq."%' LIMIT 10")or die("Could not search!");
if (!mysqli_query($link,$query))
{
echo("Error description: " . mysqli_error($link));
}
$count = mysqli_num_rows($query);
if($count == 0){
$output = '<option>No results!</option>';
}else{
$suburb = array();
$postcode = array();
while($row = mysqli_fetch_array($query)){
$suburb[] = $row['title'];
$postcode[] = $row['title'];
//echo $suburb;
} // while
$result = ['success'=> true, 'data'=> ['suburb'=> $suburb, 'postcode' => $postcode], 'error' => null];
echo json_encode($result);
} // else
} // main if
HTML:
Suburb:* <input type="text" name="suburb" list="sbb" required size="30" value="<?php echo $suburb; ?>" onkeyup="searchq6()" id="output">
<datalist id="sbb" name="taskoption6" >
<option> </option>
</datalist>
Postcode:* <input type="number" name="postcode" required value="<?php echo $postcode; ?>" id="postcode">
I'm getting this error in the console:
SyntaxError: Unexpected token E
at Object.parse (native)
at m.parseJSON (http://site/js/jquery.min.js:5:15998)
at Pb (http://site/js/jquery.min.js:5:18379)
at x (http://site/js/jquery.min.js:5:21793)
at XMLHttpRequest.send.b (http://site/js/jquery.min.js:5:26030)

Answer 1

$.ajax({
url: 'search-suburb.php',
type: 'POST',
dataType: 'JSON',//result is set to json
data: {
searchVal: searchTxt,
st: searchstate
},
})
.done(function(response) {//response parsed already
var response = JSON.parse(response);//no need to parse here
console.log(response);
})
.fail(function(jqXHR, textStatus, errorThrown) {
console.log(errorThrown);
});
You set the dataType:'json' so no need to parse
var response = JSON.parse(response);
console.log(response);
You can have this console.log(response); directly without var response = JSON.parse(response);