添加用户后如何修复Firebase DB列获取随机数？

Question

When I am adding a new user through the js it generates a random number bellow the Admins column like this .当我通过 js 添加新用户时，它会在Admins列下方生成一个随机数，如下所示。 I need to fix this as these tables have.我需要像这些表一样解决这个问题。 It must be the value of username .它必须是username的值。 If anyone of you knows how to fix this code according to my need please let me know guys :) Thanks如果你们中有人知道如何根据我的需要修复此代码，请告诉我：) 谢谢

This is HTML, JS and JSON Codes这是 HTML、JS 和 JSON 代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Firebase CRUD Javascript</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>

    <h1>Firebase CRUD with Javascript
        <br/><small><em>User App</em></small>
    </h1>


    <!-- add user module -->
    <section id="add-user-module" >
        <button id="open-add-user-form-btn">+</button>
        <form>
            <h2>Add User</h2>
            name:<br>
            <input type='text' data-key='name' class='user-input'><br>
           username:<br>
            <input type='text' data-key='username' class='user-input'><br>
            password:<br>
            <input type='text' data-key='password' class='user-input'><br>
            <button type='button' id="add-user-btn">add user</button>
        </form>
    </section>

    <!-- edit user module -->
    <section id="edit-user-module">
        <form>
            <h2>Edit user</h2>
            <input type="hidden" class="edit-userid">
            name:<br>
            <input type='text' data-key='name' class='edit-user-input'><br>
            username:<br>
            <input type='text' data-key='username' class='edit-user-input'><br>
            password:<br>
            <input type='text' data-key='password' class='edit-user-input'><br>
            <button type='button' id="edit-user-btn">save</button>
        </form>
    </section>


    <!-- show user module -->
    <ul id="user-list"></ul>
    <div id="user-detail"></div>


     <script src="https://www.gstatic.com/firebasejs/7.10.0/firebase-app.js"></script>
 <script src="https://www.gstatic.com/firebasejs/7.10.0/firebase-analytics.js"></script>
 <script src="https://www.gstatic.com/firebasejs/7.10.0/firebase-database.js"></script>
    <script type="text/javascript" src="app.js"></script>

  </body>

</html>


// !IMPORTANT: REPLACE WITH YOUR OWN CONFIG OBJECT BELOW


// Initialize Firebase
var firebaseConfig = {
  apiKey: "",
  authDomain: "test-a137f.firebaseapp.com",
  databaseURL: "https://test-a137f.firebaseio.com",
  projectId: "test-a137f",
  storageBucket: "test-a137f.appspot.com",
  messagingSenderId: "",
  appId: "",
  measurementId: ""
};

firebase.initializeApp(firebaseConfig);
  firebase.analytics();

// Firebase Database Reference and the child
const dbRef = firebase.database().ref();
const usersRef = dbRef.child('Admins');


    readUserData(); 


// --------------------------
// READ
// --------------------------
function readUserData() {

    const userListUI = document.getElementById("user-list");

    usersRef.on("value", snap => {

        userListUI.innerHTML = ""

        snap.forEach(childSnap => {

            let key = childSnap.key,
                value = childSnap.val()

            let $li = document.createElement("li");

            // edit icon
            let editIconUI = document.createElement("span");
            editIconUI.class = "edit-user";
            editIconUI.innerHTML = " ✎";
            editIconUI.setAttribute("userid", key);
            editIconUI.addEventListener("click", editButtonClicked)

            // delete icon
            let deleteIconUI = document.createElement("span");
            deleteIconUI.class = "delete-user";
            deleteIconUI.innerHTML = " ☓";
            deleteIconUI.setAttribute("userid", key);
            deleteIconUI.addEventListener("click", deleteButtonClicked)

            $li.innerHTML = value.name;
            $li.append(editIconUI);
            $li.append(deleteIconUI);

            $li.setAttribute("user-key", key);
            $li.addEventListener("click", userClicked)
            userListUI.append($li);

        });


    })

}



