投稿記事

Firebase を使ってみた

08 Apr 2016


Firebase に登録した jsonデータの読み込みを行いました。

データはStructuring Dataを参考に flattened Data構造にしてみました。

読込に使用したデータとソースは下方に記載しました。


エリア

お店

エリア と お店

firebaseに登録した json データ

{
  "eatingPlace" : {
    "Areas" : {
      "monnaka" : {
        "name" : "門前仲町"
      },
      "nangyo" : {
        "name" : "南行徳"
      },
      "oojima" : {
        "name" : "大島"
      },
      "urayasu" : {
        "name" : "浦安"
      }
    },
    "shopInfo" : {
      "1ten" : {
        "name" : "一天張",
        "type" : "カラオケ居酒屋"
      },
      "3pei" : {
        "name" : "居酒屋 三平",
        "type" : "居酒屋"
      },
      "bangai" : {
        "name" : "番外地",
        "type" : "立ち飲み"
      },
      "fuku1" : {
        "name" : "1丁目1番地",
        "type" : "居酒屋"
      },
      "grandma" : {
        "name" : "グランマ",
        "type" : "カラオケ居酒屋"
      },
      "haruka" : {
        "name" : "春香",
        "type" : "ラーメン"
      },
      "izumi" : {
        "name" : "居酒屋 いずみ",
        "type" : "カラオケ居酒屋"
      },
      "kimura" : {
        "name" : "とんかつ きむら",
        "type" : "とんかつ"
      },
      "kyu" : {
        "name" : "呑み処 久",
        "type" : "居酒屋"
      },
      "miki" : {
        "name" : "居酒屋 みき",
        "type" : "カラオケ居酒屋"
      },
      "rinrin" : {
        "name" : "凛凛亭",
        "type" : "ラーメン"
      },
      "wa" : {
        "name" : "和",
        "type" : "居酒屋"
      }
    },
    "shopList" : {
      "monnaka" : {
        "3pei" : true,
        "fuku1" : true,
        "izumi" : true
      },
      "nangyo" : {
        "grandma" : true,
        "miki" : true,
        "wa" : true
      },
      "oojima" : {
        "bangai" : true
      },
      "urayasu" : {
        "1ten" : true,
        "haruka" : true,
        "kimura" : true,
        "kyu" : true,
        "rinrin" : true
      }
    }
  }
}
      
 

javascript source

  // Firebase参照の生成
  var ref = new Firebase("https://<myFirebaseUrl>.firebaseio.com/");
  // エリアへの参照
  var areasRef = ref.child("eatingPlace/Areas/");
  // 店情報への参照
  var shopsRef = ref.child("eatingPlace/shopInfo/");
  // エリアごと店リストへの参照
  var listRef = ref.child("eatingPlace/shopList/");
  // エリア名の取得
  areasRef.orderByChild("name").on('child_added', function(snapshot) {
    var area = snapshot.val();
    $('<li></li>').text(area.name).append('<ul></ul>')
    .appendTo($('#areas'));
  });

  // お店情報取得  
  shopsRef.orderByChild("name").on('child_added', function(snapshot) {
    var shop = snapshot.val();
    $('<li></li>')
        .text(shop.name + "  [" + shop.type + "]")
        .append('<ul></ul>')
        .appendTo($('#shop'));
  });
 
  // エリア+お店 
  listRef.on('child_added', function(snapshot){
    // エリア・キー取得
    var areaKey = snapshot.key();
    // エリア名取得
    areasRef.child(areaKey).once('value', function(areaShot){
      var area = areaShot.val();
      $('<h3></h3>').text(area.name).appendTo($('#joined'));
      // エリアの店取得          
      listRef.child(areaKey).on('child_added', function(shopShot){
        // お店・キー取得
        var shopKey = shopShot.key();
        // お店情報取得(名前とタイプ)
        shopsRef.child(shopKey).on('value', function(infoShot){
          var info = infoShot.val();
          $('<li></li>')
            .text(info.name + "  [" + info.type + "]")
            .append('<ul></ul>')
            .appendTo($('#joined'));
        })
      })
    })
  });