如何在Firebase网络应用中插入新的子数据?

时间:2016-10-11 12:03:08

标签: javascript firebase firebase-realtime-database

我正在构建一个简单的汽车数据库应用程序。当用户添加新车时,它会创建以下JSON数据,其中包含库的空白字段:

{
    "name": "Cars",
    "gallery": [{
        "img": "http://",
        "title": "BMW"
    }, {
        "img": "http://",
        "title": "Lexus"
    }, {
        "img": "http://",
        "title": "Ferrari"
    }],
    "pageId": "23",
    "storeURL": "/app/cars/gallery"
}

现在我想在应用程序中做的是,如果用户添加新的图库图像,它应该在最后一个图库图片之后添加新的图片。所以在法拉利之后它应该插入一个新对象。我似乎无法做到这一点,因为每个教程都会导致死胡同,官方Google文档也指定set()将替换所有数据,因此如果您使用update()它将添加,在这种情况下,它不会添加。

此代码删除所有数据:

function add(){
  var data = [
    {
      title: 'Mercedes',
      img: 'http://'
    }
  ]
  var postData = {
    pageGallery: data
  };
  var updates = {};
  updates['/app/cars/'] = postData;
  firebase.database().ref().update(updates);
  console.log('New car added');

}

如果我改变并添加孩子:

firebase.database().ref().child('gallery').update(updates);

它没有做任何事情来做数据。你能帮忙吗?

2 个答案:

答案 0 :(得分:14)

在许多reasons not use arrays in our Firebase Database上查看此博文。现在阅读,我会在这儿等......

欢迎回来。既然您已经知道为什么当前的方法会导致痛苦的时间,那么让我们来看看应该如何对这些数据进行建模。这篇博客文章已经告诉过你关于推送ID的信息,它们是Firebase的大规模可扩展,离线就绪的阵列式集合方法。

正如我们的documentation on reading and writing lists of data所述,您可以通过调用push()将项目添加到列表中。

所以如果这会创造一辆车:

function addStore(){
  var rootRef = firebase.database().ref();
  var storesRef = rootRef.child('app/cars');
  var newStoreRef = storesRef.push();
  newStoreRef.set({
    name: "Cars",
    "pageId": "23",
    "storeURL": "/app/cars/gallery"
  });
}

然后将图像添加到该商店的图库中:

var newCarRef = newStoreRef.child('gallery').push();
newCarRef.set({
  title: 'Mercedes',
  img: 'http://'
})

这将在画廊的末尾添加一个新的汽车/图像(如果它还不存在则创建画廊)。

答案 1 :(得分:2)

如果有人想要错误处理:

          var rootRef = firebase.database().ref();
          var storesRef = rootRef.child('Lorelle/Visitors');
          var newStoreRef = storesRef.push();
          newStoreRef.set($scope.CarModal,
            function(error) {
              //NOTE: this completion has a bug, I need to fix.
              if (error) {
                   console.log("Data could not be saved." + error);
                   Materialize.toast('Error: Failed to Submit' + error, 2000);
              } else {
                 console.log("Data saved successfully.");
                 Materialize.toast('Data Submitted, Thank You.', 2000);

                   }
                });
             }