How do you access Multidimensional-Array properties from dropdown selection

Question

I am working on an assignment for my JS class and I am trying to figure out how to access a specific property from an array based on user selection from a drop down menu. (I tend to try things that are ahead of what we are studying and get stuck in these binds)

First off I don't know what to actually call this data. Dataframe? Subset? Map? Array? Multi property object list? (after creating tags for this post I am wondering if this is a multidimensional-array)

I apologize if it is not described well.

So far I have been able to access the each property directly but have not figured out how to do that through the user select menu. I added ids to the value attribute for the options but don't know how to use that to access the rest of the properties after selection.

Here is my script

const flavors = [
    {
        "flavor":"Tangy Taro Eggy",
        "description":"",
        "img_src":"images/tangy-taro-eggy.jpg",
        "id": 1
    },
    {
        "flavor":"Beetle Bark Raspberry",
        "description":"",
        "img_src":"images/beetle-bark-raspberry.jpg",
        "id": 2
    },
    {
        "flavor":"Cali CBD-licious Creme",
        "description":"",
        "img_src":"images/cali-cbd-licious-creme.jpg",
        "id": 3
    },
    {
        "flavor":"Durian Delight",
        "description":"",
        "img_src":"images/durian-delight.jpg",
        "id": 4
    },
    {
        "flavor":"Vanilla",
        "description":"",
        "img_src":"vanilla.jpg",
        "id": 5
    }
];     
var select = document.getElementById("flavor_list"); //this is the id for <select> element in my HTML

flavors.forEach(function populate_list(item){
    var option = document.createElement('option');
    var img_src =flavors.img_src; //This one doesn't do anything becuase the value isn't read (which I don't know what that means) 
    //I tried defining this variable outside of the function as well but the alert still doesnt work
    option.value = item.id; // I created unique values for each option but don't know how to use them to get more info
    option.innerHTML = item.flavor;
    select.appendChild(option)
})
select.onchange = function fetch_info() {
   alert(this.img_src) // this is just a test to see if I got the info. 
//Once I figure this out I will be able to complete there rest of the assignment
}

It would be best to stick with just JS and not use Jquery or anything like that because we haven't learned any of that yet.

I appreciate any help

Kevin

fayzzzm · Accepted Answer · 2021-03-01 21:25:41Z

1

Maybe to get it's value as an id and loop through the array and find the exact flavor...

Example:

select.onchange = function (e) {
     const id = e.target.value;
    
   // find the set which has this id, as you have passed the option value your id
   const flavor = flavors.filter(({ id: flavorId }) => +id === flavorId)[0];
   
   console.log(flavor) // this is just a test to see if I got the info. 
//Once I figure this out I will be able to complete there rest of the assignment
}

EDIT: Be sure that, you flavor id is unique.

edited Mar 1, 2021 at 21:25

answered Mar 1, 2021 at 19:41

fayzzzm

243 bronze badges

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

7 Comments

Kevin McGreal Over a year ago

This doesn't seem to work. Console is returning [{…}]. Any other ideas?

fayzzzm Over a year ago

Am i right, when select changes you want get an object with the data ? If so, answer is updated, could you check it please ?

Kevin McGreal Over a year ago

Yes I would like to get data from the array based on the value from the selection. So if it selection returns a 1 for the id I can pull the name, image and description and display it below. And yes I will check again, thank you for you help

Kevin McGreal Over a year ago

Now it is coming back undefined. is flavorID supposed to be from the array or is that unique to the function you wrote?

fayzzzm Over a year ago

flavorId is comming from array which i have distructed. Could you check this link jsfiddle.net/tzokwp1s/6

|

Collectives™ on Stack Overflow

How do you access Multidimensional-Array properties from dropdown selection

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related