function userClicked(e) {


        var userID = e.target.getAttribute("user-key");

        const userRef = dbRef.child('Admins/' + userID);
        const userDetailUI = document.getElementById("user-detail");

        userRef.on("value", snap => {

            userDetailUI.innerHTML = ""

            snap.forEach(childSnap => {
                var $p = document.createElement("p");
                $p.innerHTML = childSnap.key  + " - " +  childSnap.val();
                userDetailUI.append($p);
            })

        });


}





// --------------------------
// ADD
// --------------------------

const addUserBtnUI = document.getElementById("add-user-btn");
addUserBtnUI.addEventListener("click", addUserBtnClicked)



function addUserBtnClicked() {

    const usersRef = dbRef.child('Admins');

    const addUserInputsUI = document.getElementsByClassName("user-input");

    // this object will hold the new user information
    let newUser = {};

    // loop through View to get the data for the model 
    for (let i = 0, len = addUserInputsUI.length; i < len; i++) {

        let key = addUserInputsUI[i].getAttribute('data-key');
        let value = addUserInputsUI[i].value;
        newUser[key] = value;
    }

    usersRef.push(newUser)


   console.log(myPro)



}


// --------------------------
// DELETE
// --------------------------
function deleteButtonClicked(e) {

        e.stopPropagation();

        var userID = e.target.getAttribute("userid");

        const userRef = dbRef.child('Admins/' + userID);

        userRef.remove();

}


// --------------------------
// EDIT
// --------------------------
function editButtonClicked(e) {

    document.getElementById('edit-user-module').style.display = "block";

    //set user id to the hidden input field
    document.querySelector(".edit-userid").value = e.target.getAttribute("userid");

    const userRef = dbRef.child('Admins/' + e.target.getAttribute("userid"));

    // set data to the user field
    const editUserInputsUI = document.querySelectorAll(".edit-user-input");


    userRef.on("value", snap => {

        for(var i = 0, len = editUserInputsUI.length; i < len; i++) {

            var key = editUserInputsUI[i].getAttribute("data-key");
                    editUserInputsUI[i].value = snap.val()[key];
        }

    });




    const saveBtn = document.querySelector("#edit-user-btn");
    saveBtn.addEventListener("click", saveUserBtnClicked)
}


function saveUserBtnClicked(e) {

    const userID = document.querySelector(".edit-userid").value;
    const userRef = dbRef.child('Admins/' + userID);

    var editedUserObject = {}

    const editUserInputsUI = document.querySelectorAll(".edit-user-input");

    editUserInputsUI.forEach(function(textField) {
        let key = textField.getAttribute("data-key");
        let value = textField.value;
        editedUserObject[textField.getAttribute("data-key")] = textField.value
    });



    userRef.update(editedUserObject);

    document.getElementById('edit-user-module').style.display = "none";


}



{
  "Admins": [
    {
      "name": "Kuruppu",
      "username": 117,
      "password": "kuruppu123"
    },
    {
      "name": "Sandeepa",
      "username": 118,
      "password": "sandeepa123"
    },
    {
      "name": "Lakshan",
      "username": 119,
      "password": "lakshan123"
    }

  ]

}

Answer 1

You should use "set" instead of "push" in your addUserBtnClicked function.您应该在addUserBtnClicked函数中使用“set”而不是“push”。

Like that:像那样：

function addUserBtnClicked() {

    const usersRef = dbRef.child('Admins');

    const addUserInputsUI = document.getElementsByClassName("user-input");

    // this object will hold the new user information
    let newUser = {};

    // loop through View to get the data for the model 
    for (let i = 0, len = addUserInputsUI.length; i < len; i++) {

        let key = addUserInputsUI[i].getAttribute('data-key');
        let value = addUserInputsUI[i].value;
        newUser[key] = value;
    }

    usersRef.child(userID).set(newUser) //enter the userID here
}

添加用户后如何修复Firebase DB列获取随机数？

问题描述

1 个解决方案

解决方案1
0 2020-03-10 08:26:06

添加用户后如何修复Firebase DB列获取随机数？

问题描述

1 个解决方案

解决方案1 0 2020-03-10 08:26:06

解决方案1
0 2020-03-10 08:26:06