Firebaseの値は、定義されていないときは定義されていません

Question

私はfirebaseプロジェクトに取り組んでいます。

return user.val().name; 

をテスト中しかしながら

console.log(user.val().name) 

は.nameのフィールドに格納された実際の文字列が返され

undefined 

値を返します。何故ですか。また、変数に変数

を割り当てても変数は未定義のままです。なぜこのようなことが起こるのか理解するのを手伝ってください。私はCSVにそれを印刷しています。

var database = firebase.database(); 
var ref2 = database.ref('information/'); 

var id; 
var name; 

ref2.on("value", function (one) { 

    one.forEach(function (two) { 

     if (typeof two.val().Id !== 'undefined') { 
      id = two.val().Id; 
      name = program(id); //name undefined 

     } 
     else { 
      id = ""; 
     } 

     csv = name + "," + id +"\n"; 


    }); 

    download(csv); 

}); 
}; 


function program (id) { 

var database = firebase.database(); 
var ref = database.ref("users/" + id + "/"); 

ref.on('value',function(user){ 

    if (typeof user.val().name === 'undefined') { 
     return null; 
    } 
    else { 
     console.log(user.val().name); //this doesnt show undefined 
     return user.val().name; //this shows undefined when appended to a html element 

    } 
}) 
} 

注：

はここに私のコードです firebaseデータベースには、名前の値がnullではありません。それには文字列が追加されています。

Answer 1

I二フランクのreasonあなたの関数program()が動作しない理由をオンにしました。 ref.on('value'...は非同期呼び出しを行うため、program()はref.onの完了を待機せず、戻り値はundefinedです。

代わりに、約束を使用することができます。 program()関数内の文をPromise内で折り返し、非同期呼び出しが完了すると、結果に基づいてresolveまたはrejectが返されます。

function program(id) { 
    return new Promise(function (resolve, reject) { 
     try { 
      var database = firebase.database(); 
      var ref = database.ref("users/" + id + "/"); 

      ref.on('value', function (user) { 
       if (typeof user.val().name === 'undefined') { 
        resolve(null); 
       } else { 
        console.log(user.val().name); 
        resolve(user.val().name); 
       } 
      }) 
     } catch (e) { 
      reject(e) 
     } 
    }); 
} 

をそして、ここであなたが結果を読むことができる方法は次のとおりです：

はここで約束してあなたの関数です

program(id).then(function (result) { 
     console.log(result) 
     //Do what you want with the result here 
    }).catch(function (error) { 
     console.log(error) 
}) 

注：あなたがのために、それぞれの文の中で、このブロックを実行しています。プロミスを使用している場合は、ループ内でプロミスを使用する方法も調べる必要があります。参考として、Promise.all()

Answer 2

Firebase> DataBase> Role

ルールの値を変更しましたか？

コメント例！

名前に移動した後で値を取得できます。

var ref = database.ref ("users/" + id + "/name"); 
    ref.on ('value', function (user) { 
        if (user.val()! = null) { 
             console.log (user.val()) 
         } 
    } 

そうでない場合は、それを心配しましょう。

Answer 3

戻り値を受け取る必要があります。

var name = ref.on('value',function(user){ 

    if (typeof user.val().name === 'undefined') { 
     return null; 
    } 
    else { 
     console.log(user.val().name); //this doesnt show undefined 
     return user.val().name; //this shows undefined when appended to a html element 

     } 
}) 

次に、return nameを使用して値を取得します。または単に返すreturn ref.on('value' ...

Answer 4

ほとんどの場合、program関数を呼び出すコードで返された名前を使用しようとしている可能性があります。例えば。

var name = program("1234"); 
console.log(name); // this will print undefined 

program()が実際に名前を返さないため、これは機能しません。データはFirebaseから非同期にロードされます。 program()が終了するまでに、データはまだロードされていません。

これは、コードにいくつかのログステートメントを置くことによって見ることが最も簡単です：

function program (id) { 
    var database = firebase.database(); 
    var ref = database.ref("users/" + id + "/"); 
    console.log("Before attaching listener");  
    ref.on('value',function(user){ 
     console.log("Got value from database"); 
    }) 
    console.log("After attaching listener, exiting function");  
} 

これを印刷します：

をリスナーを取り付けた後、リスナー

を取り付ける前に、機能を終了

データベースからの値

これは予想した順序ではない可能性がありますが、設計どおりに動作しています。データがロードされるのを待つのではなく（そしてブラウザ/ユーザを待たせる）、コードは続行されます。データがロードされると、コールバックが呼び出されます。しかし、元のコードでは、returnステートメントが元の呼び出し元に名前を返すことができません。

これは、Firebaseデータベース（およびほとんどのWeb API）が、あなたがon()に渡すようなコールバックを使用する理由です。このコールバックは、データが利用可能な場合に呼び出され、ユーザーデータにアクセスできる唯一の場所です。したがって、ロードしたばかりのデータを必要とするコードは、そのコールバックの中で内にあるか、そのコールバックの内側から呼び出される必要があります。例えば。

function program (id) { 

    var database = firebase.database(); 
    var ref = database.ref("users/" + id + "/"); 

    ref.on('value',function(user){ 

     if (typeof user.val().name === 'undefined') { 
      return null; 
     } 
     else { 
      console.log(user.val().name); 
      appendToHtmlElement(user.val().name); 
     } 
    }) 

}