This article details how to load a local JSON file in a Laravel application and pass its data to a Blade template. By processing JSON parsing by the controller, the view layer uses Blade's @foreach instruction to traverse the data, thereby achieving dynamic generation of drop-down menus. In particular, the article also explores in-depth how to combine JavaScript to implement multi-level linkage drop-down menu functions to provide users with dynamic content display based on selection, and provides practical code examples and precautions for implementing such interactions.

In modern web application development, it is often necessary to load data from non-database sources such as local JSON files and present it to users, especially when building dynamic forms or data selectors. The Laravel framework provides a concise mechanism to handle such needs. This article will guide you on how to integrate JSON data into Laravel Blade views and further implement multi-stage linkage drop-down menus.

1. Loading and parsing JSON data

First, you need to read and parse the JSON file in the Laravel controller. This is usually done in a way that handles view rendering.

 <?php namespace App\Http\Controllers;

use Illuminate\Http\Request;

class UserController extends Controller
{
    /**
     * Displays a view to create a user form.
     *
     * @return \Illuminate\View\View
     */
    public function create()
    {
        // Build the full path of the JSON file// The base_path() function returns the absolute path of the project root directory $jsonFilePath = base_path(&#39;resources/data/address.json&#39;);

        // Check if the file exists to avoid errors if (!file_exists($jsonFilePath)) {
            // Handle errors that do not exist in the file according to the actual situation, such as throwing an exception or returning an error message return back()->withErrors('JSON data file does not exist!');
        }

        // Read the content of the JSON file $jsonString = file_get_contents($jsonFilePath);

        // Decode the JSON string into a PHP array// The second parameter true means decode the JSON object into an associative array, rather than the object $details = json_decode($jsonString, true);

        // Check whether the decoding is successful if (json_last_error() !== JSON_ERROR_NONE) {
            // Handle JSON parsing errors return back()->withErrors('JSON data parsing failed:' . json_last_error_msg());
        }

        // Pass the parsed data to the view return view('users.create')->with('details', $details);
    }
}

illustrate:

• base_path('resources/data/address.json'): The absolute path used to get the JSON file. It is recommended to place such static data files in the resources directory for easy management.
• file_get_contents(): Read the entire file to a string.
• json_decode($jsonString, true): Decode the JSON string into a PHP variable. Passing a true parameter converts the JSON object into an associative array, which is more convenient when accessing data through key names in the Blade template.
• Error handling: Added file existence checking and JSON decoding error checking, which are necessary parts of robust code in production environments.

2. Display data in the Blade template (Basic drop-down menu)

In the Blade view, you can use the @foreach loop to iterate over the array passed by the controller and generate the HTML tag.

Suppose your address.json file structure is as follows:

 [
 {
   "Region": "Naypyitaw Union Territory",
   "Town ": "Za Bu Thi Ri Township",
   "Quarter": "Zay Ya Theik Di Quarter",
   "Postal Code": 1501001
},
 {
   "Region": "Naypyitaw Union Territory",
   "Town ": "Za Bu Thi Ri Township",
   "Quarter": "Pyin Nyar Theik Di Quarter",
   "Postal Code": 1501002
}
]

In the users/create.blade.php file, you can display the Region drop-down menu like this:

 <label for="region">Region:</label>
<select name="region" id="region" class="form-control">
    <option value="">Please select the area</option>
    {{-- Use array_unique to ensure that the area does not repeat --}}
    @foreach($details->unique('Region') as $detail)
       <option value="{{ $detail['Region'] }}">{{ $detail['Region'] }}</option>
    @endforeach
</select>

illustrate:

• $details is the entire JSON data array passed from the controller.
• $details->unique('Region'): To avoid duplicate region options in the drop-down menu, we can use the unique() method of the Laravel collection in Blade. This requires that the $details variable is a Laravel collection (can be converted in the controller via collect($details) or directly in Blade using collect($details)->unique('Region')). If $details is just a normal PHP array, you need to handle deduplication in the controller or manually deduplication in Blade.
• $detail['Region']: Since json_decode uses true parameter, $detail is an associative array, its key is accessed through square brackets[].

3. Implement cascading drop-down menus (JavaScript interaction)

To implement the cascading function of "If the user selects a certain area, only the townships under that area are displayed", we need to combine JavaScript. A common approach is to pass all the data to the front end at once and then filter and fill on the client via JavaScript.

3.1 Prepare front-end data

In order for JavaScript to access $details data, we need to convert it to a format that is available in JavaScript, usually a JSON string, and embedded in the <script> tag.</script>

 <!-- Somewhere in users/create.blade.php -->
<script>
    // Convert the PHP array to a JSON string and assign it to the JavaScript variable const allDetails = @json($details); 
    // Or use JSON.parse(&#39;{!! json_encode($details) !!}&#39;); if stricter escape is required</script>

<label for="region">Region:</label>
<select name="region" id="region" class="form-control">
    <option value="">Please select the area</option>
    @foreach(collect($details)->unique('Region') as $detail)
       <option value="{{ $detail['Region'] }}">{{ $detail['Region'] }}</option>
    @endforeach
</select>

<label for="town" class="mt-3"> Township:</label>
<select name="town" id="town" class="form-control" disabled>
    <option value="">Please select a township</option>
</select>

<label for="quarter" class="mt-3">Block:</label>
<select name="quarter" id="quarter" class="form-control" disabled>
    <option value="">Please select a block</option>
</select>

<label for="postal_code" class="mt-3">Zip Code:</label>
<input type="text" name="postal_code" id="postal_code" class="form-control" readonly>

3.2 Writing JavaScript Logic

