Firestore/Javascript: FirebaseError: Function DocumentReference.set() called with invalid data. Unsupported field value: undefined

Question

I keep getting this error

Error creating user: FirebaseError: Function DocumentReference.set() called with invalid data. Unsupported field value: undefined (found in field diabetesComplication)

and I think I traced the problem which goes to the process of getting all checkbox inputs then storing them into an array. I am also aware that I have to use the code JSON.stringify() before I store them in firestore.

Anyways, I need help in accurately pinpointing the cause of the issue. Because in the past I successfully got this process of storing an array into firestore right.

Here is the code:

.JS

$('#registerForm').on('submit', async function (e) {
  e.preventDefault();
  var data = {
    email: $('#email').val(), //get the email from Form
    firstName: $('#fname').val(), // get firstName
    lastName: $('#lname').val(), // get lastName
    sex: $('#sex').val(),
    birthDate: new Date($('#bday').val()),
    diabetesType: parseInt($('#dtype').val()),
    weight: parseInt($('#weight').val()),
    height: parseInt($('#height').val()),
  };

  var allergyList = [];
  var cou = i.counter;
  for (c = 0; c <= cou; c++) {
    var allergyField = document.getElementById("allergy" + c).value;
    allergyList.push(allergyField);
    AllergyString = JSON.stringify(allergyList)
  };

  var arrayComplications = [];
  var checkboxes = document.querySelectorAll('input[type=checkbox]:checked');
  for (var i = 0; i < checkboxes.length; i++) {
    JSON.stringify(arrayComplications.push(checkboxes[i].value))
  }

  var passwords = {
    password : $('#password').val(), //get the pass from Form
    cPassword : $('#cpassword').val(), //get the confirmPass from Form
  }

  if( data.email != '' && passwords.password != ''  && passwords.cPassword != '' ){
    if( passwords.password == passwords.cPassword ){
      //create the user
      firebase.auth().createUserWithEmailAndPassword(data.email, passwords.password).then(function(user){setTimeout(function(){
            console.log('uid',user.user.uid);
            usersRef.doc(user.user.uid).set({
              'email': data.email, 'firstName': data.firstName, 
              'lastName': data.lastName, 'allergies': allergyList,
              'sex': data.sex, 'birthDate': firebase.firestore.Timestamp.fromDate(data.birthDate),
              'diabetesType': data.diabetesType, 'diabetesComplication': arrayComplications,
              'weight': data.weight, 'height': data.height, 'firstLogin': true,
         })}, 3000)
          .then(function(){
            console.log("User Information Saved:", user.user.uid);
            window.alert("User Created!");
            window.location.href = "patientDashboard.php"; 
            })               
          })
        .catch(function(error){
          console.log(arrayComplications);
          console.log("Error creating user: ", error);
          console.log("Error creating user: ", user.user.uid);
          window.alert("Error creating user:" + error);
        });

      }
  } 
});

Here is the code:

HTML

                                <div class="col-md-6 pl-1">
                                    <div class="form-group">
                                        <label>Diabetes Complication</label>
                                        <br>
                                        <input type="checkbox" name="type" value="No Complications" /><b>No Complications</b>
                                        <br>
                                        <input type="checkbox" name="type" value="Retinopathy" /><b>Retinopathy</b>
                                        <br>
                                        <input type="checkbox" name="type" value="Neuropathy" /><b>Neuropathy</b>
                                        <br>
                                        <input type="checkbox" name="type" value="Nephropathy" /><b>Nephropathy</b>
                                        <br>
                                        <input type="checkbox" name="type" value="Cardiovascular"/><b>Cardiovascular</b>
                                    </div>
                                </div>
                            </div>

Note that the code

  var allergyList = [];
  var cou = i.counter;
  for (c = 0; c <= cou; c++) {
    var allergyField = document.getElementById("allergy" + c).value;
    allergyList.push(allergyField);
    AllergyString = JSON.stringify(allergyList)
  };

is what I'm referring to earlier as successfully doing the whole storing process.

EDIT

