divテーブルとドロップダウンボックスにJSONとJavascriptを挿入するにはどうすればよいですか？

Question

私はJavaScriptにはとても慣れていて、私と一緒に裸でいます。私は、ダミーのJSONデータをdivテーブルに取り込もうとしていましたが、私はそれを行うように見えません。私がしたいことは、ドロップダウンボックスの選択に応じて特定のデータを表示することです。また、アイテムが選択されたときに新しいドロップダウンボックスで新しい行を作成する必要があります。それを行う最良の方法は何かアドバイスをお願いします。私はAngularで必要なものに近いものを作成することができますが、私はそれを純粋なJavaScriptで必要とします。前もって感謝します！

structure of my div tables

Answer 1

あなたはJSONオブジェクト

var data = [ 
{ 
    "line": "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it.", 
    "author": "Brian W. Kernighan", 
    "num" : ["1","2","3"] 
}, 
{ 
    "line": "Walking on water and developing software from a specification are easy if both are frozen.", 
    "author": "Edward V Berard", 
    "num" : ["5","0","15"] 
}, 
{ 
    "line": "It always takes longer than you expect, even when you take into account Hofstadter's Law.", 
    "author": "Hofstadter's Law", 
    "num" : ["15","222","301"] 
}]; 

を持っていて、テーブルの行のそれぞれのドロップダウン要素にテーブルとNUMに上記のJSONオブジェクト内のすべての著者を移入したいデータであるとします。次に、populateHTML（）関数は、次の図に示すように、オブジェクトをtableに、numをtable-rowのそれぞれのドロップダウン要素に挿入します。

function populateHTML(data) {  
    if (typeof(data) == 'object') { 
     document.write('<table>'); 
     for (var i in data) { 
      document.write('<tr><td>'+data[i].author+'</td><td><select>'); 
      for(var j in data[i].num){ 
       document.write('<option>' +data[i].num[j]+ '</option>'); 
      } 
      document.write('</select></td></tr>'); 
     } 
     document.write('</tr></table>'); 
    } else { 
     document.write(' => ' + data); 
    } 
} 

Answer 2

これは、次のコードで実現することができます。また、ここでの例を確認することができます。http://skillcram.com/JS_DivTable.htm

<script type="text/javascript" > 

function populateTable() {  

    var tableData = { 
     products : [ 
      {"id": 100,"name":"Laptop", "qty":1,"status": ["Delivered","Damaged","Missing"]}, 
      {"id": 200,"name":"Monitor", "qty":2,"status":["Refused","Partial"]} 
     ] 
    } 

    var tableBody = document.getElementsByClassName("divTableBody"); 


    for (i in tableData.products){ 

     tableBody[0].innerHTML += "<div class=\"divTableRow\"> " + 
     "<div class=\"divTableRowCell\">"+ tableData.products[i].id +" </div> " + 
     "<div class=\"divTableRowCell\">"+ tableData.products[i].name +" </div> " + 
     "<div class=\"divTableRowCell\">"+ tableData.products[i].qty +" </div> "+ 
     "<div class=\"divTableRowCell\">"+ getSelectHTMl(tableData.products[i].status) + 

     " </div> "+ 
     "</div>"; 

    } 


} 

function getSelectHTMl(status) { 

    selectHTMlStr = "<select> "; 

    for (j in status){ 
     selectHTMlStr +=    
     "<option value=\""+ status[j]+ "\" id=\"itemStatus\" >"+status[j]+ " </option>" ; 

    } 

    selectHTMlStr += "</select>" ; 
    return selectHTMlStr; 
} 
</script>