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.

Ankit Saxena · Accepted Answer · 2022-03-23 07:40:52Z

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.

edited Mar 23, 2022 at 7:40

answered Mar 23, 2022 at 5:43

Ankit Saxena

1,1971 gold badge8 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

IlIlIII lllIlI Over a year ago

Seems like it works but when i have 2 rows the 2nd row didnt work. any idea how do i do that?

Ankit Saxena Over a year ago

My guess it's because of non unique ids. When there are multiple rows and columns, each td (for dropdown and grade) should have a unique id which you can use inside showGrades function. Right now all select and td's have same ids id = "dropdown" and id = "grades"

IlIlIII lllIlI Over a year ago

sorry but it seems that i could not find any solution. Can you help me?

Ankit Saxena Over a year ago

pls update your question with the html that you are using currently(with mutiple rows). That way it will easier to provide an exact solution

Ankit Saxena Over a year ago

@IlIlIIIlllIlI I have updated my answer as per the updated question. Please check. The updated code should fix the issue

Rohìt Jíndal · Accepted Answer · 2022-03-23 07:15:51Z

0

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>

answered Mar 23, 2022 at 7:15

Rohìt Jíndal

27.4k16 gold badges80 silver badges133 bronze badges

2 Comments

IlIlIII lllIlI Over a year ago

Hi it seems that it works but when i have 2 rows it somehow stuck, any idea how i fix this?

Rohìt Jíndal Over a year ago

Instead of rows you are adding two columns that's the reason it was not working <tr> is row and <td> is a column. You should remove extra <td> in your code.

Collectives™ on Stack Overflow

AJAX JSON HTML JS How to output data table?

2 Answers 2

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related