June 27, 2020

How to Get a Key in a Javascript Object By Its Value

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to get a key in a javascript object by its value. If you are familiar with javascript, then you know it is pretty easy to access the value of any property within the object using its key. Things get a little bit tricky when you want to retrieve a key name by its value.

As always, there are multiple ways to solve this problem. In this tutorial, we are going to explain one of the simplest methods to access a key name by its value.

In the following example, we are going to enter a text in the input element and upon click of a button, we want to find its corresponding key in the object and display it on the screen. Please have a look over the code example and steps given below.

HTML & CSS:

We have 4 elements in the HTML file (div, input, button, and h1). The div element is just a wrapper for the rest of the elements.

We have done some basic styling using CSS and added the link to our style.css stylesheet inside the head element.
We have also included our javascript file script.js with a script tag at the bottom.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>

    <div>
        <input type="text">
        <button>Get</button>
        <h1>Result</h1>
    </div>
    <script src="script.js"></script>
</body>
</html>

body {
    text-align: center;
}

div {
    display: inline-block;
}

input, button{
    display: inline-block;
    padding: 10px 20px;
}

Javascript

We have selected all 3 elements button, input, and h1 using the document.querySelector() method and stored them in btn, input, and result variables respectively.
We have created one global object obj which has 3 properties.

We have attached the click event listener to the button element. Inside the click event handler, we are simply accessing the value entered in the input element and assigning it to the value variable.
Object.keys() method takes an object obj as a parameter and returns an array that includes all the keys in the object.
In general, the find() method will return the first element from the array which meets a certain condition.

We will execute our find() method on the keys array to find the corresponding key based on the value entered in the input field and display it on the screen inside the h1 element.

let btnGet = document.querySelector('button');
let input = document.querySelector('input');
let result = document.querySelector('h1');


let obj= {
    james: '100',
    peter:'200',
    marks:'300'
}

btnGet.addEventListener('click', () => {
    let value = input.value;
    result.innerText = Object.keys(obj).find(key => obj[key] == value);
});

You May Also Like: