Javascript Ассоциативный массив, чтобы возвращать имена, связанные с характеристикой

Я пытаюсь написать код, где у меня есть поле ввода, и если бы я набрал «A», я бы получил имена всех учеников моего массива, которые заработали " А ". Я чувствую, что приближаюсь, но я просто не могу понять, что мне нужно сделать, чтобы сделать эту функцию кода. Любая помощь приветствуется.Javascript Ассоциативный массив, чтобы возвращать имена, связанные с характеристикой

<!DOCTYPE html> 
<html> 
<head> 
<title> Javascript </title> 


<script> 
var students = [ 
{name:"Lina",grade:"F"}, 
{name:"Fredrik",grade:"D"}, 
{name:"Sara",grade:"C"}, 
{name:"Lucia",grade:"B"}, 
{name:"Hans",grade:"A"}, 
{name:"Jonathan", grade: "A"} 
] 

gradesByLetter = ['A', 'B', 'C', 'D', 'F'].map(function(letter){ 
return students.filter(function(student){ 
return student.grade == letter; 
}); 
}); 

gradesByLetter.forEach(function(list){ 
list.forEach(function(student){ 
    document.getElementById(student.grade).innerHTML += "<li>" + student.name +  " (" + student.grade + ")" 
}); 
}); 


f1.addEventListener('submit', function(evt){ 
evt.preventDefault(); //ignore this for now but this will stop the error 
studentList.innerHTML += "<li>" + studentName.value + " (" + grade.value + ")" 
}); 


</script> 
</head> 


<body> 
<h1>Min Rubik</h1> 
<form id="f1"> 
    <input type="text" id="studentName" placeholder="Student Name"> 
    <input type="text" id="grade" placeholder="Grade"> 
    <input type="submit" value="Add"> 
</form> 
<h2>Students:</h2> 
<ul id="studentList"> 
    <ol id="A"></ol> 
    <ol id="B"></ol> 
    <ol id="C"></ol> 
    <ol id="D"></ol> 
    <ol id="F"></ol> 
</ul> 
</body> 
</html>

источник

2015-02-26 hartjacko

Этот вопрос не является конструктивным. Вы просите нас сделать домашнее задание для вас, и здесь нет особых усилий. –

Я только начал изучать этот материал на прошлой неделе и поставил на этот счет бесконечные часы. Мне жаль, если это не похоже на «много видимых усилий», но я был раб, пытаясь понять это. – hartjacko

Прошу прощения за то, что вы не прилагаете никаких усилий в проект. Я опубликовал решение, которое делает то, о чем вы просили. Пожалуйста, отметьте это как принятый ответ, если вы сочтете это полезным. Благодарю. –

-1

Вот ответ, если вы оставите класс пустым, он покажет всех учеников.

<!DOCTYPE html> 

<html> 
<head> 
<title>Javascript</title> 

</head> 

<body> 

<h1>Min Rubik</h1> 
<form id="f1"> 
    <input type="text" id="studentName" placeholder="Student Name"> 
    <input type="text" id="grade" placeholder="Grade"> 
    <input type="button" id="click_me" value="Add"> 
</form> 
<h2>Students:</h2> 
<ul id="studentList"> 
</ul> 

<script> 

var students = [ 
    {name:"Lina",grade:"F"}, 
    {name:"Fredrik",grade:"D"}, 
    {name:"Sara",grade:"C"}, 
    {name:"Lucia",grade:"B"}, 
    {name:"Hans",grade:"A"}, 
    {name:"Jonathan", grade: "A"} 
]; 

function clickHandler() { 
document.getElementById("studentList").innerHTML = ""; 
students.forEach(function(student) { 
    if ((student.grade == document.getElementById("grade").value || document.getElementById("grade").value == "") && 
     (student.name.toLowerCase() == document.getElementById("studentName").value.toLowerCase() || document.getElementById("studentName").value == "")) { 
     document.getElementById("studentList").innerHTML += "<li>" + student.name + " (" + student.grade + ")" 
    } 
}); 
} 

document.getElementById("click_me").addEventListener('click',clickHandler); 

</script> 

</body> 
</html>

источник

2015-02-27 15:29:35

Я полагаю, что это ответ, но ожидая, что OP будет играть «разницу», не включен. – Alnitak

Да, действительно, это правильное решение его проблемы. Все, что вы сделали, это указать на очевидное, а не на правильное. Если он не может понять этот простой код, тогда он должен уйти, пока он впереди. –

Я _explained_ источник его проблемы. Возьмите это от меня, ответы, которые не имеют ничего, кроме кода, и никакие объяснения не оскверняются здесь. – Alnitak

Javascript Ассоциативный массив, чтобы возвращать имена, связанные с характеристикой

ответ

Смежные вопросы