2016-05-10 7 views
0

私はオプションの種類、選択、ラジオ、テキサス、チェックボックスの多種多様なフォームを作成する方法を探しています。私はjQuery populate pluginやsuggestionsのようなスクリプトはここにありません。Using jQuery and JSON to populate forms?など多くのスタックポストがありますが、どれも多次元JSONデータを適切に処理するものはありません。これは、多次元JSONデータを使用してフォームに再作成する方法は?

var jsonData = { 
    "get_template": "clean", 
    "site_width": "1200px", 
    "layout_type": "full", 
    "main_contained": { 
     "picked": "contained", 
     "notcontained": { 
      "container_contained": "contained" 
     } 
    }, 
    "container_spacing": "25", 
    "columns_spacing": "25", 
    "sidebars_spacing": { 
     "horizontal": "50", 
     "vertical": "50" 
    }, 
    "headers": "menuright", 
    "menu_template": "menuinheader", 
    "toplevel_font": { 
     "font": "Open Sans|600|latin|uppercase|default", 
     "size": "12", 
     "letterspacing": "0", 
     "css": "font-family:'Open Sans',sans-serif;font-weight:600;font-style:normal;font-size:12px;text-transform:uppercase;", 
     "google_font_link": "Open Sans:600&subset=latin" 
    }, 
    "sublevel_font": { 
     "font": "Open Sans|regular|latin|none|default", 
     "size": "14", 
     "letterspacing": "0", 
     "css": "font-family:'Open Sans',sans-serif;font-weight:normal;font-style:normal;font-size:14px;", 
     "google_font_link": "Open Sans:regular&subset=latin" 
    }, 

    "footer_switch": 1, 
    "show_button": { 
     "picked": "hide", 
     "show": { 
      "button": { 
       "button_text": "Load more", 
       "html": "<div class=\"btn-container grid-item-more\"><a class=\"button btn-small radius-4 btn-border-1 align-center btn-trans\" href=\"#\"><span class=\"btn-text fs-13 fw-600\">more</span></a></div>", 
       "json": "{\"createButton\":\"on\",\"buttonTransition\":\"on\",\"buttonAnimation\":false}" 
      } 
     } 
    }, 
    "img-smaller": { 
     "max-width": "260", 
     "max-height": "145" 
    }, 
    "img-xsmall": { 
     "max-width": "120", 
     "max-height": "65" 
    }, 
    "img-related": { 
     "max-width": "350", 
     "max-height": "350" 
    }, 
    "custom_css": 0, 
    "disable_admin_bar": false, 
    "footer_section": { 
     "json": "[{\"type\":\"section\",\"shortcode\":\"section_e603095\",\"width\":\"\",\"_items\":[{\"type\":\"columns\",\"shortcode\":\"columns_a9ae4ee\",\"width\":\"1_3\",\"options\":{\"widget_name\":\"Widget 1\",\"widget_in_boxstyle\":{\"padding\":{\"top\":\"0\",\"right\":\"0\",\"bottom\":\"0\",\"left\":\"0\"}]" 
    } 

}; 

JSONデータIが取り扱っておりますの小さなサンプルであり、あなたが見ることができるようにフォームに値ほど上のテキスト、JSON、ブール値、およびを持つことができます。私は広告少なくとも私はちょうどチェックして道を得るかもしれない正しい方法で入力名を再構築するために、適切にループトラフこのJSONへの道を見つけることができれば

フォーム入力名は、このfw_options[link_color]またはfw_options[main_contained][picked]

のように接頭辞入力の種類とその値を設定します。

ご迷惑をおかけして申し訳ございません。

答えて

0

残念ながら、コードは混乱しますが、ここで行う必要があります。

  • 残念ながら、私はどこかにあなたがモックの変数を使用して、子と、以下のコードを自分自身を呼び出すことのみを提案することができますどのようにそれらのすべてのためのループに、図アウト:

    function jsonloop(looper){ //pass in object/array to loop through //code if(lastchild){ //if last child of the lower part upperchild++; //go to next child of upper part jsonloop(upperchild); } }

  • 使用instanceof

    if(json instanceof Array){ for(var item in json){ var jsonarray = json[item]; //do stuff } } else if(json instance of Object){ for(var item in json){ var jsonobject = json[item]; //do different stuff like below for(var name in jsonobject){ //loop through object properties //do other stuff } } }

:タイプをチェックします

これは模擬コードです。

そのまま使用しないでください。正常に終了しません。注:最終結果は、オブジェクトと配列の両方である"json": [{}]のようなもののためにおそらく半巨大になり、コードが爆弾になります。ここではいくつかの良いリソースは次のとおりです。

  • JSON name iteration
  • Convert to array

      (または有益であってもなくてもよいです)。
    • Find if json array(オブジェクトでも動作し、オブジェクトで置き換えてください)。

    幸運。すみません、もっとビルドできませんでした。

  • 関連する問題