AJAX JSON HTML JS 如何输出数据表？

Question

HTML：

    <table>
        <tr>
            <th>Student Name</th>
            <th>Student Grades</th> 
        </tr>
        <tr>
            <td>
                <select name="dropdown" id="dropdown">
                    <option> - </option>
                    <option id = "StudentA"> Student A </option>
                    <option id = "StudentB"> Student B </option>
                </select>
            </td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>
                <select name="dropdown" id="dropdown">
                    <option> - </option>
                    <option id = "StudentA"> Student A </option>
                    <option id = "StudentB"> Student B </option>
                </select>
            </td>
            <td></td>
            <td></td>
        </tr>
     </table>

JSON：

{"students":
[ {"studentName" : "studentA", "studentGrades" : "gradeC"}, {"studentName" : "studentB", "studentGrades" : "gradeA+"}, 
]
}

当我选择学生A的下拉选项时，如何使学生成绩自动显示在表格上？

我只解析了响应文本并做了一个控制台日志并完成了它，我让所有学生都在控制台日志上，但不确定如何使用选择选项下拉列表来完成它。

Answer 1

您可以尝试以下方法来实现此目的。在选择标签上添加 onchange 事件，并根据所选选项更新成绩列。

完整的工作代码：

const data = {
  "students": [{
    "studentName": "studentA",
    "studentGrades": "gradeC"
  }, {
    "studentName": "studentB",
    "studentGrades": "gradeA+"
  }, ]
}

function showGrades() {
  const dropdowns = document.querySelectorAll('#dropdown')
  dropdowns.forEach(dropdown => {
    const selectedVal = dropdown.options[dropdown.selectedIndex].id
    const formattedVal = selectedVal.charAt(0).toLowerCase() + selectedVal.slice(1)
    const grades = data.students.map(item => {
      if (item.studentName == formattedVal) {
        dropdown.parentElement.parentElement.children[1].innerText = item.studentGrades;
      }
    })
  })


}

<table>
  <tr>
    <th>Student Name</th>
    <th>Student Grades</th>
  </tr>
  <tr>
    <td>
      <select name="dropdown" id="dropdown" onchange="showGrades()">
        <option> - </option>
        <option id="StudentA"> Student A </option>
        <option id="StudentB"> Student B </option>
      </select>
    </td>
    <td></td>
  </tr>
  <tr>
    <td>
      <select name="dropdown" id="dropdown" onchange="showGrades()">
        <option> - </option>
        <option id="StudentA"> Student A </option>
        <option id="StudentB"> Student B </option>
      </select>
    </td>
    <td></td>
  </tr>
</table>

希望这就是您想要的工作方式。

Answer 2

您可以通过在 select 上触发 onchange 事件来实现此目的，然后使用 Array.filter() 方法过滤掉 Students 数组以获取所选选项 studentGrade.

工作演示：

const obj = {
  "students": [
    {"studentName" : "studentA", "studentGrades" : "gradeC"},
    {"studentName" : "studentB", "studentGrades" : "gradeA+"}, 
  ]
};

function getGrades() {
  const selectedOption = document.getElementById('dropdown').value;
  document.getElementById('studentGrade').innerHTML = obj.students.find((obj) => obj.studentName === selectedOption).studentGrades;
}

<table>
        <tr>
            <th>Student Name</th>
            <th>Student Grades</th> 
        </tr>
        <tr>
            <td>
                <select name="dropdown" id="dropdown" onchange="getGrades()">
                    <option> - </option>
                    <option value="studentA"> Student A </option>
                    <option value="studentB"> Student B </option>
                </select>
            </td>
            <td id="studentGrade"></td>
        </tr>
     </table>