Hey i'm learning how to work with JS and firebase. My problem my orders gets loaded at random and i always want it to sorted by time. I've tried sorting the data from firebase but it still comes in at random.
Iv'e looked at a couple of things regarding sorting my map called "rows" but can't seem to implement it in any reasonable way.
This is how i tried sorting my firebase db before getting it at my order page
// route for database
router.get("/orderslist", (req, res) => {
let orders = []
let number_of_orders
// Getting the snapshot of the order collection
db.collection('orders').orderBy('time').get().then( productSnapshot => {
number_of_orders = productSnapshot.size
// iterating over the order snapshot
productSnapshot.forEach(orderDoc => {
// creating an order object and assigning the ID and the rest of the information from the database
var order = {
id: orderDoc.id,
customer_name: orderDoc.data().customer_name,
date: orderDoc.data().date,
comments: orderDoc.data().comments,
time: orderDoc.data().time,
total: orderDoc.data().total,
order_status: orderDoc.data().order_status,
products: []
}
// using the id, to get the products from the subcollection
db.collection('orders/' + order.id + '/products').get().then( productSnapshot => {
// iterating over the product snapshot
productSnapshot.forEach(productDoc => {
// creating a product object
var product = {
name: productDoc.data().name,
price: productDoc.data().price
}
// then we push the product object to the list of products in the order object
order.products.push(product)
});
// we are finished iterating over the productsnapshot and now we can push it to the orders list
orders.push(order)
// checks if the list is filled with everything from the database
if(orders.length == number_of_orders){
return res.json(orders)
}
});
});
});
});
This is my json input
[
{
"id": "s2hym8IVa10pEgtgmmq9",
"customer_name": "Mikkel",
"date": "13/05-2020",
"comments": "",
"time": 1050,
"total": 40,
"order_status": true,
"products": [
{
"name": "Latte",
"price": 40
}
]
},
{
"id": "xWmlB9fHD4rw8Di75llp",
"customer_name": "Emil",
"date": "07/05-2020",
"comments": "without sugar",
"time": 1211,
"total": 40,
"order_status": false,
"products": [
{
"name": "Latte",
"price": 40
}
]
},
{
"id": "ggYSVKA1i0U8khIpeud4",
"customer_name": "Oliver",
"date": "01/05-2020",
"comments": "order to be packed neatly because im on a bike",
"time": 1450,
"total": 38,
"order_status": false,
"products": [
{
"name": "Latte Macchiato",
"price": 38
}
]
},
{
"id": "pq62yo42KS41VgeGGiZX",
"customer_name": "Naida",
"date": "07/05-2020",
"comments": "nope",
"time": 1257,
"total": 40,
"order_status": true,
"products": [
{
"name": "Latte",
"price": 40
}
]
},
{
"id": "p2dKspiU535P29Gex6Uz",
"customer_name": "Alper",
"date": "13/05-2020",
"comments": "",
"time": 1937,
"total": 40,
"order_status": false,
"products": [
{
"name": "Latte",
"price": 40
}
]
}
]
This is my orderpage JS
// jquery getting our json order data from API
$.get("http://localhost:8888/orderslist", (data) => {
// loops through our orderlist api
let rows = data.map(item => {
let $clone = $('#frontpage_new_ordertable tfoot tr').clone();
$clone.data("id", item.id);
$clone.find('.customer_name').text(item.customer_name);
$clone.find('.date').text(item.date);
$clone.find('.time').text(item.time);
$clone.find('.pickup').text(item.pickup);
$clone.find('.comments').text(item.comments);
$clone.find('.total').text(item.total + ' Kr.');
// accept and cancel buttons
$clone.find('.order_status').html(
`<button class="acceptOrder" type="button">Accept</button>` +
`<button class="cancelOrder" type="button">Cancel</button>`
);
// loops through orders product name
let productsName = item.products.map(prod => `${prod.name}`);
$clone.find('.products').html(productsName.join('<br />'));
// loops through orders product price
let productsPrice = item.products.map(prod => `${prod.price} Kr.`);
$clone.find('.price').html(productsPrice.join('<br />'));
return $clone;
});
//appends to our frontpage html
$("#frontpage_new_ordertable tbody").append(rows);
});
});
