How can I tie my checkbox to get the correct data from a javascript object?

Question

I have an object with some data that I would like to be accessed when I click a checkbox.

Here are the examples of what checkboxes I have.

  <input type="checkbox" id="dealership1" name="dealership1">
  <input type="checkbox" id="dealership2" name="dealership2">
  <input type="checkbox" id="dealership3" name="dealership3">

  <input type="checkbox" id="state1" name="state1">
  <input type="checkbox" id="state2" name="state2">
  <input type="checkbox" id="state3" name="state3">

So when I click a checkbox i'd like to access the corresponding objects and assign the "name" and "image" to variables so that I can add them to my page later. I would do this by doing something like var foo = docs.dealership.dealership1.name, but i'm running into issues because I'm reading that I can't use variables like docs.var1.var2.name

var docs = {

            'dealership': {

                dealership1: {
                    "name" : "Trade-In Appraisal",
                    "image": "http://unsplash.it/100"
                },
                dealership2: {
                    "name" : "Service Details",
                    "image": "http://unsplash.it/200"
                },
                dealership3: {
                    "name" : "Referral Form",
                    "image": "http://unsplash.it/300"
                },

            },

            'state': {

                state1: {
                    "name" : "Application for Title",
                    "image": "http://unsplash.it/400"
                },
                state2: {
                    "name" : "Bill of Sale",
                    "image": "http://unsplash.it/500"
                },
                state3: {
                    "name" : "County of Title Issuance",
                    "image": "http://unsplash.it/600"
                },

            }

        }

please read how to create a [Minimal, Verifiable example](https://stackoverflow.com/help/mcve) — Sean Kwon, May 11 '17 at 20:19
Possible duplicate of [Use dynamic variable names in JavaScript](http://stackoverflow.com/questions/5117127/use-dynamic-variable-names-in-javascript) — imtheman, May 11 '17 at 20:20

score 1 · Accepted Answer · answered May 11 '17 at 20:34

<input type="checkbox" data-id="dealership" name="dealership1">
<input type="checkbox" data-id="dealership" name="dealership2">
<input type="checkbox" data-id="dealership" name="dealership3">

<input type="checkbox" data-id="state" name="state1">
<input type="checkbox" data-id="state" name="state2">
<input type="checkbox" data-id="state" name="state3">



$('input').change(function() {
      var type = $(this).attr('data-id');
      var name = $(this).attr('name');

      var n = docs[type][name].name;
    });

How can I tie my checkbox to get the correct data from a javascript object?

1 Answers1