AJAX JSON HTML JS How to output data table?

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+"}, 
]
}

how to make when i select a drop down option of student A then student grades will automatically show on the table ?

i only did parse responsetext and did a console log and got it done i have all the students on the consolelog but not exactly sure how to do it with the select option dropdown.

Answer 1

You can try the below approach to achieve this. Add an onchange event on the select tag and based on the selected option update the grades column.

Full working code:

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>

Hope that's how you wanted it to work.

Answer 2

You can achieve it by triggering a onchange event on select and then filtered out the students array using Array.filter() method to get the selected option studentGrade.

Working Demo :

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>