How to access a nested Object inside a Map() Object?

I want to create a dropDown menu <select> and fill it with the keys of the students, and when the user clicks on an option (key/student name)=> I want the grades of that student to be printed on the page

JavaScript

var student = new Map();

student.set("Marina", {
    Grades: [
        { Coursename: "JavaScript", Grade: "Excellent" },
        { Coursename: "Jquery", Grade: "Good" },
        { Coursename: "CSS", Grade: "V.Good" }]
});

student.set("Mariam", {
    Grades: [
        { Coursename: "JavaScript", Grade: "Good" },
        { Coursename: "Jquery", Grade: "Good" },
        { Coursename: "CSS", Grade: "V.Good" }]
});

HTML

    <select id="dropdown">
        <option id="std1">Marina </option>
        <option id="std2"> Mariam </option>
    </select>
    <p id="grades"></p>

I want to create a function that appends students’ grades to the <p id="grades"></p> when the student’s name is selected from the dropdown menu …

Do you have any other code you can show us? You have created a data structure to store the grades for each student. Where is your code for creating the <select>? Are you going to do this completely in JS or are you going to have the <select> in HTML and then just populate it with JS? I think we need you to give us a little more information on what you are trying to do and also all of the code you have tried so far. It doesn’t have to work, we can help you fix it, but we don’t typically write code for people here, so you need to at least get something started that you can show us.

1 Like

Thank you so much for your reply , This is the HTML code:

    <select id="dropdown">
        <option id="std1">Marina </option>
        <option id="std2"> Mariam </option>
    </select>
    <p id="grades"></p>

I want to create a function that appends students’ grades to the <p id="grades"></p> when the student’s name is selected from the dropdown menu …

Thank you for the additional info.

Do you know how to listen for events in JS? You’ll want to listen for the change event on the select list. You’ll create a handler function that will grab the student’s grade info from the object and put it in the <p>.

JavaScript Event Handlers – How to Handle Events in JS

1 Like

Is it the DOM stuff you are asking about, or how to get to the Map data?

Here is a super simple example you can look at just in case.
https://jsfiddle.net/rtshLpq6/

1 Like