Empece con firebase (cuenta free y utilizo cloud firestore) y estoy utilizando framework 7. en una parte de mi app donde puse un buscador, se tiene que cargar una lista con 4500 clientes ya almacenados como documentos en firebase(cada cliente un documento).
El problema es que no solo era super lento en cargar todos los clientes sino que en un par de pruebas llegue al limite (por lo que leí e inspeccione) de consultas diarias a documentos (20.000 por día en cuentas gratuitas firebase) entonces pensé en utilizar un array dentro de un solo documento y ahí cargar la lista de clientes!!!
pero no encuentro en ningún lado como tengo que hacer para insertar el array en un bucle dentro del código que me da firebase. Pongo el código que tengo acá abajo!!!
<template>
<div class="page">
<div class="navbar">
<div class="navbar-inner sliding">
<div class="left">
<a href="#" class="link back">
<i class="icon icon-back"></i>
<span class="ios-only">Back</span>
</a>
</div>
<div class="subnavbar">
<form class="searchbar">
<div class="searchbar-inner">
<div class="searchbar-input-wrap">
<input type="search" placeholder="Buscar Cliente">
<i class="searchbar-icon"></i>
<span class="input-clear-button"></span>
</div>
<span class="searchbar-disable-button">Cancelar</span>
</div>
</form>
</div>
<div class="title">About Framework7</div>
</div>
</div>
<div class="page-content">
<div class="block-title">Welcome to Framework7</div>
<div class="block block-strong">
<div class="searchbar-backdrop"></div>
<!-- search target list -->
<div class="list searchbar-found">
<ul id="clientes2">
</ul>
</div>
<div class="block searchbar-not-found">
<div class="block-inner">Sin resultados</div>
</div>
</div>
</div>
</div>
</template>
<script>
// script must return component object
return {
on: {
pageInit: function () {
var searchbar = app.searchbar.create({
el: '.searchbar',
searchContainer: '.list',
searchIn: '.item-title',
on: {
search(sb, query, previousQuery) {
console.log(query, previousQuery);
}
}
});
var clientes2= document.getElementById('clientes2');
db.collection("Clientes").onSnapshot((querySnapshot) => {
clientes2.innerHTML = '';
querySnapshot.forEach((doc) => {
clientes2.innerHTML += '<li><a href="#" data-cliente2="'+`${doc.id}`+'" class="item-link item-content"><div class="item-inner"><div class="item-title-row"><div class="item-title">'+`${doc.id}`+'</div></div></div></a></li>'
});
});
$$(document).on('click', '[data-cliente2]', function () {
variable2=$$(this).attr('data-cliente2');
app.router.navigate('/movimientos/'+ variable2);
});
},
pageAfterOut: function () {
},
}
}
</script>