クライアントサイドでJSONデータを使用するベストプラクティス（JavaScript）

Question

私はいくつかのjsonデータ（ユーザ情報など）をダンプするREST APIを持っています。 、

1. 構造のHTMLテーブルのlibをグラフいくつかのJSを使用して
2. PLATグラフ、
は、いくつかのフィールドの上にいくつかの計算を行うと、再びそれらを表示する：今、私はにそのデータを使用する必要があります。

本質的に、そのデータに対して何らかの処理を行い、洗練されたフォームを表示する必要があります。

私はjavascriptを初めて使用しており、htmlを構築するベストプラクティスを理解しようとしていますか？私はAJAX呼び出しと成功の一部を作るためにjqueryのを使用しています

は次のようになります。私は受け付けておりJSONが巨大であるため、今

success:function(data){ 
    $('#show_data_here').empty(); 
    generated_html = construct_html(data); 
    $('#show_data_here').html(generated_html); 
} 

は、construct_html(data)機能は本当に醜いなっている（800行） 1ページに表示するalot（〜10）グラフがあります。この問題にアプローチするにはよりよい方法がありますか？

Answer 1

まず、各タスクを実行する関数に分解してみてください。 その後、各タスク内にサブタスクが存在する可能性があります。それらをもう一度壊す。

success:function(data){ 
    constructTable(data.tableData); 
    grabLib.create(data.graphData); 
    updateCalculations(data.tableData); 
} 

function constructTable(data) 
{ 
    var html = ''; 
    // foreach 
    $('table tbody').empty().html(html); 
} 

// etc 

Idealyあなたはあなたのためのタスクを実行することができ、オブジェクトを扱うことにしたいだろうが、あなたの最初のステップは、機能を破壊することになります。より小さなチャンクに分割する。

Answer 2

構築しているhtmlのタイプに応じて、JsRenderのようなテンプレートフレームワークの使用を検討するとよいでしょう。

あなたが構築しているhtmlが明確なパターンに従っているなら、これは行く方法かもしれません。