質問編集履歴

1 書式の改善

Fujimon_fn

Fujimon_fn score 10

2016/12/09 20:45  投稿

【JS】どうみても存在するプロパティがundefinedになる
console.log(userObj);では見えている'email'というプロパティが、次の行のconsole.log(userObj.email);でundefined、console.log(userObj.hasOwnProperty('email'))でfalseになります。  
 
###前提・実現したいこと
ログイン後、セッションを確立したユーザーのメールアドレスを動的に表示しようとしています。
認証はAWS Cognitoを使っていて、getUserAttributesで取得したメールアドレスをuserObjというオブジェクトにemailというキーで格納しています。その後userObjを戻り値としたresolve(userObj)の中で、$('#email').html(userObj.email);でメールアドレスを表示しようとしています。
###発生している問題・エラーメッセージ
メールアドレスが表示されなかったので、console.log(userObj)で中身を確認したところ、'email: hogehoge@example.com'はきちんと見えました。ですが直後に実行したconsole.log(userObj.email)はundefinedになり、console.log(userObj.hasOwnProperty('email'))はfalseになりました。
問題の箇所
```
console.log(userObj);
console.log('userObj.email → ' + userObj.email);
console.log('userObj.hasOwnProperty("email") → ' + userObj.hasOwnProperty("email"));
```
上記部分のコンソールの出力結果です↓
![イメージ説明](6fa5663bf79900f564e1d396e94260dc.png)
このように、Objectの中身には「email: "hogehoge@example.com"」というのがは見えていますが、直後にはそれがundefinedになり、プロパティ自体存在しないと言われてしまいます。
###該当のソースコード
```javascript
   validateSession(cognitoUser).then(function(userObj){
     console.log(userObj);
     console.log('userObj.email → ' + userObj.email);
     console.log('userObj.hasOwnProperty("email") → ' + userObj.hasOwnProperty("email"));
     $('#username').html(userObj.username);
     $('#email').html(userObj.email);
   },invaildSession);
var validateSession = function(cognitoUser){
 return new Promise(function(resolve, reject){
   var userObj = {};
   if(cognitoUser != null){
     $.each(cognitoUser, function(key, val){
       userObj[key] = val;
     });
     cognitoUser.getSession(function(err, sessresult){
       if(sessresult){
         console.log('Session has been validated.');
         // Get user's attributes (ex: email)
         cognitoUser.getUserAttributes(function(err, attrresult){
           if(err){
             console.log(err);
             return;
           }
           //attrresultの中身をuserObjに格納
           $.each(attrresult, function(index, val){
             userObj[val['Name']] = val['Value'];
           });
         });
         resolve(userObj);
       }else{
         console.log('No sessresult');
         reject();
       }
     });
   }else{
     console.log('No cognito User');
     reject();
   }
 });
};
```
###補足情報
Google Chrome 54.0.2840.98 (64-bit)
コンテンツはAmazon S3に置いてます。
  • JavaScript

    37409 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • AWS(Amazon Web Services)

    5206 questions

    Amazon Web Services (AWS)は、仮想空間を機軸とした、クラスター状のコンピュータ・ネットワーク・データベース・ストーレッジ・サポートツールをAWSというインフラから提供する商用サービスです。

  • Chrome

    1676 questions

    Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る