Access key in javascript javascript dynamically

Question

I have nested object and from that render object i want to access data according to user click. Example : in below object i loaded first question with response.pathway.question and answer with response.pathway.answers now if user click on yes then i next next key should be response.pathway.answers.Yes and if user clicks on No then next key should be response.pathway.answers.No in short what ever answer user select it should be added at last.

Now problem is i am using flatlist to show answers which return item and when i add that item at last of object key its giving error . And i know its giving error because there is no key in object like response.pathway.answers.item .So my question is how can i make this item dynamic like if user select yes then it should be like response.pathway.answers.Yes and vice versa. (Note inside answers key could be anything not only yes no).

{
"pathway": {
    "question ": "this is first question",
    "answers": {
        "Yes": {
            "question": "this question i want to access if user click on yes"
        },
        "No": {
            "question": "this question i want to access if user click on no"
        }
    }
}

}

get the response in variable and do like this response["pathway"]["answer"]["Yes"] ,you can store key name in variable and get the desired result. — Muhammad Saquib Shaikh
– Muhammad Saquib Shaikh, Commented Aug 21, 2020 at 8:00
suppose user selected yes then store ``var selectedOption = "yes"; var res = response.pathway.answer[selectedOption]; For more refrence see w3schools.com/js/js_objects.asp — Muhammad Saquib Shaikh
– Muhammad Saquib Shaikh, Commented Aug 21, 2020 at 8:02

Liu Lei · Accepted Answer · 2020-08-21 08:00:24Z

2


const key = 'anything you want'
const value = 'anything you want'
.....

{
  "pathway": {
    "question ": "this is first question",
    "answers": {
         // key is dynamically
        [key]: value
    }
  }
}

you can also do like obj.pathway.annswers[key] = 'value'

answered Aug 21, 2020 at 8:00

Liu Lei

1,2971 gold badge9 silver badges20 bronze badges

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

Comments

AmiralBl3ndic · Accepted Answer · 2020-08-21 08:09:21Z

I'm not sure I get the question but you might want to try this: since you want to access any key inside the pathway.answer object, what you can do is using indexing rather than dot notation to access its elements.

This means that you can access pathway.answer.Yes this way too pathway.answer['Yes'].

Now you only have to get a payload of what the user clicked on to access it (for example)

for (let buttonElem of document.querySelectorAll('.answer-button')) {
buttonElem.addEventListener('click', () => alert(buttonElem.innerHTML));
}

const data = {
  pathway: {
    question: 'whatever',
    answers: {
      yes: 'something',
      no: 'something else',
      litteralyAnythingElse: 'find something idk'
    }
  }
};

const answerDiv = document.getElementById("answer");

for (let buttonElem of document.querySelectorAll('.answer-button')) {
  buttonElem.addEventListener('click', () => {
    answerDiv.innerHTML = data.pathway.answers[buttonElem.innerHTML];
  });
}

<button class="answer-button">yes</button>
<button class="answer-button">no</button>
<button class="answer-button">litteralyAnythingElse</button>

<div id="answer">
</div>

Collectives™ on Stack Overflow

Access key in javascript javascript dynamically

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related