如何使用不同的ID在firebase数据库中插入项目?

时间:2017-10-05 18:49:48

标签: javascript jquery firebase firebase-realtime-database

我在firebase上有一个简单的数据库,基本上我正在尝试创建一个代码来在这个数据库上插入记录。我想插入这样的记录:

id | lat | lng
01 | -55 | -10
02 | -44 | -20

每个“行”是一个地方(经度和纬度)的新记录。

我在firebase上创建了这个例子:

enter image description here

如何正确地将记录插入此“表格”?因为当我创建以下代码来实现它并点击按钮时,它会在此表上创建一个不同的ID(我是Firebase的新手,我还没有得到它)​​:

enter image description here

以下是完整代码:

  

  

<form action="" id="newActivity">
<input id="searchTextField" type="text" size="50" placeholder="Enter a location" autocomplete="on" runat="server" />  
<input type="hidden" id="city2" name="city2" />
<input type="hidden" id="cityLat" name="cityLat" />
<input type="hidden" id="cityLng" name="cityLng" /> 
<input id="saveForm" name="saveForm" type="submit" value="New Activity">
</form>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.firebase.com/js/client/2.3.2/firebase.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?libraries=places" type="text/javascript"></script>


<script type="text/javascript">
    function initialize() {
        var input = document.getElementById('searchTextField');
        var autocomplete = new google.maps.places.Autocomplete(input);
        google.maps.event.addListener(autocomplete, 'place_changed', function () {
            var place = autocomplete.getPlace();
            document.getElementById('city2').value = place.name;
            document.getElementById('cityLat').value = place.geometry.location.lat();
            document.getElementById('cityLng').value = place.geometry.location.lng();
            //alert("This function is working!");
            //alert(place.name);
           // alert(place.address_components[0].long_name);

        });
    }
    google.maps.event.addDomListener(window, 'load', initialize); 
</script>


<script>



    $(function(){

        var rootRef = new Firebase("https://xxxx.firebaseio.com/").ref();
        var placesRef = rootRef.child('places');


        /**
        * Data object to be written to Firebase.
        */
        var data = []


      $('#newActivity').submit(function(event){

          var $form = $(this);
          console.log("submit to Firebase");

          //make the submit disabled
          //$form.find("#saveForm").prop('disabled', true);

          //get the actual values that we will send to firebase
          var cityLatToSend = $('#cityLat').val();

          console.log(cityLatToSend);

          var cityLngToSend = $('#cityLng').val();

          console.log(cityLngToSend);

          //take the values from the form, and put them in an object


          var newActivity = {
            "lat": cityLatToSend,
            "lng": cityLngToSend,
          }


          //put the new object into the data array
          data.push(newActivity);
          console.log(data);
          //send the new data to Firebase

          var newPlaceRef = rootRef.push();
          newPlaceRef.set(data);
          //rootRef.push(data);



          return false;

      })
  })


</script>

2 个答案:

答案 0 :(得分:0)

在提交功能中,您没有提供列表参考。

var rootRef = new Firebase("https://xxxx.firebaseio.com/").ref();

此处未提供清单。

var newPlaceRef = rootRef.push();
  newPlaceRef.set(data);

因此,不是向您推送数据places列表应用程序创建带有自动生成ID的新帖子引用

<强>解决方案

var commentsRef = firebase.database("https://xxxx.firebaseio.com/").ref('places');
var newRef = commentsRef.push();
newRef .set(data);

希望这可以帮助您解决问题。 有关更多信息,请阅读官方文档。

Work with Lists of Data on the Web

答案 1 :(得分:0)

试试这个:

var rootRef = firebase.database().ref('places');
var count = 0;   // will hold the length of places array
var value = { lat: +new Date(), lng: +new Date() / 1000 };   // sample value for lat and lng
firebase
  .database()
  .ref('places')
  .once('value', value => { // get the length of your places array
    if (value.val() == null) count = 0;  // if no places then set it to 0
    else count = Object.keys(value.val()).length;  // otherwise get its length
 // as array items are stored corresponding to their index , Object.keys() can give its length
  })
  .then(() => {
    rootRef.child(count + '').update(value).then( // this will push into your array
      success => {
        console.log('success');
      },
      error => {
        console.log('error');
      }
    );
  });

这样你可以模仿array.push()

您还可以通过创建新字段将 places.length 存储在firebase中。这样,您可以使用该值,而不是使用Object.keys()。只需在每次添加/删除到places数组后继续更新该值。

但你应该使用push()方法。

var data = [];
var newActivity = {
        "lat": cityLatToSend,
        "lng": cityLngToSend,
      }
 //data.push(newActivity);      don't do this

rootRef.child('push').push(newActivity)
//This way you can push into get array .

希望你明白这一点。

阅读this