I'm getting all the Data from Array in Jquery when I console.log() it then it shows me all the data of the array but when I append the data with <div> then it only returns me the last value I know that it is an overriding issue but how can I solve this. My array in console.log() is

enter image description here

and my code is


        ) {

            $("#order_search").keyup(function () {

                var textinput = $('#order_search').val().substring(0, 20);
                // alert(textinput);

                        url: '<?php echo $this->getUrl('search/index/SearchBoxData') ?>',
                        dataType: 'json',
                        data: {
                            input_val : textinput
                        success: function(data) {

                            $.each( data, function( key, value ) {
                                $.each( value['hits'], function( ky, val ) {

                                    console.log('ky => '+ky);

                                    console.log('val => '+val);
                                    $.each(val , function(k, va){

                                        console.log('k => '+k);
                                        console.log('va => '+va);

                                        if(k == 'order_no')

                                        }else if(k == 'customer_name')
                                        }else if(k == 'customer_email')
                                        }else if(k == 'all_products')
                                            $.each(va , function(g,v){

                                                if(g == 'name0')
                                                }else if(g == 'sku0')

                                                 $('<div class=\'custom-order\'> <h3> Order Number: </h3> <b id=\'a1\'> order ID </b> <br> <h3>Customer Name</h3> <b id=\'a2\'> customer Name </b> <br> <h3>Customer Email</h3><b id=\'a3\'> customer Email </b> <br><h3>Product Name</h3><b id=\'a4\'> Product Name: </b> <br><h3>Product SKU</h3><b id=\'a5\'> Product SKU: </b> <br></div>').appendTo('#asad');
                                                console.log('g => '+g);
                                                console.log('v => '+v);


                        error: function (xhr, status, errorThrown) {
                            console.log('Error happens. Try again.');



    input[id=order_search] {
        width: 280px;
        box-sizing: border-box;
        border: 2px solid #ccc;
        border-radius: 4px;
        font-size: 16px;
        background-color: white;
        /*background-image: url('searchicon.png');*/
        background-position: 10px 10px;
        background-repeat: no-repeat;
        padding: 12px 20px 12px 40px;
        -webkit-transition: width 0.4s ease-in-out;
        transition: width 0.4s ease-in-out;

    input[id=order_search]:focus {
        width: 100%;

<p>Animated search form:</p>

<form type="POST">
    <input type="text" id="order_search" name="searchh" placeholder="Search Order by Order_ID">
    <br /><input type="text" id="textbox2"/><br>
    <br /><input type="text" id="textbox3"/>

<div id ='asad'>Khan</div>


now in the result only last value is shown as you can see in image below enter image description here Now how to show all the data?



Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.