How to get json encode data into dropdown field in php? - php

Question

<script>
$(document).ready(function(){
$("#region").change(function(){
region = $(this).val()
$.ajax({
type:"POST",
data:{"region":region},
url:"get-city.php",
success:function(data){
alert(data);
//$("#city").html(data);
//$("#state").html(data);
}
});
});
});
</script>
<select name="region" id="region" >
<option value="">Select Region</option>
<?php
$sql = mysqli_query($con, "SELECT * FROM `region`");
while($row = mysqli_fetch_array($sql))
{
?>
<option value="<?php echo $row['heading_text']; ?>"><?php echo $row['heading_text']; ?></option>
<?php
}
?>
</select>
<select name="state" id="state">
<option value="">Select Region State</option>
</select>
<select name="city" id="city">
<option value="">Select Region City</option>
</select>
get-city.php
<?php
error_reporting(0);
include('dbase.php');
$region = $_POST['region'];
$sql = "select * from region_data where heading_text='".$region."'";
$results = mysqli_query($con,$sql);
while($rows = mysqli_fetch_assoc($results))
{
$data[] = array(
'state' => $rows['state'],
'city' => $rows['name']
);
}
echo json_encode($data);
?>
In this code I have created simple dropdown one is for region where I change its value by id as you can see in jquery code. Now, As you can see in get-city.php file I have encode data via json_encode function which work fine. But problem is I am not able to show data in state and city drop down in php. My json_encode data look like:
[{"state":"","city":"delhi"},{"state":"","city":"agra"},{"state":"","city":"varanasi"},{"state":"","city":"haridwar"},{"state":"","city":"dharamshala"},{"state":"","city":"srinagar"},{"state":"","city":"mussoorie"},{"state":"","city":"amritsar"},{"state":"","city":"shimla"},{"state":"","city":"kullu manali"},{"state":"","city":"assam"},{"state":"","city":"meghalaya"},{"state":"","city":"arunachal pradesh"},{"state":"","city":"manipur"},{"state":"","city":"nagaland"},{"state":"","city":"J AND K"},{"state":"38","city":"Saharanpur"}]
So, How can I get value in dropdown? Please help me.
Thank You

Answer 1

You'll have to use parseJSON in jQuery to decode the JSON data and then append() the option values to city and state select tags.
<script>
$(document).ready(function(){
$("#region").change(function(){
region = $(this).val()
$.ajax({
type:"POST",
data:{"region":region},
url:"get-city.php",
success:function(data){
var obj = $.parseJSON(data);
$.each(obj, function() {
$("#city").append('<option value="'+this['city']+'">'+this['city']+'</option>');
$("#state").append('<option value="'+this['state']+'">'+this['state']+'</option>');
});
//$("#city").html(data);
//$("#state").html(data);
}
});
});
});
</script>

Answer 2

If you need to get back a JavaScript object from a JSON string, you are looking for JSON.parse().
I did not got exactly how you want to display data, but as far as I understand you are looking for a way to populate the dropdowns, so I will show you only for the city part...for all the other dropdowns the flow is the same.
Assuming you have all the cities in the cities variable after the AJAX call (and after the JSON.parse call if needed):
let cities = [{"state":"","city":"delhi"},{"state":"","city":"agra"},{"state":"","city":"varanasi"},{"state":"","city":"haridwar"},{"state":"","city":"dharamshala"},{"state":"","city":"srinagar"},{"state":"","city":"mussoorie"},{"state":"","city":"amritsar"},{"state":"","city":"shimla"},{"state":"","city":"kullu manali"},{"state":"","city":"assam"},{"state":"","city":"meghalaya"},{"state":"","city":"arunachal pradesh"},{"state":"","city":"manipur"},{"state":"","city":"nagaland"},{"state":"","city":"J AND K"},{"state":"38","city":"Saharanpur"}];
cities.map(function(item, index) {
// let's build an <option> element
const city = jQuery("<option>", {value: item.city, text: item.city})
// let's add the <option> element to the right <select>
jQuery("#city").append(city);
});

Answer 3

this is one of the solution. You can search more for dependent dropdown
use value.city and vvalue.state as you want, or key as option value , its upto you, i just showed how you get values
$.ajax({
url:"get-city.php",
data:{"region":region},
type: "POST",
success: function(data) {
$('select[name="city"]').empty();
$.each( JSON.parse(data), function(key, value) { // or use data without JSON.parse(data)
$('select[name="city"]').append('<option value="'+ value.state +'">'+ value.city +'</option>');
});
}
});

Answer 4

Inside your success section:
success:function(data){
for(let i = 0; i < data.length; i++){
$('select[name="city"]').append('<option value="'+ data[i].city +'">'+ data[i].city +'</option>');
}
}