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

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);
  });