特定のフィールドを除外し、インジェクションの脆弱性を回避しながら、jQuery を使用して JSON データを HTML テーブルに変換するにはどうすればよいですか?

jQuery を使用した簡単な JSON から HTML テーブルへの変換

JSON オブジェクトの配列を HTML テーブルに変換することは、特に次の場合に困難な作業となることがあります。特定のフィールドを除外する必要があります。ただし、jQuery は、この課題に対する洗練された簡単なソリューションを提供します。

jQuery の getJSON() メソッドの利用

getJSON() メソッドは、指定された URL から JSON データを非同期的に取得します。そして、取得が成功するとコールバック関数を実行します。コールバック関数内で、配列内の各 JSON オブジェクトが反復処理され、各フィールドが HTML テーブル セルに変換されます。

テーブル構造の作成

以下コード スニペットは、getJSON() を使用して HTML テーブルを生成する方法を示しています。

$.getJSON(url , function(data) {
    var tbl_body = "";
    var odd_even = false;
    $.each(data, function() {
        var tbl_row = "";
        $.each(this, function(k , v) {
            tbl_row += "<td>"+v+"</td>";
        });
        tbl_body += "<tr class='\""+(' odd_even :>"+tbl_row+"</tr>";
        odd_even = !odd_even;               
    });
    $("#target_table_id tbody").html(tbl_body);
});

このコードでは、$("#target_table_id tbody") セレクターは、指定された ID を持つテーブル本体要素を見つけて、それに設定します。

特定のフィールドの除外

テーブルから特定のフィールドを除外するには、除外するフィールドのキーを格納するオブジェクトを定義できます。含む。 getJSON() コールバック関数内で、フィールドのキーがこのオブジェクトに存在するかどうかを確認し、その値が true の場合にのみテーブルの行に含めます。

インジェクションフリーの代替

潜在的なインジェクションの脆弱性を防ぐには、次のインジェクション不要の代替手段を使用することを検討してください。

$.getJSON(url , function(data) {
    var tbl_body = document.createElement("tbody");
    var odd_even = false;
    $.each(data, function() {
        var tbl_row = tbl_body.insertRow();
        tbl_row.className = odd_even ? "odd" : "even";
        $.each(this, function(k , v) {
            var cell = tbl_row.insertCell();
            cell.appendChild(document.createTextNode(v.toString()));
        });        
        odd_even = !odd_even;               
    });
    $("#target_table_id").append(tbl_body);   //DOM table doesn't have .appendChild
});

このコードは、HTML 文字列に依存する代わりに、insertRow() メソッドと insertCell() メソッドを直接使用し、より多くの安全な実装。

以上が特定のフィールドを除外し、インジェクションの脆弱性を回避しながら、jQuery を使用して JSON データを HTML テーブルに変換するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。