JSONデータを効率的に使用して、Laravel Bladeテンプレートにカスケードドロップダウンメニューを実装します

この記事では、LaravelアプリケーションにローカルJSONファイルをロードし、そのデータをブレードテンプレートに渡す方法について詳しく説明しています。コントローラーによるJSONの解析を処理することにより、ビューレイヤーはBladeの@Foreach命令を使用してデータをトラバースし、それによりドロップダウンメニューの動的生成を実現します。特に、この記事では、JavaScriptを組み合わせてマルチレベルのリンケージドロップダウンメニュー関数を実装して、選択に基づいて動的なコンテンツディスプレイをユーザーに提供する方法を詳細に調べ、そのような相互作用を実装するための実用的なコード例と予防策を提供します。

最新のWebアプリケーション開発では、特に動的フォームまたはデータセレクターを構築する場合、ローカルJSONファイルなどの非データベースソースからデータをロードしてユーザーに提示する必要があることがよくあります。 Laravelフレームワークは、そのようなニーズを処理するための簡潔なメカニズムを提供します。この記事では、JSONデータをLaravel Bladeビューに統合し、マルチステージリンケージドロップダウンメニューをさらに実装する方法について説明します。

1。JSONデータの読み込みと解析

まず、LaravelコントローラーのJSONファイルを読み取り、解析する必要があります。これは通常、ビューレンダリングを処理する方法で行われます。

  witherrors（ 'jsonデータファイルは存在しません！'）;
        }

        // json fileのコンテンツを読み取ります$ jsonstring = file_get_contents（$ jsonfilepath）;

        // JSON文字列をPHPアレイにデコードする// 2番目のパラメーターは、JSONオブジェクトをjsonオブジェクトを連想配列にデコードすることを意味します。

        //デコードが成功したかどうかを確認してください（json_last_error（）！== json_error_none）{
            // JSON解析エラーを処理しますreturn back（） - > witherrors（ 'json data parsing failed：'。json_last_error_msg（））;
        }

        //解析されたデータをビューに渡すreturn View（ 'users.create'） - > with（ 'details'、$ details）;
    }
}

説明：

• base_path（ 'resources/data/address.json'）：JSONファイルを取得するために使用される絶対パス。このような静的データファイルをリソースディレクトリに配置して、簡単に管理することをお勧めします。
• file_get_contents（）：ファイル全体を文字列に読み取ります。
• json_decode（$ jsonstring、true）：JSON文字列をPHP変数にデコードします。真のパラメーターを渡すと、JSONオブジェクトを連想配列に変換します。これは、ブレードテンプレートのキー名を介してデータにアクセスするときにより便利です。
• エラー処理：ファイルの存在チェックとJSONデコードエラーチェックの追加。これは、生産環境での堅牢なコードの必要な部分です。

2。ブレードテンプレートにデータを表示（基本ドロップダウンメニュー）

ブレードビューでは、@Foreachループを使用して、コントローラーで渡された配列を反復し、HTML タグを生成できます。

address.jsonファイル構造が次のとおりであるとします。

 [
 {
   「地域」：「naypyitaw連合領土」、
   「町」：「Za bu thi ri township」、
   「四半期」：「Zay Ya Theik di Quarter」、
   「郵便番号」：1501001
}、
 {
   「地域」：「naypyitaw連合領土」、
   「町」：「Za bu thi ri township」、
   「四半期」：「Pyin Nyar Theik di Quarter」、
   「郵便番号」：1501002
}
]

users/create.blade.phpファイルで、次のような地域のドロップダウンメニューを表示できます。

 領域：
<name id="region" class="form-control">を選択します
    領域を選択してください
    {{ -  array_uniqueを使用して、領域が繰り返されないことを確認します - }}
    @foreach（$ detail-> sique（ 'region'）as $ detail）
       <option detail> {{$ detail ['region']}} </option>
    @endforeach
</name>

説明：

