Firebase子列随机ID替换及消息格式转数组问题求助

Hey there! Let's fix those two issues you're facing with Firebase and your form submission. Here's the modified code along with clear explanations:

Modified JavaScript Code #

// Initialize Firebase (ADD YOUR OWN DATA)
var firebaseConfig = {
    apiKey: "api key here",
    authDomain: "test-a137f.firebaseapp.com",
    databaseURL: "https://test-a137f.firebaseio.com",
    projectId: "test-a137f",
    storageBucket: "test-a137f.appspot.com",
    messagingSenderId: "id here",
    appId: "appId goes here",
    measurementId: "the measurementId"
};
firebase.initializeApp(firebaseConfig);
firebase.analytics();

// Reference messages collection
var messagesRef = firebase.database().ref('Admins');

// Listen for form submit
document.getElementById('contactForm').addEventListener('submit', submitForm);

// Submit form
function submitForm(e){
    e.preventDefault();

    // Get values
    var name = getInputVal('name');
    var company = getInputVal('company');
    var email = getInputVal('email');
    var phone = getInputVal('phone');
    var message = getInputVal('message');

    // Save message
    saveMessage(name, company, email, phone, message);

    // Show alert
    document.querySelector('.alert').style.display = 'block';

    // Hide alert after 3 seconds
    setTimeout(function(){
        document.querySelector('.alert').style.display = 'none';
    },3000);

    // Clear form
    document.getElementById('contactForm').reset();
}

// Function to get get form values
function getInputVal(id){
    return document.getElementById(id).value;
}

// Save message to firebase (UPDATED)
function saveMessage(name, company, email, phone, message) {
    // Reference the node using the user's name as the key
    var userRef = messagesRef.child(name);

    // Use transaction to safely update the messages array (handles concurrency)
    userRef.transaction(function(currentUserData) {
        // If no existing data for this user, initialize the structure
        if (!currentUserData) {
            return {
                name: name,
                messages: [{
                    company: company,
                    email: email,
                    phone: phone,
                    message: message
                }]
            };
        } else {
            // Add the new message to the existing messages array
            currentUserData.messages.push({
                company: company,
                email: email,
                phone: phone,
                message: message
            });
            return currentUserData;
        }
    }, function(error, committed, snapshot) {
        if (error) {
            console.error('Failed to save message:', error);
        } else if (committed) {
            console.log('Message saved successfully!');
        } else {
            console.log('Transaction aborted - no changes made.');
        }
    });
}

Key Changes & Explanations #

1. Replace Random Node IDs with the User's Name #

• Old code: var newMessageRef = messagesRef.push();
  The push() method automatically generates a unique random ID for each entry, which is why you saw those random numeric/string keys in your Firebase database.
• New code: var userRef = messagesRef.child(name);
  We now use the name input value directly as the node key under the Admins collection. This creates a node named exactly after the user's input (e.g., "lakshan") instead of a random ID.

2. Convert Messages to Array Type #

• Old structure: Each form submission was stored as a separate object under a random ID, making messages scattered as individual objects.
• New structure: For each user, we maintain a messages array that holds all their submitted entries. This groups all messages for a user together in an array, which matches your requirement of using an array type.
• We use Firebase's transaction() method to update the array safely. This prevents race conditions if multiple submissions happen at the same time, ensuring no data gets lost during concurrent updates.

Quick Note on Duplicate Names #

If two users submit the form with the same name value, their messages will be stored under the same node (since we're using name as the key). If you want to avoid merging data for duplicate names later, you could combine the name with a timestamp or unique ID, but we've stuck to your original request of using the raw name value.

内容的提问来源于stack exchange，提问作者Lakshan Sandeepa