Here is the code that I'm having problems with:

  var arrayComplications = [];
  var checkboxes = document.querySelectorAll('input[type=checkbox]:checked');
  for (var i = 0; i < checkboxes.length; i++) {
    JSON.stringify(arrayComplications.push(checkboxes[i].value))
  }

I can't seem to get the checkbox values, store into an array, serialize it and store it into firestore.

I'm not sure the allergyString is the source of the error. I would try to give a look to the birthdate too. In any case, you could add a line before "usersRef.doc(user.user.uid).set", loggin every value you pass in the set(), so you can quickly find out which value is undefined — Gregorio Palamà
– Gregorio Palamà, Commented Feb 29, 2020 at 14:04
@GregorioPalamà the issue is the checkboxes I'm using the allergy code as an example of a successful firestore array storing process. — setted
– setted, Commented Feb 29, 2020 at 14:17
that's why I suggested printing all the values you're passing to the set() method. I suspect there is a null value when retrieving something from checkboxes or inputs of any type — Gregorio Palamà
– Gregorio Palamà, Commented Feb 29, 2020 at 15:36
Hi, did you read the answer from Doug? was it helpful? if so, please select it as a proper answer or specify what is wrong about their answer. — Mayeru
– Mayeru, Commented Mar 3, 2020 at 13:06
@Mayeru it was helpful, but if you have the same problem I did post an answer I consider a workaround. I already marked it as an answer cheers — setted
– setted, Commented Mar 5, 2020 at 4:45

Doug Stevenson · Accepted Answer · 2020-02-29 18:10:14Z

The error message is telling you exactly what's going wrong. You're calling set() and passing it an object which contains undefined for the property called diabetesComplication. That's what's happening here - I reformatted the code to make it easier to read:

usersRef.doc(user.user.uid).set({
    'email': data.email,
    'firstName': data.firstName, 
    'lastName': data.lastName,
    'allergies': allergyList,
    'sex': data.sex,
    'birthDate': firebase.firestore.Timestamp.fromDate(data.birthDate),
    'diabetesType': data.diabetesType,
    'diabetesComplication': arrayComplications,  // this contains undefined
    'weight': data.weight,
    'height': data.height,
    'firstLogin': true,
})

The line where diabetesComplicatation is assigned to arrayComplicatation - there is an undefined value somewhere. Firestore simply does not accept undefined values, as there is no equivalent representation. You will have to debug your code to figure out where that undefined value is coming from, or make sure they are stripped out before passing to set().

Perhaps you could check for undefined values in your for loop coming from checkboxes[i].value before pushing into arrayComplications. (And I'm not sure why you're trying to stringify the results of the push. That seems to have no effect anywhere.) It's up to you to debug this since we can't see all the values here.

setted · Accepted Answer · 2020-03-05 04:43:38Z

I also found another solution, I changed my input type to checkboxes instead of dropdowns.

HTML

                                <div class="col-md-6 pl-1">
                                    <div class="form-group">
                                        <label>Diabetes Complication</label>
                                        <br>
                                        <input type="checkbox" name="type" value="No Complications" /><b>No Complications</b>
                                        <br>
                                        <input type="checkbox" name="type" value="Diabetic Retinopathy" /><b>Retinopathy</b>
                                        <br>
                                        <input type="checkbox" name="type" value="Diabetic Neuropathy" /><b>Neuropathy</b>
                                        <br>
                                        <input type="checkbox" name="type" value="Diabetic Nephropathy" /><b>Nephropathy</b>
                                        <br>
                                        <input type="checkbox" name="type" value="Diabetic Cardiovascular"/><b>Cardiovascular</b>
                                        <br>
                                    </div>
                                </div>

Then for the script I got the checked values and stored them in an array and serialized them for firestore storage purposes.

var arrayComplications = [];
var checkboxes = document.querySelectorAll('input[type=checkbox]:checked');
for (var i = 0; i < checkboxes.length; i++) {
  JSON.stringify(arrayComplications.push(checkboxes[i].value));
}

Hope this helps to anyone

Collectives™ on Stack Overflow

Firestore/Javascript: FirebaseError: Function DocumentReference.set() called with invalid data. Unsupported field value: undefined

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related