2

Estou com o seguinte problema: consigo salvar os inputs do usuário no realtime database do firebase, mas não consigo fazer a soma dos valores em Javascript e disponibilizar em tempo real na página.

Quero somar os dados de "age" e salvar no "total"

Realtime Database

var usersList = document.getElementById('usersList');
var usersNum = document.getElementById('usersNum');
var nameInput = document.getElementById('nameInput');
var ageInput = document.getElementById('ageInput');
var addButton = document.getElementById('addButton');

// Ao clicar no botão
addButton.addEventListener('click', function () {
    create(nameInput.value, ageInput.value);
});

// Função para criar um registro do pedido no Firebase
function create(name, age) {
    var data = {
        name: name,
        age: age
    };

    return firebase.database().ref().child('users').push(data);
}

firebase.database().ref('users').on('value', function (snapshot) {
    usersList.innerHTML = '';
    snapshot.forEach(function (item) {
        var li = document.createElement('li');
        li.appendChild(document.createTextNode(item.val().name + ': ' + item.val().age));
        usersList.appendChild(li);
    });
});

// Função para criar o total no Firebase
function create(totaldisp) {
    var datadisp = {
        totaldisp: totaldisp,
    };

    return firebase.database().ref().child('users').push(datadisp);
}

firebase.database().ref('users').on('value', function (snapshot) {
    usersNum.innerHTML = '';
    snapshot.forEach(function (item) {
        var li = document.createElement('li');
        li.appendChild(document.createTextNode(item.val().totaldisp + "disponíveis"));
        usersNum.appendChild(li);
    });
});


Trecho do HTML
<h1>Status dos Pedidos</h1>
    <br>
    <ul id="usersList"></ul>
    <hr>

<h1>Total de Reservas</h1>
    <br>
    <ul id="usersNum"></ul>
    <hr>

1 Resposta 1

0

Há algumas formas de contornar este problema.

Caso você precise somente mostrar o total localmente no momento da consulta e não separadamente em outra página. você não precisa atualizar e ler o banco de dados. basta somar diretamente no internamente javascript.

firebase.database().ref('users').on('value', function (snapshot) {
    let total = 0;
    // ou pode usar: total = snapshot.map(item => item.val().age).reduce((a,b) => a + b)
    usersList.innerHTML = '';
    snapshot.forEach(function (item) {
        total += item.val().age;
        var li = document.createElement('li');
        li.appendChild(document.createTextNode(item.val().name + ': ' + item.val().age));
        usersList.appendChild(li);
    });
    // seu código para atualizar o campo total aqui...
});

mas caso você precise isso em tempo real e sincronizadamente com vários usuários. sua abordagem pode ter valores errados caso aja acessos simultâneos. esta operação de soma não pode ser realizada no seu cliente, necessita ser abordada pelo servidor. acredito que o melhor método de realizar isto é ao adicionar o registro é adicionar a soma em forma de incremento usando firebase.database.ServerValue.increment()

// Função para criar um registro do pedido no Firebase
async function create(name, age) {
    var data = {
        name: name,
        age: age
    };

    await firebase.database().ref().child('users').push(data);
    return firebase.database().ref().update({
        firebase.database.ServerValue.increment(age)
    });
}

note que utilizei uma função assíncrona com async/await já que fiz duas operações no banco de dados, o ideal seria realizar uma operação em lote. no entanto ficaria muito complexo para o proposto. tente desta forma por enquanto.

Espero ter ajudado.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .