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.

score 1 · Accepted Answer · answered Jul 17 '21 at 00:23

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>

Thank you very much! Exactly what i needed. – Djongov Jul 17 '21 at 18:49 — Djongov, Jul 17 '21 at 18:49

Javascript use string to access object with the same name

1 Answers1