javascript オブジェクトのvalue値を指定してkeyを取得する

作成日 2022.11.15
javascript
javascript

javascriptで、オブジェクトのvalue値を指定してkeyを取得するサンプルコードを記述してます。オブジェクトを一度、keyで配列化して「find」で条件を指定して取得します。結果が複数ある場合は「filter」を使用して配列として取得します。

1. 環境
2. value値を指定してkeyを取得
3. 結果が複数の場合
4. サンプルコード

環境

OS windows11 pro 64bit
Apache 2.4.43
ブラウザ chrome 106.0.5249.103

Javascript サンプル集はこちら

value値を指定してkeyを取得

value値を指定してkeyを取得するには、
1. 「Object.keys」でオブジェクトを「key」で配列化
2. 「find」で「value」と一致することを条件にして「key」を取得
で可能です。

let obj = {name:'taro',age:20}; 

let keys = Object.keys(obj).find(function(key){ return obj[key] === 20; });

console.log(keys); // age

存在しない「value」値を指定すると「undefined」が返ります。

let obj = {name:'taro',age:20}; 

let keys = Object.keys(obj).find(function(key){ return obj[key] === 25; });

console.log(keys); // undefined

結果が複数の場合

結果が複数あるの場合は「find」の場合は、最初に見つかった「key」が返ります。

let obj = {name:'taro', age:20, code:20}; 

let keys = Object.keys(obj).find(function(key){ return obj[key] === 20; });

console.log(keys); // age

複数存在することも考慮する必要がある場合は、「filter」を使用すると配列で取得することが可能です。

let obj = {name:'taro', age:20, code:20}; 

let keys = Object.keys(obj).filter(function(key){ return obj[key] === 20; });

console.log(keys); // ['age', 'code']

サンプルコード

以下は、
「取得」ボタンをクリックすると、オブジェクトの「value」に「0～9」までランダムな値を設定後に、「value」が「5」だったものの「key」を取得して表示する
サンプルコードとなります。

※cssには「bootstrap material」を使用してます。関数はアロー関数で記述してます。

アロー関数のサンプル

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>mebeeサンプル</title>
  <!-- MDB -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/4.2.0/mdb.min.css" rel="stylesheet" />
</head>

<body>

  <div class="container text-center w-75 mx-auto" style="margin-top:200px">

    <h2><span class="badge badge-info">最初に見つかった値</span></h2>
    <h2><span class="badge badge-info">結果</span></h2>

    <button type="button" onclick="hoge()" class="btn btn-raised btn-danger">
      取得
    </button>

  </div>

  <script>

    const hoge = () => {

      // ランダムな数値(0～9)をvalueにもつオブジェクトを生成
      let obj = { num1: Math.floor(Math.random() * 10), num2: Math.floor(Math.random() * 10), num3: Math.floor(Math.random() * 10) };

      // JSON 文字列に変換してオブジェクトを表示
      document.getElementsByClassName("badge")[0].textContent = JSON.stringify(obj);

      // valueが「5」だったものkeyを表示
      document.getElementsByClassName("badge")[1].textContent = Object.keys(obj).find(function(key){ return obj[key] === 5; });

    }

  </script>
</body>

</html>

表示されていることが確認できます。