JSON list shows as [ ] even if it contains objects? - arrays

Question

I'm trying to get a list of quantities (identified as cantidad) chosen of each product (as id) to my flask controller. Since wtform didn't adapted well to my needs I had to use json and jQuery, but no matter what I do, the list of objects is seen as empty in the controller, even if in the frontend it does has something inside.
This is the JavaScript:
This function posts the order which should be a list of quantities with id assigned:
<script type="text/JavaScript">
function setPedido(order){
console.log(order);
$.ajax({
url: "{{url_for('main.pedido')}}",
type: 'POST',
data: JSON.stringify(order),
contentType: 'application/json;charset=UTF-8',
success: function(response) {
if (response.redirect) {
window.location.href = response.redirect;
}
}
});
};
When "pedido" (order) button is clicked, gets all assigned quantities and their respective product IDs:
$(".btnPedido").click(function(){
var order = []
$(function() {
var lines = $(".btnAgregar.active")
for(var i = 0; i < lines.length; i++) {
console.log(lines[i]);
order.push({
'id': $(lines[i]).closest("tr").find('.btnPedido').val(),
'cantidad' : $(lines[i]).closest("tr").find('.inpCantidad').val()
});
}
});
setPedido(order);
});
This marks each quantity input as ready to order:
$(".btnAgregar").click(function(){
if($(this).val() == 0){
$(this).val(1);
$(this).text("Agregado");
}else{
$(this).val(0);
$(this).text("Agregar");
}
$(this).toggleClass('btn-info btn-success active');
});
</script>
This shows in the console:
And this in flask controller (notice data):

Answer 1

The problem was at this function, paying better attention i declared a function inside another function, wich is executed at a different scope than setPedido(order), at wich point it stills empty.
To make it worse, the console.log inside the inner function where misleading.
$(".btnPedido").click(function(){
var order = []
$(function() {
var lines = $(".btnAgregar.active")
for(var i = 0; i < lines.length; i++) {
console.log(lines[i]);
order.push({
'id': $(lines[i]).closest("tr").find('.btnPedido').val(),
'cantidad' : $(lines[i]).closest("tr").find('.inpCantidad').val()
});
}
});
setPedido(order);
});
The correct way to do it is:
$(".btnPedido").click(function(){
var order = []
var lines = $(".btnAgregar.active")
for(var i = 0; i < lines.length; i++) {
console.log(lines[i]);
order.push({
'id': $(lines[i]).closest("tr").find('.btnPedido').val(),
'cantidad' : $(lines[i]).closest("tr").find('.inpCantidad').val()
});
}
setPedido(order);
});