检索 Firebase 数组并分配给多个文本字段

Question

我在处理我正在处理的花名册项目时遇到了一些 javascript 问题；

    // 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));
          }
       });
    }

这成功地在 firebase 中保存了一个具有此结构的数组；

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

检索时，控制台日志返回此；

    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

但是在设置输入时，所有值都会放置在第一个框中；

    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

关于如何解决这个问题有什么想法吗？谢谢

我尝试过转换为这样的字符串；

            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() : "";

还有一个迭代房间值的函数，它也不起作用，但也无法用于扩展花名册，因为并非所有输入都遵循相同的命名约定，并且我需要能够在下面添加多个条目每个输入。

Answer 1

Object.values()

返回给定对象自己的可枚举字符串键控属性值的数组。来源：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Object/values

你可以改变

const rosterArray = Object.values(rosterObject);

到

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