Comment remplir les tables div et dropdownboxes avec JSON et Javascript?

Question

Je suis assez nouveau à JavaScript si nue avec moi. J'ai essayé de peupler des tables div avec des données JSON factices mais je n'arrive pas à le faire. Ce que je veux faire est d'afficher certaines données en fonction de la sélection dans une liste déroulante. Aussi, je dois créer une nouvelle ligne avec une nouvelle liste déroulante quand un élément est sélectionné. Pourriez-vous me donner quelques conseils sur la meilleure façon de le faire? Je suis capable de créer quelque chose de proche de ce dont j'ai besoin dans Angular mais j'en ai besoin en JavaScript pur. Merci d'avance!

structure of my div tables

Answer 1

Supposons que dans données vous avez objet 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"] 
}]; 

et que vous voulez remplir tous les auteurs objet JSON ci-dessus à table et num dans l'élément de menu déroulant respectif de la table rangée. Puis populateHTML() fonction remplir l'objet à la table et num dans l'élément déroulant respectif de la ligne de table comme indiqué dans l'image ci-dessous.

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

Ceci peut être réalisé avec le code suivant: Vous pouvez également consulter un exemple: 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>