• $の詳細は、コントローラーから渡されたJSONデータアレイ全体です。
• $ details-> inited（ 'region'）：ドロップダウンメニューで領域オプションの重複を避けるために、BladeのLaravelコレクションの一意の（）メソッドを使用できます。これには、$ details変数がlaravelコレクションであることが必要です（コントローラーでコレクション（$ details）を介して変換するか、collect（$ details） - > sinque（ 'region'）を使用してブレードで直接変換できます）。 $の詳細が通常のPHPアレイである場合、コントローラーの重複排除またはブレードの手動で重複排除を処理する必要があります。
• $ DEATURE ['region']：JSON_DECODEは真のパラメーターを使用するため、$ DEATUREは連想配列であり、そのキーは四角い括弧[]を介してアクセスされます。

3.カスケードドロップダウンメニュー（JavaScriptの相互作用）を実装する

「ユーザーが特定の領域を選択する場合、その領域の下のタウンシップのみが表示される」というカスケード関数を実装するには、JavaScriptを組み合わせる必要があります。一般的なアプローチは、すべてのデータを一度にフロントエンドに渡してから、JavaScriptを介してフィルタリングしてクライアントを埋めることです。

3.1フロントエンドデータを準備します

JavaScriptが$の詳細データにアクセスするには、通常はJSON文字列であり、<script>タグに埋め込まれたJavaScriptで使用できる形式に変換する必要があります。</script>

 

    // PHPアレイをJSON文字列に変換し、JavaScript変数const alldetails = @json（$ details）に割り当てます。 
    //またはjson.parseを使用（ '{!! json_encode（$ details）!!}'）;より厳格な脱出が必要な場合

領域：
<name id="region" class="form-control">を選択します
    領域を選択してください
    @foreach（collect（$ details） - > sique（ 'region'）as $ detail）
       <option detail> {{$ detail ['region']}} </option>
    @endforeach


<label for="town" class="mt-3">タウンシップ：</label>
<select name="town" id="town" class="form-control" disabled>
    タウンシップを選択してください
</select>

<label for="quarter" class="mt-3"> block：</label>

    ブロックを選択してください


<label for="posal_code" class="mt-3"> zipコード：</label>

</name>

3.2 JavaScriptロジックの書き込み

次に、JavaScriptコードを追加して、エリア選択の変更を聞き、タウンシップを更新し、ドロップダウンメニューを動的にブロックします。

 
    // document.addeventlistener（ 'domcontentloaded'、function（）{
        const regionselect = document.getElementById（ 'region'）;
        const townselect = document.getElementById（ 'Town'）;
        const quarterSelect = document.getElementById（ 'Quarter'）;
        const postalcodeInput = document.getElementById（ 'postal_code'）;

        //町をクリアして無効にし、ブロックドロップダウンメニュー関数ResetTownAndquarter（）{
            TownSelect.innerhtml = '<option value="">タウンシップを選択してください</option>';
            TownSelect.disabled = true;
            QuarterSelect.innerhtml = '<option value="">ブロックを選択してください</option>';
            QuarterSelect.disabled = true;
            postalcodeInput.value = ''; //郵便番号をクリア}

        Resettownandquarter（）; // regionselect.addeventlistener（ 'change'、function（）{
            const selectedRegion = this.value;
            Resettownandquarter（）; // if（selectedRegion）{
                //選択されたエリアに一致するタウンシップデータを除去しますconst filteredtowns = alldetails.filter（item => item ['region'] === selectedRegion）;

                // const uiniquetowns = [... new set（filteredtowns.map（item => item ['town']）]]]に複製されていない町のリストを取得します。 //「町」にはスペースがあることに注意してください//タウンシップのドロップダウンメニューユニークタウン。
                    const option = document.createelement（ 'option'）;
                    option.value = town;
                    option.textContent = own;
                    TownSelect.AppendChild（オプション）;
                }）;
                townSelect.disabled = false; //タウンシップのドロップダウンメニューを有効にします}
        }）;

        townselect.addeventlistener（ 'change'、function（）{
            const selectedRegion = regionselect.value;
            const selectedtown = this.value;
            QuarterSelect.innerhtml = '<option value=""> block </option>';を選択してください。 // block quarterselect.disabled = true;
            postalcodeInput.value = ''; //郵便番号をクリアする場合（SelectedRegion && SelectedTown）{
                //選択したエリアとタウンシップconst filteredquarters = alldetails.filter（item =>に一致するブロックデータを除去 
                    item ['region'] === selectedRegion && item ['town'] === selectedtown
                ）;

                //非重複していないブロックのリストを取得constquarters = [... new set（filteredquarters.map（item => item ['quarter']）]]; //「クォーター」にはスペースがあることに注意してください
                    const option = document.createelement（ 'option'）;
                    option.value = Quarter;
                    option.textContent = Quarter;
                    QuarterSelect.AppendChild（オプション）;
                }）;
                quarterselect.disabled = false; //ブロックドロップダウンメニューを有効にします}
        }）;

        QuarterSelect.addeventListener（ 'change'、function（）{
            const selectedRegion = regionselect.value;
            const selectedtown = townselect.value;
            const selectedquarter = this.value;
            postalcodeInput.value = ''; //郵便番号をクリアする場合（SelectedRegion && SelectedTown && selectedQuarter）{
                //対応する郵便番号を見つけるconst matcheddetail = alldetails.find（item => 
                    item ['region'] === selectedRegion && 
                    item ['Town'] === selectedtown && 
                    item ['quarter'] === selectedquarter
                ）;

                if（matcheddetail）{
                    postalcodeInput.value = matcheddetail ['postal code'];
                }
            }
        }）;
    }）;

