Unable to retrieve the value from an object (Javascript)

window.addEventListener('keydown', (e) => {
    let arrowsObj = {
        "ArrowUp": 1,
        "ArrowDown": 2,
        "ArrowLeft": 3,
        "ArrowRight": 4
    }
    let eventKey = e.key;
    console.log(arrowsObj.eventKey);
});

Despite performing the necessary checks, the code above is not functioning as expected. Here are the checks made:

arrowsObj.hasOwnProperty(eventKey)

if(eventKey in arrowsObj)

Both of the checks returned true, so what could be causing the issue? Is it perhaps related to data type?

Your insights will be greatly appreciated!

javascriptobject

Answer №1

If you find yourself unable to use the .dot notation to retrieve the value from the object due to it not being a string key but rather a variable that stores the key, consider utilizing Bracket notation like so: arrowsObj[eventKey]

It is advisable to incorporate the use of .hasOwnProperty, especially if there is a possibility of pressing keys other than arrow keys, to prevent receiving undefined values in your console.

window.addEventListener('keydown', (e) => {
    let arrowsObj = {
        "ArrowUp": 1,
        "ArrowDown": 2,
        "ArrowLeft": 3,
        "ArrowRight": 4
    }
    let eventKey = e.key;
    console.log(arrowsObj[eventKey]);
});

Answer №2

Instead of using dot notation, you can use bracket notation like this: 

console.log(arrowsObj[eventKey]);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can a single-page application be created using Express without utilizing React, Angular, or similar frameworks?

Our codebase is currently exclusively built on express, and we are looking to expand it while transitioning into a single page application. At this point in time, I am hesitant to rework the code using frameworks such as Angular or React to achieve this go ...

javascriptexpresssingle-page-application

Mac OS reports an Illegal instruction: 4 error when running NodeJS

Each time I try to execute my program, it gives me an Illegal instruction: 4 error without any clue as to why. The code snippet in question: glob('/path/music/*.mp3', function(error, files) { for(var i = 0; i < files.length; i++) { songs ...

javascriptnode.jsmacosnpm

Utilizing JSON and AJAX to mine data from databases

I've been working on creating a basic "search" box using Javascript, AJAX, PHP, and JSON. I'm focusing on the "world" database that I downloaded from the MySQL website for this particular project. I've hit a roadblock when trying to retrieve ...

javascriptphpmysqljsonajax

Can you explain the purpose of prevState within the setState method of a functional component?

When returning the updated previous state within a setState method retrieved from the useState hook, it appears that the state remains unchanged. To demonstrate this behavior, consider running the following code snippet: function App(){ const [state, ...

javascriptreactjsstatereact-hooksreact-state-management

Utilizing Internationalization in Socket.io

I currently utilize the i18n-2 package for Internationalization in my project by implementing it as follows: router.get('/route', function (req, res, next) { res.redirect('/route/?lang=' + req.i18n.getLocale()); }); Now, ...

javascriptnode.jsexpresssocket.ioi18next

Does it typically occur to experience a brief pause following the execution of .innerHTML = xmlhttp.responseText;?

Is it common to experience a brief delay after setting the innerHTML with xmlhttp.responseText? Approximately 1 second delay occurs after xmlhttp.readyState reaches 4. This issue is observed when using Firefox 3.0.10. ...

javascriptajax

gmap3 has encountered an error: undefined is not a valid function

I am working on a WordPress site and trying to integrate a Google map into the contact page. However, I'm encountering an error Uncaught TypeError: undefined is not a function in the JavaScript console. Below is the code snippet causing the issue, can ...

javascriptjquerywordpressgoogle-maps

I'm experiencing an issue with my API where it is returning invalid JSON data when I make a POST request using

I have a scenario where I am making a post request to my Next.js API for updating an address. The code snippet below shows the function that handles fetching: async function handleSubmit() { const data = { deliveryAddress, landmark, pincode, district, bl ...

javascriptnode.jsjson

Scraping dynamic content with Python for websites using JavaScript-generated elements

Seeking assistance in using Python3 to fetch the Bibtex citation produced by . The URLs follow a predictable pattern, enabling the script to determine the URL without requiring interaction with the webpage. Attempts have been made using Selenium, bs4, amon ...

javascriptpythonweb-scrapingscrape

Issue with Nodemailer OAuth2 2LO authentication when deployed on Heroku

const { EMAIL_FROM, EMAILS_TO, USER, GMAIL_CLIENT_ID, GMAIL_PRIVATE_KEY } = process.env; let transporter = nodemailer.createTransport({ host: 'smtp.gmail.com', port: 465, secure: true, auth: { type: &a ...

javascriptnode.jsherokuoauth-2.0nodemailer

Vue-router vulnerability allowing for DOM-based open redirects

I am currently working on a Vue application that was created using Vue-cli. Vue version: 2.6.11 vue-router version: 3.2.0 Link for Reproduction https://github.com/keyhangholami/dom-based-open-redirect Instructions to replicate To reproduce the i ...

javascriptvue.jsvue-router

Differences seen in display when using Internet Explorer's prependTo feature

Here is some code that I am working with:- <ul id="list1"> <li class="a">item 1</li> <li class="a">item 2</li> <li class="b">item 3</li> <li class="b">item 4</li> </ul> Additiona ...

javascriptjqueryhtmlinternet-explorer

What are some ways I can safeguard my CSS from injected elements?

I have created an HTML widget that is inserted into various websites without the use of iframes. However, I am encountering issues where the CSS of some sites is affecting the appearance of my elements, such as text alignment, underlining, and spacing. Is ...

javascripthtmlcss

``There Seems to be an Issue with Loading Content in Tabs

Hey! I'm encountering an issue with my jquery tabs. The first tab content loads fine, but when I select another tab, the content doesn't display. Then, when I try to go back to the first tab, it doesn't load either. Here's the HTML cod ...

javascriptjqueryhtmlcssajax

When the form is submitted, use jQuery to smoothly transition the page to a specific

I have a form and a div called "success". When the form is submitted, the "success" div is displayed. I am attempting to make it so that when the form is submitted, the page slides to the "success" div. Here is the code I am using: $.ajax({ type: "P ...

javascriptjqueryhtmlajax

Are there any APIs available through atmospherejs?

Are there any APIs available on atmospherejs for listing and searching Meteor packages? I am interested in creating an app that can search and list meteor packages. ...

javascriptmeteor

Jest snapshot tests using react-test-renderer encounter null references in refs

Having an issue with manually initializing the Quill editor in componentDidMount and encountering Jest test failures. It seems that the ref value I am receiving is null in jsdom. There is a related issue here: https://github.com/facebook/react/issues/7371, ...

javascriptreactjsjestjs

knockout.js' $root leads to a page displaying nothing

Using the $root binding context is resulting in a blank page for me. Removing it allows the page to load properly. Causing blank page: <td><input data-bind="value: name" /></td> <td><select data-bind="options: $root.availableMe ...

javascripthtmlknockout.js

What could be causing MS browsers to transform my object array into an array of arrays?

Noticing an interesting behavior with Microsoft browsers especially when dealing with data returned from our product API. It seems that the array of 52 product objects is being transformed into several arrays, each containing only 10 objects. Our error tr ...

javascriptarraysjsoninternet-explorermicrosoft-edge

Guide on showing string array values in an alert popup using JavaScript

I am struggling to display a string array in a JavaScript alert popup. The goal is to show the string index or Serial Number, followed by a space and then a line break before displaying the value of each string in the array. Unfortunately, my current code ...

c#javascriptasp.net