jQuery loop over JSON result after AJAX Success

In this article, you will learn how to loop over the JSON result or how to dynamically loaded subcategories of the selected category. For this, we have using AJAX to dynamically fetch data and then convert the Ajax response in JSON format and after that, we are using jQuery to iterate over the JSON response and print the subcategory selection drop down box of the selected category without refreshing the page.

Suppose, we have category and subcategory records in database as given below. You can use the records of category or subcategory if you already have otherwise you can create it manually or copy and paste the following queries in your database.

CREATE TABLE IF NOT EXISTS `category` (
  `catid` int(11) NOT NULL AUTO_INCREMENT,
  `category_name` varchar(100) NOT NULL,
  `is_enabled` int(11) NOT NULL,
  PRIMARY KEY (`catid`)
) 

CREATE TABLE IF NOT EXISTS `subcategory` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `cat_id` int(11) NOT NULL,
  `subcategory_name` varchar(100) NOT NULL,
  `is_enabled` int(11) NOT NULL,
  PRIMARY KEY (`id`)
)

INSERT INTO `category` (`catid`, `category_name`, `is_enabled`) VALUES
(1, 'Accounting', 1),
(2, 'Technology', 1),
(3, 'Position', 1);


INSERT INTO `subcategory` (`id`, `cat_id`, `subcategory_name`, `is_enabled`) VALUES
(1, 1, 'Governement', 1),
(2, 1, 'Fund', 1),
(3, 1, 'Management', 1),
(4, 1, 'Social', 1),
(5, 1, 'Community', 1),
(6, 2, 'Nano', 1),
(7, 2, 'Agriculture', 1),
(8, 2, 'Radio', 1),
(9, 2, 'Information', 1),
(10, 3, 'Junior', 1),
(11, 3, 'senior', 1),
(12, 3, 'Team lead', 1),
(13, 3, 'Manager', 1);

Here, we have written the database connection code and defined a function that returns all enabled data from category table. Make sure to replace the 'hostname', 'username', 'password' and 'dbname' with your database credentials and name.

1. db.php

<?php
class Db {
    private $hostname = 'hostname';
    private $username = 'username';
    private $password = 'password';
    private $database = 'dbname';
    private $conn = NULL;
    public function __construct() { 
        $this->conn = mysqli_connect($this->hostname, $this->username, $this->password, $this->database); 
        if(!$this->conn) {
            echo 'Database not connected';
        }
    }
    public function getCategory(){
        $query = "SELECT * FROM category WHERE is_enabled = '1'";
        $result = mysqli_query($this->conn, $query);
        return $result;
    }
}
?>

Again, we have created a php file to get subcategory records of selected category

2. getSubCategory.php

<?php 
$catid = $_POST['catid']; 
$json = array();
// MySQL database connection code
$connection = mysqli_connect("hostname","username","password","dbname") or die("Error " . mysqli_error($connection));
//fetch subcategories data
$sql = "SELECT * FROM subcategory WHERE cat_id = '$catid' ";
$result = mysqli_query($connection, $sql) or die("Error " . mysqli_error($connection));
//create an array
$json = array();
$i = 0;
while($row = mysqli_fetch_object($result))
{   
    $json[] = array('id' => $row->id, 'name' => $row->subcategory_name);
}
$data = json_encode($json);
echo $data; 
?>

This is the main file, that we will call on the browser. In this file we have written the Ajax code to dynamically fetch subcategory records of the selected category. On change category, the Ajax function calls the 'getSubCategory.php' file and creates the subcategory selection options.

3. index.php

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript">
            function getSubCategory(catid){ 
                $.ajax({
		  url: 'getSubCategory.php',
		  data: 'catid='+catid,
		  type: 'POST',
		  success: function (data) {   
                    var subcat = '<label>Sub Category</label>';
                    subcat += '<select name="subcatid" class="form-control">';
                    subcat += '<option value="0">Please Select Subcategory</option>';
                    data = $.parseJSON(data);
                    $.each(data, function(i, item) {
                        subcat += '<option value="'+item.id+'">'+item.name+'</option>';
                    });
                    subcat += '</select>'; 
                    $('div[id="subcat"]').html(subcat);
		}
                });
                return false;
            }
        </script>
    </head>
    <body>
        <div style="margin: 0 auto; width: 40%;">
            <h2>Select category and their sub category</h2>
            <?php
            include 'db.php';
            $model = new Db();
            $category = $model->getCategory(); 
            ?>
            <div class="form-group">
                <label>Category </label>
                <select name="category" onchange="getSubCategory(this.value)" class="form-control">
                    <option value="0">Please Select Category</option>
                    <?php
                    while($row = mysqli_fetch_array($category)) {
                        $catid = $row['catid'];
                        $cat_name = $row['category_name'];
                        echo '<option value="'.$catid.'">'.$cat_name.'</option>';
                    }
                    ?>
                </select>
            </div>
            <div class="form-group">
                <div id="subcat"></div>
            </div>
        </div>
    </body>
</html>

JavaScript display PDF in the browser using Ajax call
How to Retrieve Emails from Gmail using PHP IMAP
How to store Emoji character in MySQL using PHP
How to display PDF file in PHP from database
Dynamically Add/Delete HTML Table Rows Using Javascript
Submit a form data without page refresh using PHP, Ajax and Javascript
PHP Server Side Form Validation
How to add google reCAPTCHA v2 in registration form using PHP
Complete HTML Form Validation in PHP

◀ Previous Article
CSS Simple Menu Navigation Bar

Next Article ▶
PHP MYSQL Advanced Search Feature