説明：

• @JSON（$の詳細）：これは、PHP変数を安全にJSON文字列に自動的に変換し、JavaScriptで直接使用できるHTMLエンティティをエンコードするLaravel Bladeの便利な指令です。
• document.addeventlistener（ 'domcontentloaded'、...）：HTMLドキュメントが完全にロードされて解析された後にJavaScriptコードが実行されることを確認します。
• filter（）とmap（）：データのフィルタリングと変換に使用されるJavaScriptアレイの一般的な方法。
• [... new set（...）]：アレイから一意の要素を抽出するための簡潔なJavaScript構文。
• 無効プロパティ：ユーザーが有効な選択をする前に、後続のドロップダウンメニューを無効にします。
• 鍵名に注意してください：町の端にスペースがあり、JSONデータには四分の一のキー名があります。 JavaScript、たとえば項目['Town']にアクセスするときは、これらのスペースを保持してください。実際の開発では、キー名を標準化し、スペースを回避することをお勧めします。

3.3大規模なデータセットの考慮事項

JSONファイルが非常に大きい場合、すべてのデータを一度にフロントエンドにロードすると、パフォーマンスの問題が発生する可能性があります。この場合、より良いアプローチは次のとおりです。

1. 初期読み込み：ページがロードされているときの最初のドロップダウンメニュー（「エリア」など）のデータのみをロードします。
2. AJAXリクエスト：ユーザーがリージョンを選択すると、Ajax要求がJavaScript（たとえば、Fetch APIまたはAxiosを使用する）を介してバックエンドに送信され、選択した領域をパラメーターとして使用します。
3. バックエンドフィルタリング：バックエンドコントローラーがリクエストを受信した後、パラメーターに従ってJSONファイルから対応するタウンシップデータを除去し、JSON形式で返します。
4. フロントエンドの更新： JavaScriptがバックエンドによって返されたデータを受信した後、タウンシップのドロップダウンメニューを動的に記入します。
5. 繰り返しますが、後続のブロックなどについてこのプロセスを繰り返します。ドロップダウンメニュー。

この方法では、初期ページにロードされたデータの量を減らし、ユーザーエクスペリエンスを向上させることができます。

要約します

上記の手順を通じて、LaravelアプリケーションにローカルJSONファイルをロードおよび解析し、ブレードテンプレートにデータを動的に表示する方法を学びました。 Laravelのバックエンド処理能力とフロントエンドJavaScriptのインタラクティブ性と組み合わせた、単純なドロップダウンメニューであろうと、複雑なカスケードセレクターであろうと、強力でユーザーフレンドリーなフォームを構築できます。実際のプロジェクトでは、データサイズを考慮し、最も適切な負荷と相互作用戦略を選択してください。

以上がJSONデータを効率的に使用して、Laravel Bladeテンプレートにカスケードドロップダウンメニューを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。