Now we will add JavaScript code to listen for changes in area selection and update the township and block drop-down menus dynamically.

 <script>
    // Ensure that document.addEventListener(&#39;DOMContentLoaded&#39;, function () {
        const regionSelect = document.getElementById(&#39;region&#39;);
        const townSelect = document.getElementById(&#39;town&#39;);
        const quarterSelect = document.getElementById(&#39;quarter&#39;);
        const postalCodeInput = document.getElementById(&#39;postal_code&#39;);

        // Clear and disable town and block drop-down menu function resetTownAndQuarter() {
            townSelect.innerHTML = &#39;<option value="">Please select township&#39;;
            townSelect.disabled = true;
            quarterSelect.innerHTML = &#39;<option value="">Please select a block&#39;;
            quarterSelect.disabled = true;
            postalCodeInput.value = &#39;&#39;; // Clear the postal code}

        resetTownAndQuarter(); // Execute regionSelect.addEventListener(&#39;change&#39;, function () {
            const selectedRegion = this.value;
            resetTownAndQuarter(); // reset if (selectedRegion) {
                // Filter out township data matching the selected area const filteredTowns = allDetails.filter(item => item[&#39;Region&#39;] === selectedRegion);

                // Get the list of towns that are not duplicated const uniqueTowns = [...new Set(filteredTowns.map(item => item[&#39;Town &#39;]))]; // Note that &#39;Town &#39; has spaces // Fill in the township drop-down menu uniqueTowns.forEach(town => {
                    const option = document.createElement(&#39;option&#39;);
                    option.value = town;
                    option.textContent = town;
                    townSelect.appendChild(option);
                });
                townSelect.disabled = false; // Enable township drop-down menu}
        });

        townSelect.addEventListener(&#39;change&#39;, function () {
            const selectedRegion = regionSelect.value;
            const selectedTown = this.value;
            quarterSelect.innerHTML = &#39;<option value="">Please select block&#39;; // Reset block quarterSelect.disabled = true;
            postalCodeInput.value = &#39;&#39;; // Clear the postal code if (selectedRegion && selectedTown) {
                // Filter out block data matching the selected area and township const filteredQuarters = allDetails.filter(item => 
                    item[&#39;Region&#39;] === selectedRegion && item[&#39;Town &#39;] === selectedTown
                );

                // Get the list of non-duplicate blocks const uniqueQuarters = [...new Set(filteredQuarters.map(item => item[&#39;Quarter &#39;]))]; // Note that &#39;Quarter &#39; has spaces // Fill the block drop-down menu uniqueQuarters.forEach(quarter => {
                    const option = document.createElement(&#39;option&#39;);
                    option.value = quarter;
                    option.textContent = quarter;
                    quarterSelect.appendChild(option);
                });
                quarterSelect.disabled = false; // Enable the block drop-down menu}
        });

        quarterSelect.addEventListener(&#39;change&#39;, function () {
            const selectedRegion = regionSelect.value;
            const selectedTown = townSelect.value;
            const selectedQuarter = this.value;
            postalCodeInput.value = &#39;&#39;; // Clear the postal code if (selectedRegion && selectedTown && selectedQuarter) {
                // Find the corresponding postal code const matchedDetail = allDetails.find(item => 
                    item[&#39;Region&#39;] === selectedRegion && 
                    item[&#39;Town &#39;] === selectedTown && 
                    item[&#39;Quarter &#39;] === selectedQuarter
                );

                if (matchedDetail) {
                    postalCodeInput.value = matchedDetail[&#39;Postal Code&#39;];
                }
            }
        });
    });
</script>

illustrate:

• @json($details): This is a convenient directive for Laravel Blade that automatically converts PHP variables to JSON strings safely and encodes HTML entities, which can be used directly in JavaScript.
• document.addEventListener('DOMContentLoaded', ...): Ensure that JavaScript code is executed after the HTML document is fully loaded and parsed.
• filter() and map(): Common methods for JavaScript arrays, used to filter and transform data.
• [...new Set(...)]: A concise JavaScript syntax for extracting unique elements from an array.
• disabled property: Disable subsequent drop-down menus before the user makes a valid choice.
• Note the key name: There are spaces at the end of the Town and Quarter key names in your JSON data. Be sure to keep these spaces when accessing in JavaScript, for example item['Town ']. In actual development, it is recommended to keep the key names standardized and avoid spaces.

3.3 Considerations of large data sets

If your JSON file is very large, loading all data to the front end at once can cause performance issues. In this case, a better approach is:

1. Initial loading: Only load data from the first drop-down menu (such as "area") when the page is loading.
2. AJAX request: When a user selects a region, an AJAX request is sent to the backend via JavaScript (for example, using the fetch API or Axios), taking the selected region as a parameter.
3. Backend filtering: After the backend controller receives the request, it filters out the corresponding township data from the JSON file according to the parameters and returns it in JSON format.
4. Front-end update: After JavaScript receives the data returned by the back-end, dynamically fills the township drop-down menu.
5. Repeat: Repeat this process for subsequent blocks, etc. drop-down menus.

This method can reduce the amount of data loaded on the initial page and improve the user experience.

Summarize

Through the above steps, you have learned how to load and parse local JSON files in your Laravel application and display their data dynamically in your Blade template. Whether it is a simple drop-down menu or a complex cascading selector, combined with Laravel's back-end processing power and front-end JavaScript interactivity, you can build powerful and user-friendly forms. In actual projects, be sure to consider the data size and choose the most suitable loading and interaction strategy.

The above is the detailed content of Efficiently use JSON data to implement cascading drop-down menus in Laravel Blade templates. For more information, please follow other related articles on the PHP Chinese website!