JSONデータを使用してHTMLでドロップダウンリストを作成する

私は学生であり、非常に新しいコードです。 HTMLとCSSを使用してドロップダウンリストを作成しましたが、JSONのデータを使用してそのデータを設定しようとしています。これは私のHTMLコードです：JSONデータを使用してHTMLでドロップダウンリストを作成する

<div class="dropdown"> 
    <button class="dropbtn">Choose your area</button> 
    <div class="dropdown-content"> 
    <a href="#">Place 1</a> 
    <a href="#">Place 2</a> 
    <a href="#">Place 3</a> 

    </div> 
</div>

私は 'Place 1'、 'Place 2'などを150個の実際の場所名で置き換えようとしています。これらはJSONにあります：

"areaNames": [ 
{ 
    "A": 1, 
    "B": "Barking & Dagenham" 
}, 
{ 
    "A": 2, 
    "B": "Barnet" 
},

などです。 JSONの場所名を 'Place 1'、 'Place 2'などの場所に配置するにはどうすればよいですか？私は同様のチュートリアルに応じてアドバイスに従ってみましたが、単純な場所の一覧ではなく、いくつかの個別のドロップダウンボックスの一覧を表示しているようです。

ありがとうございました。

出典

2017-04-02 wiggo

'javascript'タグを追加したので、これまでに試したJavaScriptコードも含めてください。デバッグや改善に役立ちます。 – ITWitch

コードにドロップダウンが表示されません。

目的を達成するために、JavaScriptライブラリであるjQueryを使用できます。

HTML：

<select id="sel"> 

</select>

JavaScriptを：純粋なJSと

$(function() { 
    var data = [ 
     { 
     "id": "1", 
     "name": "test1"}, 
    { 
     "id": "2", 
     "name": "test2"} 
    ]; 
    $.each(data, function(i, option) { 
     $('#sel').append($('<option/>').attr("value", option.id).text(option.name)); 
    }); 
})

出典

2017-04-02 08:38:09 jjj

ここで働いている例。

var areaNames = [ 
 
    { 
 
    "A": 1, 
 
    "B": "Barking & Dagenham", 
 
    "C": "https://google.com" 
 
    }, 
 
    { 
 
    "A": 2, 
 
    "B": "Barnet", 
 
    "C": "https://google.com" 
 
    } 
 
] 
 

 
var dropdownContent = document.querySelector('.dropdown-content'); 
 

 
for (i = 0; i < areaNames.length; i++) { 
 

 
    var element = areaNames[i]; 
 

 
    var htmlToAppend = document.createElement('a'); 
 
    htmlToAppend.innerHTML = element.B; 
 
    htmlToAppend.href = element.C; 
 
    
 
    dropdownContent.appendChild(htmlToAppend); 
 
}

a { 
 
    display: block; 
 
}

<div class="dropdown"> 
 
    <button class="dropbtn">Choose your area</button> 
 
    <div class="dropdown-content"> 
 

 
    </div> 
 
</div>

出典

2017-04-02 08:50:53 loelsonk

私はあなたのjavascriptのデータにアクセスすることができますので、あなたはすでにDOMでJSONデータをロードしていると信じています。 jQuery、AngularJS、プレーンなJavascriptのようなJavaScriptライブラリやフレームワークを使用していますか？ JavaScriptコードを拡張子.jsのファイルに外部で整理し、<script>タグを<head>または<body>セクション内に使用してHTMLにロードする方が常に良いです。

手順HTMLに動的にアンカータグを生成する：

オプションが含まれます親HTML要素を追跡作成/ DOMオブジェクト（ジャバスクリプト）
にJSONからデータを取得します。変数にこの参照を保持します。 JSON
からアクセスされるデータ配列（またはオブジェクト）へ
反復を繰り返し、各データ値に使用されるHTML要素を作成し、各反復
内の関連プロパティの値を取得します。この場合、テンプレートは 'value'でなければなりません
上記の＃2に格納された親要素にこの生成コードを追加します。
反復が完了したら、親要素を適切な場所のDOMに挿入（追加）します。

ケース1：プレーンジャバスクリプト -

使用XHR JSONを読み込み、変数にデータを取得します。名前をJSONDataにします。

JavaScriptで作成された親要素の参照をHTML内に保持します。

//このクラス名に一つだけの要素を持っているか、

//懸念要素は、このHTMLコード内でこのクラス名による最初の要素であることを願って。

//一般的に、我々はjavascriptのコード内で、個別の要素を識別するためのIDを使用する必要があるのいずれかをお勧め、そのための

//それ以外の使用、特定の識別子として。

var parentDropdownContainer = document.getElementsByClassName（ 'dropdown-content'）[0]; JSONデータで

反復処理

for (var counter = 0, len = JSONData.length - 1; counter < len; counter ++){ 
    //we will add logic to generate HTML 
}

あなたは、反復の他の変異体を使用することができます - 中のため、しばらく、Array.splice（）などご理解件まで。

このイテレータの中で、私たちは、HTMLコードを作成して、今、このドロップダウンで必要なダイナミックなオプションをレンダリングする必要があり、親コンテナ

for (var counter = 0, len = JSONData.length - 1; counter < len; counter ++){ 
    var currentData = JSONData[counter]; //this holds the reference of the current data in this iteration 
    var dropdownElement = document.createElement('a'); 
    dropdownElement.setAttribute('href','#'); //this adds the href attribute into the anchor element. 
    //lets add another attribute to the anchor element to represent the dynamic id/value associated with this data 
    dropdownElement.setAttribute('data-value',currentData.A); 
    //lets add the value inside the anchor element 
    dropdownElement.innerHTML = currentData.B; 
    //lets append this element to the parent container 
    parentDropdownContainer.appendChild(dropdownElement); 
}

にそれを追加する必要があります。

出典

2017-04-02 09:43:50 GeeDee

JSONデータを使用してHTMLでドロップダウンリストを作成する

答えて

関連する問題