How to iterate over a built variable using string interpolation Javascript

Question

I have a JSON file that contains a sample data

{
  {
  "AL": {
    "type": [
      [
        { "option": "some text" },
        { "yes": { "url": "" } },
        { "no": { "url": "" } }
      ],
      [
        { "option": "some text 1" },
        { "yes": { "url": "" } },
        { "no": { "url": "" } }
      ],
      [
        { "option": "some text 2" },
        { "yes": { "url": "" } },
        { "no": { "url": "" } }
      ],
      [
        { "option": "some text 3" },
        { "yes": { "url": "" } },
        { "no": { "url": "" } }
      ]
    ]
  },
  {
  "AK": {
    "type": [
      [
        { "option": "some text 4" },
        { "yes": { "url": "" } },
        { "no": { "url": "" } }
      ],
      [
        { "option": "some text 5" },
        { "yes": { "url": "" } },
        { "no": { "url": "" } }
      ],
      [
        { "option": "some text 6" },
        { "yes": { "url": "" } },
        { "no": { "url": "" } }
      ],
      [
        { "option": "some text 7" },
        { "yes": { "url": "" } },
        { "no": { "url": "" } }
      ]
    ]
  }
}

I get the data using jQuery's getJSON method

var response;

var data = $.getJSON("data/data1.json", function(data) {
    return data;
  });

  data.then(function(res) {
    response = res;
  })

I am trying to construct a variable that maps to the attributes in this Object.

I have tried the like

var key = "response[" + $dropdownKey + "]" + ".type";

and also

var key = "response." + $dropdownKey + ".type";

Where $dropdownKey is set when I select using a <select></select> tag in my HTML.

With this I want to iterate over the Object and get the data;

key.map(function(value) {
  I'd like to get all the options then
})

Because I have many attributes in the Object, I wanted to be able to dynamically tell this map function that the location of the attributes change based on user selection.

What am I doing wrong here?

`key` is a string? Response doesnt exist when you get it? `providerType` is not `type` ? — Jonas Wilms, Aug 20 '18 at 18:57
you cant map over a string. do you just want the data specific to the state code from the select menu? cant you just do keyData = jsonData[key] — user3666653, Aug 20 '18 at 19:00
My mistake, i meant to have type and not providerType. I have updated my code — Diego, Aug 20 '18 at 19:18
This question might be best served by some reading. I suggest [Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference](https://stackoverflow.com/q/23667086) and [Convert JavaScript string in dot notation into an object reference](https://stackoverflow.com/q/6393943) — Heretic Monkey, Aug 20 '18 at 19:23

score 0 · Answer 1 · answered Aug 20 '18 at 19:07

What am I doing wrong?

1) You try to turn something asynchronous (the data will arrive somewhen) into something synchronous (the data is there):

  data.then(function(res) {
    response = res;
  });

that won't work in most of the cases. Instead you should work with the promises as they are meant to, don't try to pass data out the promise chain.

2) your key is a string. You don't want a string. If you remove the " it is actually working.

  const data = $.getJSON("data/data1.json");

  function onSelect(dropdownKey) {
     data.then(response => {
       response[dropdownKey].type.map(type => {
         //...
       });
    });
  }

How to iterate over a built variable using string interpolation Javascript

1 Answers1