JSON.stringify(var) is empty even the console log says otherwise

Question

I am working with angular and I got into a problem in the JQuery section:

 console.log(sustancia); // responds with {data: "8", comprado: "5", usado: "5", fecha: "2019-10-02", documento: "1234", …} this is correct and its treated as an object

 console.log(JSON.stringify(sustancia)); // responds with {} making me unable to send it through a $.post

I tried to make it exactly as the previous code by pushing it into a array which gives the same problem

If I try to review it in the console log its working but if I try to use JSON.stringify it doesn't return anything.
I tried sending it through the $.post without the JSON.stringify but it didn't work.
here is some of the code:

$('.singlealta').on('mousedown',function(){
      var elementos = [];
      var sustancia = {};
      $('#editorial >tr').click(function(){
         var id_sustancia = $(this).find('.id_sustancia').val();
         var comprado   = $(this).find('.comprado').val();
         var usado   =$(this).find('.usado').val();
         var fecha    =$(this).find('.fecha').val();
         var tipo_documento   =$(this).find('.tipo_documento').val();
         var sedronar    =$(this).find('.sedronar').val();
        sustancia = 
          { data:id_sustancia,comprado:comprado,usado:usado,fecha:fecha,documento:tipo_documento,sedronar:sedronar}
          elementos.push(sustancia);
          console.log(sustancia); //returns {data: "8", comprado: "5", usado: "5", fecha: "2019-10-02", documento: "1234", …}
 })
 console.log(JSON.stringify(elementos)); //returns []
 console.log(JSON.stringify(sustancia)); //returns {}
 
 $.post("*myurl**/phpfile*",JSON.stringify(sustancia)); //sends {} to the php file
 $.post("*myurl**/phpfile*",JSON.stringify(sustancia)); //sends [] to the php file
 
 console.log(elementos); //returns an array with the sustancia object below
 console.log(sustancia); //still returns {data: "8", comprado: "5", usado: "5", fecha: "2019-10-02", documento: "1234", …}
       });

Before this i had another JQuery almost identical that works perfect

$('#modificacion').on('mousedown',function(){
      var elementos = [];
      var i =0;
      $('#editorial >tr').each(function(){
      var id_sustancia   =$(this).find('.id_sustancia').val();
      var comprado   =$(this).find('.comprado').val();
      var usado   =$(this).find('.usado').val();
      var fecha   =$(this).find('.fecha').val();
      var tipo_documento  =$(this).find('.tipo_documento').val();
      var sedronar   =$(this).find('.sedronar').val();
       if(i>=0){
 var sustancia = 
 { data:id_sustancia,comprado:comprado,usado:usado,fecha:fecha,documento:tipo_documento,sedronar:sedronar}
 elementos.push(sustancia);
 console.log(elementos);    
       }
 i=i+1;
      });
      $.post("*myurl**/phpfile*",JSON.stringify(elementos));
     });
     //this one works pefectly and is not so diferent

any idea of what can be causing the JSON.stringify to return [] & {}?
thanks in advance and sorry if I had grammar errors, spanish is my first language but i can't think of how to ask it.

Answer 1

This happens because the variable just has value after of some action. With this, your variables just will has value after a click action

$('#modificacion').on('mousedown',function(){
    $('#editorial >tr').click(function(){
        ...
        sustancia = {data:id_sustancia ...}
        elementos.push(sustancia);
        console.log(sustancia);

        // With this, the 'sustancia' just has value after click on '#editorial >tr'
        // so, the jQuery call this call back.
        // The result is there here inside the variable is asingn 
    });

    // But here happens in another momment,
    // It is call when 'mousedown'
    // The 'mousedown' happens before of 'click' in 'tr'
    console.log(JSON.stringify(elementos)); //returns []
    console.log(JSON.stringify(sustancia));
});

The correct way is change your post to inside of 'click' action, like this:

$('#modificacion').on('mousedown',function(){
    $('#editorial >tr').click(function(){
        ...
        sustancia = {data:id_sustancia ...}
        elementos.push(sustancia);
        console.log(sustancia);

        // Now it works, because the click happens and asingn the variables
        $.post("*myurl**/phpfile*",JSON.stringify(sustancia)); //sends {} to the php file
        $.post("*myurl**/phpfile*",JSON.stringify(sustancia));
    });
});