AJAX JSON HTML JS Как вывести таблицу данных?
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+"},
]
}
как сделать так, чтобы когда я выбираю раскрывающийся список ученика А, его оценки автоматически отображались в таблице?
я только проанализировал текст ответа и сделал журнал консоли и сделал это. У меня есть все студенты в журнале консоли, но я не совсем уверен, как это сделать с помощью раскрывающегося списка выбора.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вы можете попробовать следующий подход, чтобы добиться этого. Добавьте событие 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>Надеюсь, это то, как вы хотели, чтобы это сработало.
Я предполагаю, что это из-за неуникальных идентификаторов. Когда есть несколько строк и столбцов, каждый td (для раскрывающегося списка и оценки) должен иметь уникальный идентификатор, который вы можете использовать внутри функции showGrades. Прямо сейчас все select и td имеют одинаковые идентификаторы id = "dropdown" и id = "grades"
извините, но кажется, что я не мог найти никакого решения. Можете вы помочь мне?
пожалуйста, обновите свой вопрос с помощью html, который вы используете в настоящее время (с несколькими строками). Таким образом, будет легче предоставить точное решение
@IlIlIIIlllIlI Я обновил свой ответ в соответствии с обновленным вопросом. Пожалуйста, проверьте. Обновленный код должен решить проблему
Вы можете добиться этого, вызвав событие onchange при выборе, а затем отфильтровав массив студентов, используя метод Array.filter(), чтобы получить выбранный вариант 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>Привет, кажется, что это работает, но когда у меня есть 2 строки, они как-то застревают, есть идеи, как это исправить?
Вместо строк вы добавляете два столбца, поэтому он не работает: <tr> — это строка, а <td> — это столбец. Вы должны удалить лишние <td> в своем коде.
Кажется, это работает, но когда у меня есть 2 строки, 2-я строка не работает. Любая идея, как мне это сделать?