【问题标题】:How to ignore empty fields in Ionic / Firebase?如何忽略 Ionic / Firebase 中的空字段?
【发布时间】:2017-02-16 11:00:44
【问题描述】:

我有一个功能让用户能够在他的帐户中更改他自己的详细信息,例如他的描述或社交链接等...

但是,当我提交表单时,它会替换所有内容,而空值只会删除数据库中的字段。

提交表单并替换已在字段中输入的值并忽略空值的任何方式?

这是我的控制器:

var database = firebase.database();
  var userId = firebase.auth().currentUser.uid;
  var nameInput = document.querySelector('#name');
  var descriptionInput = document.querySelector('#description');
  var cityInput = document.querySelector('#city');
  var ageInput = document.querySelector('#age');
  var hobbiesInput = document.querySelector('#hobbies');
  var facebookInput = document.querySelector('#facebook');
  var twitterInput = document.querySelector('#twitter');
  var instagramInput = document.querySelector('#instagram');
  var youtubeInput = document.querySelector('#youtube');
  var snapchatInput = document.querySelector('#snapchat');
  var linkedinInput = document.querySelector('#linkedin');
  var emailInput = document.querySelector('#email');
  var passwordInput = document.querySelector('#password');
  var saveButton = document.querySelector('#save');



  saveButton.addEventListener("click", function() {
      var name = nameInput.value;
      var description = descriptionInput.value;
      var city = cityInput.value;
      var age = ageInput.value;
      var hobbies = hobbiesInput.value;
      var facebook = facebookInput.value;
      var twitter = twitterInput.value;
      var instagram = instagramInput.value;
      var youtube = youtubeInput.value;
      var snapchat = snapchatInput.value;
      var linkedin = linkedinInput.value;
      var email = emailInput.value;
      var password = passwordInput.value;


      firebase.database().ref('accounts/' + userId).set({
          name: name,
          description: description,
          city: city,
          age: age,
          hobbies: hobbies,
          facebook: facebook,
          twitter: twitter,
          instagram: instagram,
          youtube: youtube,
          snapchat: snapchat,
          linkedin: linkedin,
          email: email,
          password: password,

      });

      receiveNewData();
    function receiveNewData() {
        // check if there's new data added
        firebase.database().ref('accounts/' + userId).on('child_added', function(msg) {
            var data = msg.val();
            // your new data
            console.log(data);
            $state.go("tab.account");
        });
    }

  });

【问题讨论】:

  • 如果加载用户数据并在页面加载时用旧值填充字段怎么办?这样,如果用户不编辑任何内容,旧值将再次保存,因此不会发生任何变化。
  • 这正是我所做的!我在几个回答我自己的问题:)

标签: javascript firebase ionic-framework firebase-realtime-database


【解决方案1】:
var firebase_data = {};
var userID = firebase.auth().currentUser.uid;

var input_data = {
  nameInput: document.querySelector('#name'),
  descriptionInput: document.querySelector('#description'),
  cityInput: document.querySelector('#city'),
  ageInput: document.querySelector('#age'),
  hobbiesInput: document.querySelector('#hobbies'),
  facebookInput: document.querySelector('#facebook'),
  twitterInput: document.querySelector('#twitter'),
  instagramInput: document.querySelector('#instagram'),
  youtubeInput: document.querySelector('#youtube'),
  snapchatInput: document.querySelector('#snapchat'),
  linkedinInput: document.querySelector('#linkedin'),
  emailInput: document.querySelector('#email'),
  passwordInput: document.querySelector('#password'),
  saveButton: document.querySelector('#save')
}

for(var key in input_data) {
    if(input_data.hasOwnProperty(key) && input_data[key].value.length) {
        firebase_data[key] = input_data[key].value
    }
}

firebase.database().ref('accounts/' + userId).set(firebase_data)    

【讨论】:

  • 您好,谢谢您,在执行此操作时,如果我将“名称”字段留空并且其中已经有一些数据,这是它返回的错误:Uncaught Error: Firebase.set failed: First argument contains undefined in property 'accounts.lqxPFkBMpka6NnWkNEtrW1leHk32.name' 任何想法?跨度>
  • 如果有数据,可能只需要发送密钥,所以试试这样的方法
【解决方案2】:

对于像我这样的新手来说,这是我找到的解决方案:自动完成已经有值的字段,所以当我提交表单时,它会以相同的值再次保存。

代码:

var database = firebase.database();
  var userId = firebase.auth().currentUser.uid;
  var nameInput = document.querySelector('#name');
  var descriptionInput = document.querySelector('#description');
  var cityInput = document.querySelector('#city');
  var ageInput = document.querySelector('#age');
  var hobbiesInput = document.querySelector('#hobbies');
  var facebookInput = document.querySelector('#facebook');
  var twitterInput = document.querySelector('#twitter');
  var instagramInput = document.querySelector('#instagram');
  var youtubeInput = document.querySelector('#youtube');
  var snapchatInput = document.querySelector('#snapchat');
  var linkedinInput = document.querySelector('#linkedin');
  var emailInput = document.querySelector('#email');
  var passwordInput = document.querySelector('#password');
  var saveButton = document.querySelector('#save');
  var database = firebase.database().ref('/accounts/' + userId);

 // Retrieve information into the fields already filled in Database
  database.on('value', function(snapshot) {
     var displayName = snapshot.val().name;
      var description = snapshot.val().description;
      var displayCity = snapshot.val().city;
      var displayAge = snapshot.val().age;
      var displayHobbies = snapshot.val().hobbies;
      var displayFacebook = snapshot.val().facebook;
      var displayTwitter = snapshot.val().twitter;
      var displayInstagram = snapshot.val().instagram;
      var displayYoutube = snapshot.val().youtube;
      var displaySnapchat = snapshot.val().snapchat;
      var displayLinkedin = snapshot.val().linkedin;
      var displayEmail = snapshot.val().email;
      var displayPassword = snapshot.val().password;
       $scope.$apply(function() {
            $scope.displayName = displayName;
            $scope.description = description;
            $scope.displayCity = displayCity;
            $scope.displayAge = displayAge;
            $scope.displayHobbies = displayHobbies;
            $scope.displayFacebook = displayFacebook;
            $scope.displayTwitter = displayTwitter;
            $scope.displayInstagram = displayInstagram;
            $scope.displayYoutube = displayYoutube;
            $scope.displaySnapchat = displaySnapchat;
            $scope.displayLinkedin = displayLinkedin;
            $scope.displayEmail = displayEmail;
            $scope.displayPassword = displayPassword;
        });
        document.getElementById("name").value = displayName;
        document.getElementById("description").value = description;
        document.getElementById("city").value = displayCity;
        document.getElementById("age").value = displayAge;
        document.getElementById("hobbies").value = displayHobbies;
        document.getElementById("facebook").value = displayFacebook;
        document.getElementById("twitter").value = displayTwitter;
        document.getElementById("instagram").value = displayInstagram;
        document.getElementById("youtube").value = displayYoutube;
        document.getElementById("snapchat").value = displaySnapchat;
        document.getElementById("linkedin").value = displayLinkedin;
        document.getElementById("email").value = displayEmail;
        document.getElementById("password").value = displayPassword;

  });;

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2023-02-25
    • 2014-09-27
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-01-21
    相关资源
    最近更新 更多