How to use a variable string value to represent a Javascript object in a function's parameter?

Question

I have honestly spent the last week searching for this. I suspect I don't know the correct search terms to use, or maybe what I'm asking is impossible. It seems like a common use case, though, so it's probably the former.

I'm creating a page where a user can select their product from a drop-down menu to see software requirements. We have a ton of different possible products, and they all share similar requirements -- so we want to reuse values between them.

I'm very new to JavaScript, and have found template literals very helpful. Perhaps I overuse them because they are easy to understand, but I'm hoping to use them here as well.

To simplify this, I'm using "cups" instead of software/hardware as an example.

First, we have our various properties:

const color = {
  blue: "Blue",
  green: "Green"
};

const material = {
  plastic: "Hard Plastic",
  ceramic: "Glazed Ceramic",
};

const size = {
  oz_12: "12 ounces",
  oz_16: "16 ounces",
  oz_32: "32 ounces"
};

Then I have a variable for each product, e.g.:

const simple = {
  title: "Classic Cup Options",
  colors: `${color.blue}`,
  materials: `${material.ceramic}`,
  sizes: `${size.oz_12} and ${size.oz_16}`
}

And, finally, a function that returns all my variables in the format I want:

function tableTemplate(data) {
  return `<div class="cup-prod-table"><h4>${data.title}</h4>
<table class="cup-table">
<tbody>
  <tr>
    <td>Colors</td>
    <td>${data.colors}</td>
</tr>
  <tr>
    <td>Materials</td>
    <td>${data.materials}</td>
</tr>
  <tr>
    <td>Sizes</td>
    <td>${data.sizes}</td>
</tr>
</tbody>
</table>
</div>`;
};

When I call tableTemplate(simple), I get an HTML table with all my properties filled in.

Then, I have a drop-down menu with each possible product. The menu value corresponds to the constant name, so:

  <select id="demoSelect">
    <option value="simple">Classic Cup</option>
    <option value="travel">Traveler's Cup</option>
    <option value="jumbo">Jumbo Cup</option>
  </select>

Right now, I'm going through one by one and calling the tableTemplate function manually for each selection:

$("#demoSelect").on("change", function() {
  var str = "";
  $("#demoSelect option:selected").each(function() {
    str += $(this).val();
  });
  if (str == "simple") {
    $("#cupTables").prepend(tableTemplate(simple));
  } else if (str == "travel") {
    $("#cupTables").prepend(tableTemplate(travel));
  } else if (str == "jumbo") {
    $("#cupTables").prepend(tableTemplate(jumbo));
  }

});

(And so on, but for like 25 product variations).

I'd like to be able to just do something like this, but can't

$("#demoSelect").on("change", function() {
  var str = "";
  $("#demoSelect option:selected").each(function() {
    str += $(this).val();
  });
    $("#cupTables").prepend(tableTemplate(str));

});

But while I haven't found an answer on how to do it, my bumbling searches have taught me that I can't do that because I'm pointing to a value ("simple") instead of a reference (const simple = {}) (I think?)

Is there a workaround?

Would I have better luck using something other than template literals?

Here is a JSFiddle with an example: https://jsfiddle.net/cwow123/voq6dvt9/

djfdev · Accepted Answer · 2018-01-25 03:08:11Z

1

Rather than storing your products just as variables in the general scope of things, you can key them under a parent object called products.

const products = {
  simple: {
    // ...
  },
  travel: {
    // ...
  },
  jumbo: {
    // ...
  }
}

Now, you can access each product type by the name of the key it is stored under (which is a string):

const product = products[str]
$("#cupTables").prepend(tableTemplate(product))

answered Jan 25, 2018 at 3:08

djfdev

6,0674 gold badges22 silver badges40 bronze badges

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

Collectives™ on Stack Overflow

How to use a variable string value to represent a Javascript object in a function's parameter?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related