During an API url call in my web application, my html page is crashes unexpectedly and throws a 'out of memory' error. I'm really not sure what the problem is. I am using xhr object to fetch data from server. I tested multiple hotel search api from rapid api but every single of them caused the same problem. My codes are :

JAVASCRIPT ONE

const btn4 = document.querySelector('#hotelBtn')

btn4.addEventListener('click', function showHotels(e) {

  var userQuery = $('#hotelQuery').val();


  const data = null;

  const xhr = new XMLHttpRequest();

  xhr.addEventListener("readystatechange", function () {
        if (this.readyState === this.DONE) {
              var hotelObj = JSON.parse(this.responseText)
              console.log(hotelObj)


              var myContainer = document.getElementById('query_results')

              for (let i = 0; hotelObj.length; i++) {

                    var myCol = document.createElement('div')
                    myCol.setAttribute('class', 'col')

                    var myRow = document.createElement('div')
                    myRow.setAttribute('class', 'row')



                    myRow.append(myCol)
                    myContainer.append(myRow)


              }





        }
  });

  xhr.open("GET", "https://booking-com.p.rapidapi.com/v1/hotels/locations?locale=en-gb&name=" + userQuery);
  xhr.setRequestHeader("x-rapidapi-host", "booking-com.p.rapidapi.com");
  xhr.setRequestHeader("x-rapidapi-key", "mykey");

  xhr.send(data);

  e.preventDefault()

})

HTML ONE

<div id="query_results">


                        <!-- Filled by Javascript -->





    
  </div>

Out of memory error :