Javascript use string to access object with the same name

Question

I am having the following array of objects:

const allItems = [];

const item1 = {"name":"Item 1","var":"item1","tooltip":"xxxxx","image":"/images/xxxx"};
allItems.push(item1);
const item2 = {"name":"Item 2","var":"item2","tooltip":"xxxxx","image":"/images/xxxx"};
allItems.push(item2);
const item3 = {"name":"Item 3","var":"item3","tooltip":"xxxxx","image":"/images/xxxx"};
allItems.push(item3);

In my console, i successfully get allItems and individual objects like item1 and I am getting attributes such as item1.name, item.image and so on.

I display these in a under using jQuery

allItems.forEach((q) =>{
    $('#select-field').append('<option value="' + q.var + '">' + q.name + '</option>');
 })

Now, .var attribute is deliberately the same name as the variable of the object ( const item1 ) because I am not sure how to call the const item1 by name in my <option value=""> . I've tried with allItems[q] but this brings the whole object and not its const [Object]

After that I want to read the object's attributes and do stuff with them (like I have a function that will create an image and put a tooltip called createImage() ) by calling them from my <option value=""> .

The idea is that the value of my option is item1 for example. I know this is just a string at this point and I want to access the object with the same name and start accessing its attributes.

$(function() {
     $("#select-field").change(function() {
     let currentlySelectedItem = $(this).val(); // this successfully gets the value name which is the same as the object
// Now I want to call the object currently selected and access its properties
     console.log(currentlySelectedItem[tooltip]); // Undefined
     createImage(currentlySelectedItem.tooltip, currentlySelectedItem.image); // Undefined
     console.log(currentlySelectedItem); // Undefined
    });
 });

I've read all the similar questions and I can't use eval() and suggestions like these Javascript use variable as object name will also not work for me.

Spent hours trying so I'd really appreciate some help with this.

Answer 1

You can use Array.filter to get the corresponding object by checking its var property:

 const allItems = []; const item1 = { "name": "Item 1", "var": "item1", "tooltip": "xxxxx", "image": "/images/xxxx" }; allItems.push(item1); const item2 = { "name": "Item 2", "var": "item2", "tooltip": "xxxxx", "image": "/images/xxxx" }; allItems.push(item2); const item3 = { "name": "Item 3", "var": "item3", "tooltip": "xxxxx", "image": "/images/xxxx" }; allItems.push(item3); $(function() { $("#select-field").change(function() { let currentlySelectedItem = $(this).val(); // this successfully gets the value name which is the same as the object const correspondingObject = allItems.filter(e => e.var == currentlySelectedItem); console.log(correspondingObject); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="select-field"> <option value="item1">Item1</option> <option value="item2">Item2</option> <option value="item3">Item3</option> </select>