WEB開発

[JS]オブジェクトの複数プロパティのkeyとvalueを取得

※本サイトはPR表記を含みます。

JSを久しぶりに触ると、「あれ？オブジェクトのアクセスはどうするんだったっけ？」となりました。（すぐ忘れるﾀﾁ）

というのもfor()などで回す回数をlength()で取ろうと思っても、取れない。JSでのオブジェクトは以下のようにObject.keys()の中にぶち込んで回すんですねえ。

var obj = {
  dog: 'いぬ',
  cat: 'ネコ',
  bird: '鳥'
};

Object.keys(obj).forEach(function (key) {
  alert('key:' + key + 'value:' + obj[key]);
});

ちょっと、応用として、セレクトボックスがあったとして、「選択されたものをテキストボックスに自動入力する」みたいなのをやってみます。※フォームは略すけどｗ

// 動物リスト（なんでもええわ）
var animalList = {
    'dog': '犬',
    'cat': 'ネコ',
};

/**
* 選択された値により文字列をセットする
*
* @param {string} selectKey 選択されたキー
*/
var setInputForm = function(selectkey) {
    Object.keys(animalList).forEach(function (key) {
    if (selectKey == key) {
        // FormのinputのidにanimalInputがあると仮定
        $('#animalInput').val(animalList[key]); 
    } else {
        // 対象のリスト以外があった場合は空白
        $('#animalInput').val('');
    }
});

// selectboxが選択される度に発火
$('#selectbox').on('change' function(){
    // selectbox:optionに同じdogなどのkeyが存在すると仮定
    var selectKey = $('#selectbox').val();
    setInputForm(selectKey);
});

という感じで、(動作確認はしてないけど) 動くかどうかというより、オブジェクトにリスト定義しておいて、それをforEach()で回しつつ、ごにょごにょするみたいなのは、よくあるパターンかもしれませんね。

 

-WEB開発
-,