5. Milkcocoaに格納したデータを取得する
今度は保存したデータをとってきて、表示したいですね。
同じアプリ内でもいいですが、せっかくなので別のプロジェクトを作って、そっちでデータを使う、ということをしてみたいと思います。
といっても設定は前にやったとおり。
同じアプリIDを指定すれば、その中のデータストアを操作できます。
どーん！
var milkcocoa = new MilkCocoa("アプリID.mlkcca.com");
var fungo = milkcocoa.dataStore("fungoData");
var hora,bakaze,jicha,haishi,haishiTable,fu;
function fungoGet(){
var stream = fungo.stream().sort('asc');
stream.next(function(err, data) {
var num = Math.floor( Math.random() * data.length );
bakaze = data[num].value.bakaze;
jicha = data[num].value.jicha;
haishi = data[num].value.haishi;
haishiTable = data[num].value.haishiTable;
fu = data[num].value.fu;
$('#haishi').html(haishi);
$('#result-haishi-table').html(haishiTable);
});
}
1行目、2行目までは同じです。
fungoDataというデータストアを操作するのに、使いまわすためにfungoという変数に入れました。
3行目はこのあとの処理で使う変数です。
やりたいこと：
符計算練習モードでスタートボタンを押したら、データストアの中からランダムでデータを1件取得して表示する。
やってること：
符計算練習モードでスタートボタンを押したら、データストアの中から取得したデータの中からランダムで1件表示する。
微妙に違いますが、後者だとなにがまずいかっていうと、次の問題に進むたびに同じデータを毎回何百件も取得してきて表示、ってするので、処理に時間がかかります。
これはとりあえずおいておきましょう。
今は仕組みを理解するのが先ってことで。
スタートボタンを押したら、fungoGet()を実行します。
中身を見ていきましょう。
データストアのデータを、ID指定で1件とってくるget()メソッドというのがあるのですが、これだと先にIDがわかってないといけません。
まず最初にデータを全件取得して、それが何件あるのか？を調べないと、ランダムの数字を決めることができませんね。
すべてのデータを取得するには、stream()メソッドを使います。
var stream = fungo.stream().sort('asc');
stream.next(function(err, data) {
fungo.stream()で、fungoDataをstream()しちゃうよ。
さらに、sort()で、昇順降順を指定しちゃうよ。
そしてnext()メソッドでデータを読み込んじゃうよ。
っていう流れです雑ですね！
まあ、このへんはドキュメントにもあるので、流しますね。
stream.next(function(err, data) {
console.log(data[0].id);
});
ここまでは問題ありません。
data（読み込んだデータ）のインデックス0（1番目）のIdがコンソールに表示されます。
私がつまずいたのはこのあとです。
stream.next(function(err, data) {
console.log(data[0].value);
});
結果は
[object Object]
( ﾟдﾟ)･･･？
あれ、Value欄のデータが出るんじゃないの･･･？
どうなってるの･･･？
data[0].horaとかにしてみる？
だめだね？
なんなの？
たどり着いた答えは
stream.next(function(err, data) {
console.log(data[0].value.hora);
});
Σ(ﾟДﾟ；ｴｰｯ!
なんか、だまされたような、ほしい値が直接指定できて嬉しいような、不思議な気分。
data[0].valueだと中身がJSON構文だからJSONオブジェクトとされるのかな、だったら$.getJSON()とかしないといけないのかなとかいろいろ考えたんですが
そんなもんいらんかったんや・・・
ちなみに調べるうちにこんな記事も見つけて勉強になったのでリンクしときます。
$.getJSONは非同期前提の関数なので$.getJSONでの取得が終わらないうちにその下のconsole.logがコールされてしまい、結果として値が空のままになってしまう
φ(ﾟДﾟ )ﾌﾑﾌﾑ…
ってことで、無事格納したデータを取り出すことができたので、あとは
var num = Math.floor( Math.random() * data.length );
データ数の中からランダムの番号を決めて、
hora = data[num].value.hora;
そのインデックスのデータを変数に入れたりして、あとは自由に使えますね！
ここまでで、とりあえず今回やりたかった、計算結果をDBに入れて、ランダムで出題する、ってことができました。
ベースの機能はできたので、引き続き開発していきたいと思います！