HTMLページのリストを動的に生成する方法

Question

この質問をする前に、リストに要素を動的に追加する方法に関する既存の回答を検討し、ニーズに合ったソリューションを試すためにいくつか取り入れました。しかし、リストには決してデータが入力されていないようです。私は問題が要素を追加するためにリストにアクセスすることに関連しているかもしれないと思っていますが、私は完全にはわかりません。

私のHTML：私は、HTMLファイル内の他のJavaScript関数を呼び出しています、と私は関数が呼び出されることを確認している

<div class="row" id="row"> 
<div class="col-sm-4" id="faculty"> 
    <h3> Faculty Decks </h3> 
    <ul id="faculty_list"> </ul> 
</div> 
<div class="col-sm-4"> 
    <h3> Instructions </h3> 
    <p> Select your decks, select front (questions) or back (answers) of the the card and start studying. </p> 
<div> 
    <input class="front" type="radio" name="card" id="front" value="Front"> Front &ensp;</input> 
    <input class="back" type="radio" name="card" id="back" value="Back"> Back</input> 
    <br /> 
    <br /> 
    <button> Start Studying </button> 
</div> 
</div> 
<div class="col-sm-4" id="student"> 
    <h3> Student Decks </h3> 
    <ul id="student_list"> </ul> 
</div> 

、引数は、私が期待するものであり、ループが適切に実行されます何度か。

これは私のJavascript機能である：

function populateLists(json) { 
    for (var i = 0; i < json.length; i++){ 
     //Create a new list element 
     var list_item = document.createElement('li'); 
     list_item.setAttribute('name', json[i].name); 

     //Create the checkbox to add to the list element 
     var select_checkbox = document.createElement('input'); 
     select_checkbox.type = 'checkbox'; 
     select_checkbox.id = json[i].deck_ID; 

     //Add the checkbox to the list element 
     list_item.appendChild(select_checkbox); 

     var list = document.getElementById('row').getElementById((json[i].faculty=='1')?'faculty':'student' + '_list'); 

     list.append(list_item); 
    } 
} 

Answer 1

はここに行きます！

var json={'a': 'First', 'b': 'Second', 'c': 'Third'}; 
 
function makeUL(json) { 
 
    // Create the list element: 
 
    var list = document.createElement('ul'); 
 

 
    for(var i = 0; i < Object.keys(json).length; i++) { 
 
     // Create the list item: 
 
     var item = document.createElement('li'); 
 

 
     // Set its contents: 
 
     item.appendChild(document.createTextNode(Object.values(json)[i])); 
 

 
     // Add it to the list: 
 
     list.appendChild(item); 
 
    } 
 

 
    // Finally, return the constructed list: 
 
    return list; 
 
} 
 

 
// Add the contents of json to #foo: 
 
document.getElementById('foo').appendChild(makeUL(json));

<div id="foo"></div>

Answer 2

それが適切なリストを見つけることはなかったように見えます。 getElementById呼び出しをチェーンできないというエラーが発生していたので、代わりにqueryselectorを使用しました。私はまた、読みやすさのためにリスト名を打ち明けました。私はObject.keysせずに、このようにそれを行うだろう

function populateLists(json) { 
 
for (var i = 0; i < json.length; i++){ 
 
    //Create a new list element 
 
    var list_item = document.createElement('li'); 
 
    list_item.setAttribute('name', json[i].name); 
 
    
 

 
    //Create the checkbox to add to the list element 
 
    var select_checkbox = document.createElement('input'); 
 
    select_checkbox.type = 'checkbox'; 
 
    select_checkbox.id = json[i].deck_ID; 
 

 
    //Add the checkbox to the list element 
 
    list_item.appendChild(select_checkbox); 
 
    
 

 
    var list_name = (json[i].faculty=='1')?'faculty':'student' + '_list'; 
 
    var list = document.querySelector('#row #' + list_name); 
 

 
    list.append(list_item); 
 
} 
 
} 
 

 
var data = [{"name": "abcd", "deck_ID": "a123","faculty":'1'},{"name": "bcde", "deck_ID": "a123","faculty":'1'},{"name": "cdef", "deck_ID": "a123","faculty":'1'}]; 
 
populateLists(data);

<div class="row" id="row"> 
 
