json ajax jquery returns [object object] wrong output

I need some help over here. I am coding simple inventory. I've been trying to fix this whole night but with no success. I have problem with output the json data in html table in second $.each with ajax call. What I found annoying no matter what I do, even using JSON.stringify it continues to returns Object object in html, but no problem with console.log.

The code:

$('.filterProduct').on('change', function(event) {

            $.ajax({
            method: 'POST',
            url: 'filter_products', 
            data: {
                'brand_id' : $('#brand_id').val(),
                'type_id' : $('#type_id').val()   
                },


            success: function(data){ 


                $('tbody').empty();
                var i=1;
                $.each(data, function(index, product) {
                    $('tbody').show('fast');

                    $('tbody').append('<tr><td>'+i+++'</td><td>'+product.sku+'</td><td>'+product.product_name+'</td><td>'+product.description+'</td><td>'+product.price+'</td><td id="sizes">'+
                            $.each(product.sizes, function(ind, val) {
                                sizeName = val.size_name;
                                sizeQty = val.quantity_per_size;
                                var tdSizes = $('td#sizes');

                                console.log(val.size_name, val.quantity_per_size);
                                console.log(tdSizes.append(sizeName, sizeQty));
                        })

                        +'</td><td>'+product.id+'</td><td>'+product.feature_image+'</td><td>'+product.status_id+'</td><td>'+'Reserve'+'</td>');
                });
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.log(JSON.stringify(jqXHR));
                console.log("AJAX error: " + textStatus + ' : ' + errorThrown);
            }
        });
    });

Here it is the json in console. json data in console

What is interesting is that in first 3 iterations it returns prevobject but next 3 the correct selector. I tried selecting the needed tag with nth-of-type and also targeting with class and id, in all situations it returns the same wrong results. But console.log shows correct values, but in tag wrong. the returning of data shown in console

Here it is the output in HTML (I can't post more than 2 images), as you can see it shows the values after 3th iteration. I have no explanation for that. But if I try to put the output outside the (even in it throws the wrong output) tag, for example in it shows the correct values.

html shown in table (I can show it in image, so I will paste it here):

[object Object],[object Object],[object Object]L5XL17L9

[object Object],[object Object]L9

[object Object]

as you may have noticed, last does not return any values..

Hope you will help me, if you need more info, just write me. Thanks

Answers 1

  • Your code is a bit messy. Take the second each out of the html creation part.

    Create a variable sizes_html and save the each result in it. Then you add the sizes_html as variable... I've never seen a an $.each in the middle of sting concatenation.

    Here's what I mean:

    var product = {sizes:[ 
    {size_name:"XS", quantity_per_size: 5},
    {size_name:"S", quantity_per_size: 10},
    {size_name:"M", quantity_per_size: 15},
    {size_name:"L", quantity_per_size: 20},
    {size_name:"XL", quantity_per_size: 25}
    ]};
    
    
    var sizes_html = "";
    
    $.each(product.sizes, function(ind, val) {
      sizeName = val.size_name;
      sizeQty = val.quantity_per_size;
      sizes_html += sizeName + " (" + sizeQty + ") |";
    });
    
    
    $('tbody').append('<tr><td>123</td><td>'+product.sku+'</td><td>'+product.product_name+'</td><td>'+product.description+'</td><td>'+product.price+'</td><td id="sizes">'+sizes_html+'</td><td>'+product.id+'</td><td>'+product.feature_image+'</td><td>'+product.status_id+'</td><td>'+'Reserve'+'</td>');
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
    <table>
      <thead>
      </thead>
      
      <tbody>
      </tbody>
    </table>

    Much cleaner. Hope that helps. Good luck!


Related Articles