How to Load JSON Data Dynamically in PHP and jQuery

Learn how to populate dropdowns dynamically using JSON, PHP, and jQuery. Real-world example with departments and employees using AJAX and JSON data.

📚 Introduction

In many PHP web projects, you’ll often need to create dependent dropdowns or load dynamic data based on user selection — like choosing a department to view its employees.

In this guide, we'll walk through a complete example where:

• PHP loads a dropdown from a JSON API
• When the user selects an option, another PHP script fetches related data using AJAX
• jQuery updates the page with no reload

This type of setup is commonly used in dashboards, admin panels, and business apps.

 

💡 What is JSON and Why It’s Used in Web Apps

JSON (JavaScript Object Notation) is a lightweight and easy-to-read data format used for exchanging information between a web server and browser. Unlike XML, it uses a simple key–value structure that closely matches JavaScript objects, making it ideal for AJAX-based applications.

In PHP, data is usually stored as arrays or objects. Using json_encode(), developers can easily convert these into JSON before sending them to the frontend. jQuery or JavaScript then reads and displays the data dynamically — no page reload needed!

Because JSON is text-based and language-independent, it is one of the most common ways modern websites communicate data in real time.

 

🧠 The Scenario

We are building a basic interface that:

1. Loads department names into a <select> dropdown (from a PHP-generated JSON file)
2. On selection, uses jQuery AJAX to fetch a list of employees in that department
3. Displays the employee list dynamically below the dropdown

 

🏗️ Real-World Use Cases

This approach is extremely useful in various real-world scenarios, such as:

• Displaying categories and subcategories in eCommerce sites (e.g., Brand → Product → Model)
• Dynamic location pickers like Country → State → City
• Admin dashboards showing filtered reports based on user input
• Form builders that update fields dynamically based on previous selections

Using JSON for such setups not only reduces page reloads but also improves user experience and performance.

 

❌ The Problem (That You Might Face)

When building such functionality, developers often run into issues like:

• Dropdown remains empty
• AJAX call succeeds but returns no data
• Warnings like foreach() argument must be of type array|object, null given
• json_decode() returns null or fails silently

 

🔎 Common Causes of These Issues

Issue	Likely Cause
foreach() on null	json_decode() failed or file couldn’t be loaded
Empty AJAX response	JSON file doesn't exist or is malformed
No error shown	AJAX call failed silently, no .fail() handler
Incorrect output	Echoing HTML or spaces before JSON in PHP

 

✅ Working Solution (3 Files)

📁 1. departmentsJSON.php

This file returns department names in JSON format. Think of it as a fake API or static service.

<?php
header('Content-Type: application/json');

$departments = [
  ["name" => "HR"],
  ["name" => "Engineering"],
  ["name" => "Marketing"]
];

echo json_encode($departments);

📁 2. getEmployeesJSON.php

This file receives the selected department via query parameter and returns employee names as JSON.

<?php
header('Content-Type: application/json');

$department = $_GET['department'] ?? '';
$employees = [];

$data = [
  'HR' => ['Alice', 'Bob'],
  'Engineering' => ['Charlie', 'David'],
  'Marketing' => ['Ella', 'Frank']
];

if (isset($data[$department])) {
  $employees = $data[$department];
}

echo json_encode($employees);

📄 3. index.php

This is the main frontend. It loads departments using PHP and handles user interaction via jQuery.

<?php
$json = file_get_contents('http://localhost/demo/departmentsJSON.php');
$obj = json_decode($json, false);
?>

<p>Select a department to view employees:</p>
<select id="deptSelect">
  <option value="">-- Choose Department --</option>
  <?php foreach ($obj as $dept): ?>
    <option value="<?= $dept->name ?>"><?= $dept->name ?></option>
  <?php endforeach; ?>
</select>

<div id="employeeList"></div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function () {
  $('#deptSelect').change(function () {
    var selectedDept = $(this).val();

    if (selectedDept !== '') {
      var url = "http://localhost/demo/getEmployeesJSON.php?department=" + encodeURIComponent(selectedDept);

      $.getJSON(url)
        .done(function (data) {
          var html = "<h3>Employees:</h3><ul>";
          $.each(data, function (i, employee) {
            html += "<li>" + employee + "</li>";
          });
          html += "</ul>";
          $('#employeeList').html(html);
        })
        .fail(function (jqxhr, status, error) {
          $('#employeeList').html("<p style='color:red;'>Error loading employees.</p>");
          console.error("AJAX Error:", status, error);
        });
    } else {
      $('#employeeList').html('');
    }
  });
});
</script>

 

🧩 Step-by-Step Explanation

Here’s what happens behind the scenes:

1. PHP Backend: The departmentsJSON.php script encodes an array into JSON format using json_encode() and sends it with a proper Content-Type header.
2. Frontend: The index.php file fetches that JSON and populates the dropdown dynamically using PHP’s json_decode().
3. AJAX Trigger: When a user selects a department, jQuery sends an asynchronous request to getEmployeesJSON.php.
4. JSON Response: The PHP script returns a list of employee names, which are looped and appended to the DOM dynamically using $.each().

This combination of PHP and jQuery is simple yet powerful for building real-time UIs without using any heavy frameworks.

 

🔧 Debugging Checklist

• Make sure your JSON files are reachable and return clean data
• Use browser Network tab to inspect AJAX response
• Don’t echo extra HTML or spaces before json_encode()
• Use .fail() handler in jQuery for debugging

 

⚙️ Performance and Security Tips

When using JSON in production environments, keep these best practices in mind:

• Use caching for JSON responses that don’t change frequently (e.g., department list).
• Minimize your JSON output by excluding unnecessary fields.
• Validate all input parameters before using them in PHP to prevent injection attacks.
• Always set header('Content-Type: application/json') to ensure proper interpretation by browsers.
• Use HTTPS when transferring sensitive data to prevent interception.

 

📌 Conclusion

Chained JSON-based dropdowns are very useful for building interactive UIs in PHP. This example covers how to do it cleanly using:

• JSON as data exchange format
• PHP to serve both static and dynamic data
• jQuery to power the frontend interaction

Once you understand the pattern, you can scale this technique to more advanced cases like:

• Category → Subcategory
• Country → State → City
• Brand → Product → Details

 

🚀 Modern Alternatives to jQuery AJAX

While jQuery remains popular, newer projects often use the Fetch API or frontend frameworks like React, Vue.js, or Angular to handle dynamic JSON loading. The same PHP logic applies — only the frontend syntax changes.

Example with Fetch API:

fetch('getEmployeesJSON.php?department=HR')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

This modern approach eliminates dependency on jQuery and works natively in all major browsers.

 

📘 Bonus Tip

If you're working on larger applications, consider storing these JSON files separately (e.g., /api/) or generating them from a database instead of arrays.

 

❓ Frequently Asked Questions

Q1: What’s the difference between json_encode() and json_decode()?
json_encode() converts PHP arrays or objects into JSON strings, while json_decode() converts a JSON string back into a PHP variable (array/object).

Q2: How can I debug JSON parsing issues?
Always check your browser’s Network tab to see the actual JSON response. If it contains HTML or PHP warnings, the JSON decoding will fail.

Q3: Can I load JSON from an external API instead of a local PHP file?
Yes! Just replace the file URL with the external API endpoint and make sure CORS (Cross-Origin Resource Sharing) is enabled if it’s on a different domain.