<div class="col-sm-4" id="faculty"> 
 
    <h3> Faculty Decks </h3> 
 
    <ul id="faculty_list"> </ul> 
 
</div> 
 
<div class="col-sm-4"> 
 
    <h3> Instructions </h3> 
 
    <p> Select your decks, select front (questions) or back (answers) of the the card and start studying. </p> 
 
<div> 
 
    <input class="front" type="radio" name="card" id="front" value="Front"> Front &ensp;</input> 
 
    <input class="back" type="radio" name="card" id="back" value="Back"> Back</input> 
 
    <br /> 
 
    <br /> 
 
    <button> Start Studying </button> 
 
</div> 
 
</div> 
 
<div class="col-sm-4" id="student"> 
 
    <h3> Student Decks </h3> 
 
    <ul id="student_list"> </ul> 
 
</div>

Answer 3

：私はあなたが欲しいだろう推測しているのにここ

var dataObj ={'a': 'First', 'b': 'Second', 'c': 'Third'}; 
 
function createUL(json) { 
 
    /* Create the list element: */ 
 
    var list = document.createElement('ul'); 
 

 
    for (var key in dataObj) { 
 
     /* Create the list item: */ 
 
     var item = document.createElement('li'); 
 

 
     /* Set its contents: */ 
 
     item.appendChild(document.createTextNode(dataObj[key])); 
 

 
     /* Add it to the list: */ 
 
     list.appendChild(item); 
 
    } 
 

 
    /* Return the constructed list: */ 
 
    return list; 
 
} 
 

 
/* Add the contents of dataObj to #bar: */ 
 
document.getElementById('bar').appendChild(createUL(dataObj));

<div id="bar"></div>

Answer 4

は、作業例ですチェックボックスにテキストを追加するには（で簡単に行えますタグ）。 JSONオブジェクトを例として使用しました。このコードを使用するには、そのオブジェクトを削除し、JSONオブジェクトをpopulateLists()に渡します。

いくつかの変更は、私が作っ：

• Start Studyingボタン
• 追加行方不明</div>タグに.appendChild()
• 追加onclick属性に
• が.append()を変更チェーン.getElementById呼び出しを削除

var json = [ 
 
    {name: "Person1", 
 
    deck_ID: "Deck1", 
 
    faculty: "1" 
 
    }, 
 
    {name: "Person2", 
 
    deck_ID: "Deck2", 
 
    faculty: "1" 
 
    }, 
 
    {name: "Person3", 
 
    deck_ID: "Deck3", 
 
    faculty: "1" 
 
    } 
 
]; 
 

 
function populateLists() { 
 
    for (var i = 0; i < json.length; i++){ 
 
     //Create a new list element 
 
     var list_item = document.createElement('li'); 
 
     list_item.setAttribute('name', json[i].name); 
 

 
     //Create the checkbox to add to the list element 
 
     var select_checkbox = document.createElement('input'); 
 
     select_checkbox.type = 'checkbox'; 
 
     select_checkbox.id = json[i].deck_ID; 
 

 
     //Add the checkbox to the list element 
 
     list_item.appendChild(select_checkbox); 
 

 
     var list = document.getElementById((json[i].faculty=='1')?'faculty':'student' + '_list'); 
 

 
     list.appendChild(list_item); 
 
    } 
 
}

<div class="row" id="row"> 
 
<div class="col-sm-4" id="faculty"> 
 
    <h3> Faculty Decks </h3> 
 
    <ul id="faculty_list"> </ul> 
 
</div> 
 
<div class="col-sm-4"> 
 
    <h3> Instructions </h3> 
 
    <p> Select your decks, select front (questions) or back (answers) of the the card and start studying. </p> 
 
<div> 
 
    <input class="front" type="radio" name="card" id="front" value="Front"> Front &ensp;</input> 
 
    <input class="back" type="radio" name="card" id="back" value="Back"> Back</input> 
 
    <br /> 
 
    <br /> 
 
    <button onclick="populateLists();"> Start Studying </button> 
 
</div> 
 
</div> 
 
<div class="col-sm-4" id="student"> 
 
    <h3> Student Decks </h3> 
 
    <ul id="student_list"> </ul> 
 
</div> 
 
</div>