어떻게 자바 스크립트를 사용하여 드롭 다운 선택에 따라 JSON 파일을 HTML 테이블로 파싱합니까?

Question

일부 개체가 포함 된 JSON 파일이 있습니다. 드롭 다운 선택에 따라 개체를 채우시겠습니까? 드롭 다운에 "레벨"값이 모두 포함되어 있으며 사용자 선택과 동일한 "레벨"값이 포함 된 개체 만 표시해야합니다. 이 당신에게 당신이 찾고있는 결과를 얻을해야

https://fiddle.jshell.net/agbpr021/

for (var i = 0; i < allData.length; i++) { 
    var x = document.getElementById("level").value; 
    if(x = allData.level) 
     tr = table.insertRow(-1); 
     for (var j = 0; j < col.length; j++) { 
      var tabCell = tr.insertCell(-1); 
      tabCell.innerHTML = allData[i][col[j]]; 
     } 
    } 
      // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER. 
    var divContainer = document.getElementById("showData"); 
    divContainer.innerHTML = ""; 
    divContainer.appendChild(table); 

Answer 1

다음 링크를 참조하시기 바랍니다. 아마도이 일을보다 효율적으로 수행 할 수있는 방법, 특히 테이블에 대한 html을 만드는 방법이 있지만 원하는 출력을 제공해야합니다.

function CreateTableFromJSON() 
 
{ 
 
    // only included this so snippet would work 
 
    allData = [ 
 
    { "Level": "a", "Country": "Unknown", "Currency": "USD" }, 
 
    { "Level": "a", "Country": "All", "Currency": "BRL" }, 
 
    { "Level": "b", "Country": "All", "Currency": "EUR" }, 
 
    { "Level": "c", "Country": "All", "Currency": "EUR" }, 
 
    { "Level": "d", "Country": "None", "Currency": "EUR" } 
 
    ] 
 
    
 
    var x = document.getElementById("Levels").value; 
 
    var index = -1; 
 
    for (var i = 0; i < allData.length; i++) { 
 
     if (allData[i].Level == x) 
 
      index= i; 
 
    } 
 

 
    var html = ""; 
 
    if (index != -1) { 
 
     // probably a better way to do this portion 
 
     html = "<table><thead><tr><th>Level</th><th>Country</th><th>Currency</th></tr></thead><tbody><tr>"; 
 
     html += "<td>" + allData[index].Level + "</td>"; 
 
     html += "<td>" + allData[index].Country + "</td>"; 
 
     html += "<td>" + allData[index].Currency + "</td>"; 
 
     html += "</tr></tbody></table>"; 
 
    } else { 
 
     html = "Please make a selection"; 
 
    } 
 

 
    // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER. 
 
    var divContainer = document.getElementById("showData"); 
 
    divContainer.innerHTML = html; 
 
}

<p>levels</p> 
 
<select id="Levels"> 
 
    <option value="Null" id="m">Choose level</option> 
 
    <option value="a" id="A">a</option> 
 
    <option value="b" id="B">b</option> 
 
    <option value="c" id="C">c</option> 
 
    <option value="d" id="D">d</option> 
 
</select> 
 
<br /><br /> 
 
<!--Button--> 
 
<input type="button" onclick="CreateTableFromJSON()" value="Go" /> 
 
<div id="showData"></div> 
 
<br> \t

편집 : 나는이 처리하는 진짜 똑똑한 사람들이 함께 넣어 가지고 도구를 언급하고 싶었다. React, Vue 및 Angular는 이러한 유형의 도구를위한 도구가있는 몇 가지 예입니다.

편집 : ALLDATA