Retrieving a firebase array and assigning to multiple text fields

Question

I'm having some trouble with this bit of javascript for a roster project I'm working on;

    // Creating Inputs
    const room1aminput = document.getElementById("room1am")
    const room1pminput = document.getElementById("room1pm")
    const room2aminput = document.getElementById("room2am")
    const room2pminput = document.getElementById("room2pm")
    const room3aminput = document.getElementById("room3am")
    const room3pminput = document.getElementById("room3pm")
    const room4aminput = document.getElementById("room4am")
    const room4pminput = document.getElementById("room4pm")

    // Save button functionality
    savebutton.addEventListener("click", function() {
        const selectedDate = rosterDateInput.value
        // Changing Cath Lab Inputs to Values
        let room1am = room1aminput.value;
        let room1pm = room1pminput.value;
        let room2am = room2aminput.value;
        let room2pm = room2pminput.value;
        let room3am = room3aminput.value;
        let room3pm = room3pminput.value;
        let room4am = room4aminput.value;
        let room4pm = room4pminput.value;

        // Creating an Array for the roster
        let fullroster = [
           room1am, room1pm,
           room2am, room2pm,
           room3am, room3pm,
           room4am, room4pm,
         ];

        // Linking the roster to the date in firebase
            const datedroster = ref(database, "roster/" + selectedDate)

            push(datedroster, fullroster)
    })

    // Function to retrieve the roster for the date
    function retrieveRoster(selectedDate) { 
       const rosterRef = ref(database, "roster/" + selectedDate);
       onValue(rosterRef, function(snapshot) {
            const rosterObject = snapshot.val();
            console.log("From Firebase:", rosterObject);
            if (rosterObject) {
                // Access the roster data
                const rosterArray = Object.values(rosterObject);

                // Update the input fields
            room1aminput.value = rosterArray[0] || "";
            room1pminput.value = rosterArray[1] || "";
            room2aminput.value = rosterArray[2] || "";
            room2pminput.value = rosterArray[3] || "";
            room3aminput.value = rosterArray[4] || "";
            room3pminput.value = rosterArray[5] || "";
            room4aminput.value = rosterArray[6] || "";
            room4pminput.value = rosterArray[7] || "";

                dateDisplay.textContent = formatDate(new Date(selectedDate));
          } else {
            // If there is no roster for the date, clear the fields
                room1aminput.value = "";
                room1pminput.value = "";
                room2aminput.value = "";
                room2pminput.value = "";
                room3aminput.value = "";
                room3pminput.value = "";
                room4aminput.value = "";
                room4pminput.value = "";

                dateDisplay.textContent = formatDate(new Date(selectedDate));
          }
       });
    }

This successfully saves an array in firebase with this structure;

    roster
        2023-09-29
            -NfUTHzzpiOxpUzJ3cB1
                0:"a"
                1:"b"
                2:"c"
                3:"d"
                4:"e"
                5:"f"
                6:"g"
                7:"h"

And when retrieving, the console log returns this;

    From Firebase: 
        Object { "-NfUTHzzpiOxpUzJ3cB1": (8) […] }
            "-NfUTHzzpiOxpUzJ3cB1": Array(8) [ "a", "b", "c", … ]
                0: "a"
                1: "b"
                2: "c"
                3: "d"
                4: "e"
                5: "f"
                6: "g"
                7: "h"
            length: 8
            <prototype>: Array []
            <prototype>: Object { … }
            roster.js:207:17

But when setting the inputs, all values get placed in the first box;

    room1aminput value: a,b,c,d,e,f,g,h roster.js:224:21
    room1pminput value: <empty string> roster.js:225:21
    room2aminput value: <empty string> roster.js:226:21
    room2pminput value: <empty string> roster.js:227:21
    room3aminput value: <empty string> roster.js:228:21
    room3pminput value: <empty string> roster.js:229:21
    room4aminput value: <empty string> roster.js:230:21
    room4pminput value: <empty string> roster.js:231:21

Any ideas on how this can be fixed? Thanks

I've tried converting to strings like this;

            room1aminput.value = rosterArray[0] ? rosterArray[0].toString() : "";
            room1pminput.value = rosterArray[1] ? rosterArray[1].toString() : "";     
            room2aminput.value = rosterArray[2] ? rosterArray[2].toString() : "";     
            room2pminput.value = rosterArray[3] ? rosterArray[3].toString() : "";     
            room3aminput.value = rosterArray[4] ? rosterArray[4].toString() : "";     
            room3pminput.value = rosterArray[5] ? rosterArray[5].toString() : "";     
            room4aminput.value = rosterArray[6] ? rosterArray[6].toString() : "";     
            room4pminput.value = rosterArray[7] ? rosterArray[7].toString() : "";

And a function that iterated through the room values, which also didn't work, but wouldn't have worked for expanding the roster either as not all inputs follow the same naming convention, and I need to be able to add multiple entries under each input.

Answer 1

Object.values() returns an array of a given object's own enumerable string-keyed property values. source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Object/values

You can change

const rosterArray = Object.values(rosterObject);

to

const rosterArray = Object.values(rosterObject)[0];