How to display recently uploaded Image last in the screen?

Question

<script>
                    $(document).ready(function(){
                        $("#SaveClinicImages_search-panel").html("");
                        $(".bodyContainerDiv").css('height','60px');
                        document.getElementById("SaveClinicImages_submitButton").setAttribute("disabled","disabled");
                        $('#uploadClinicImages-button').addClass('col-sm-1');       
                    });

                     $('#SaveClinicImages_uploadFile').on('change',function(){
                            var Msg =$('[id^=SaveClinicImages_fileError]').val();
                            var errorMsg =$('[id^=PracticeSetting_fileError1]').val();
                            if(this.files[0].size/1024 > 500){
                                 $("#SaveClinicImages_submitButton").attr("disabled","disabled");       
                                alert(errorMsg);
                                $(this).val('');                                
                            }else{                               
                                 var fileUpload = $(this)[0];                               
                                 var regexPNG = new RegExp("([a-zA-Z0-9\s_\\.\-:;()*\+,\/;\-=[\\\]\^_{|}<>~`])+(.png)$");
                                 var regexJPG = new RegExp("([a-zA-Z0-9\s_\\.\-:;()*\+,\/;\-=[\\\]\^_{|}<>~`])+(.jpg)$");
                                 if (regexPNG.test(fileUpload.value.toLowerCase()) || regexJPG.test(fileUpload.value.toLowerCase()) )
                                 {
                                    $('#SaveClinicImages_submitButton').removeAttr('disabled');
                                    return true;
                                 } else {
                                     $("#SaveClinicImages_submitButton").attr("disabled","disabled");  
                                     alert(Msg);
                                     $(this).val('');
                                     $(this).focus();                                              
                                    return false;
                                 }
                            }

                    });

                    var form = document.forms.namedItem("SaveClinicImages");
                    form.addEventListener('submit', function(ev) {
                      var oData     = new FormData(form);                         
                      var oReq = new XMLHttpRequest();
                      oReq.open("POST", "UploadClinicImages/saveClinicImages", false);
                      oReq.onload = function(oEvent) {
                      if (oReq.status == 200) {                                                           
                            var data=oReq.responseText;
                            var jsonResponse = JSON.parse(data);
                            var newImageCount = parseInt($('#PracticeSetting_addedImageCount').val())+1;
                            $('#PracticeSetting_addedImageCount').val(newImageCount);


                            if(parseInt(newImageCount) >= 5){
                                $('#PracticeSetting_addclinicImages_div').hide();
                            }

                            for (var i=0; i < jsonResponse.length; i++){
                                if(jsonResponse[i].newAdded == 'Y'){
                                    if(parseInt(jsonResponse[i].rowIndex) > 6){
                                        newImageCount = jsonResponse[i].rowIndex;
                                    }
                                    addImageDiv(jsonResponse[i].relativePath,jsonResponse[i].rowIndex,parseInt(newImageCount)-1,jsonResponse[i].documentId,jsonResponse[i].primaryImage);
                                }
                            }                       

                            $('[id^=uploadClinicImages]').modal('hide');

                        } else {
                            alert("Error in adding file!");
                        }
                      };                            
                      oReq.send(oData);
                      ev.preventDefault();

                    }, false);


                    function addImageDiv(relativePath,rowIndex,newImageCount,documentId,primaryImage){
                        console.log(newImageCount);
                        var rowStr='';
                        var carouselStr='';
                        var indicatorStr='';
                            rowStr = rowStr +'<div class="col-sm-2" data-value="png" id="attachment'+rowIndex+'_display">'  
                            +'<a style="color:black;" href="#" class="close" data-value="'+documentId+'" onclick="deleteDoc(this)" id="deleteDoc'+rowIndex+'">×</a>'        
                            +'<div id="-button"><a href="#" data-id="'+documentId+'" data-value="docImage'+rowIndex+'" onclick="viewDocs(this)" id="viewDocs'+rowIndex+'">'
                            +'<img width="150" height="200" alt="" id="testImage_attachment'+rowIndex+'" class="img-thumbnail imgSize" src="data:image/png;utf8;base64,'+relativePath+'">'
                            +'</a></div><div class="checkbox"><center>';

                            if(primaryImage == 'Y'){
                                rowStr = rowStr +'<input type="checkbox" align="middle" value="" onchange="validateCheckBox(this)" id="checkbox-'+documentId+'" style="margin-left:-9px" checked="checked">';
                            }else{
                                rowStr = rowStr +'<input type="checkbox" align="middle" value="" onchange="validateCheckBox(this)" id="checkbox-'+documentId+'" style="margin-left:-9px">';
                            }
                            rowStr = rowStr +'</center></div></div>';

                            $("div>div.item").removeClass("active");

                            carouselStr = carouselStr +'<div id="docImage'+rowIndex+'" data-value="'+documentId+'" class="item active">'
                            +'<img alt="" class="img-responsive" src="data:image/png;utf8;base64,'+relativePath+'">'
                            +'</div>';

                            indicatorStr = indicatorStr +' <li id="indicator'+rowIndex+'" class="" data-slide-to="'+rowIndex+'" data-target="#myCarousel"></li>';


                        $('#insertAttachment').after(rowStr);
                        $('#insertCarouselItem').after(carouselStr);
                        $('#insesrtIndicator').before(indicatorStr);
                    }




                </script>

Here I am using ajax call for image upload. If i upload a image in the screen, the uploaded image is coming first in the screen. I want the recently updated image to come last followed by other image.I have attached my script here,I have tried by change the index but the image get overlapped. give me some solution

Answer 1

You can reverse json object data as follows:

  var jsonResponse = JSON.parse(data);
  var reversedData = jsonResponse.reverse();

if you have any key inside JSON you can do as following:

 var reversedData = jsonResponse.ANY_SUB_KEY.reverse();

OR

Get data from server in expected order( like uploaded date/time in descending order)