Как заполнить таблицы div и выпадающие окна с помощью JSON и Javascript?

Question

Я довольно новичок в JavaScript, так голый со мной. Я пытался заполнить таблицы div фиктивными данными JSON, но я не могу это сделать. Я хочу, чтобы отображать определенные данные в зависимости от выбора в выпадающем списке. Также мне нужно создать новую строку с новым dropdownbox при выборе элемента. Не могли бы вы дать мне несколько советов о том, как лучше всего это сделать. Я могу создать что-то близкое к тому, что мне нужно в 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"] 
}]; 

, и вы хотите, чтобы заполнить все авторы в выше объекта JSON в таблице и NUM в соответствующем раскрывающемся списке элемент таблицы-строки. Затем после populateHTML() функция заполняет объект в таблицу и num в соответствующий раскрывающийся элемент таблицы-строки, как показано на рисунке ниже.

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>