title: Uncaught RangeError; Maximum call stack size exceeded
body: <p>I'm trying to list data from a JSON source.</p>
  
  <p>I loop the data in a <code>$.each</code>, and display it using <code>append</code>.</p>
  
  <pre><code>var result = JSON.parse(response);
  
  if(result.count != 0) {
      $(".modal").find("#search-results").html("&lt;p&gt;" + result.count + " result(s) found:&lt;/p&gt;");
      var list = $(".modal").find("#search-results").append("&lt;div class=\"list-group dbsearch-list-group\"&gt;&lt;/div&gt;").find('div');
      $.each(result.results, function(index, value) {
          var link = list.append('&lt;a href="javascript:;" class="list-group-item p-0 list-group-item-action" id="autosearch" data-id="' + value.itemid + '" data-instantclose="true"&gt;&lt;/a&gt;').find('a');
          var col = link.append('&lt;div class="row"&gt;&lt;/div&gt;').find('div');
              col.append('&lt;div class="col-sm py-0 col-md-auto"&gt;&lt;img src="' + value.icon + '" class="dbsearch-icon" /&gt;&lt;/div&gt;');
              col.append('&lt;div class="col-sm py-0 align-self-center"&gt;' + value.title + '&lt;/div&gt;');
      });
  } else {
      $(".modal").find("#search-results").html("&lt;p&gt;No results found.&lt;/p&gt;");
  }
  </code></pre>
  
  <p>For some odd reason, it outputs an error after a couple of loops:</p>
  
  <blockquote>
    <p>jquery-3.3.1.min.js:2 Uncaught RangeError: Maximum call stack size exceeded</p>
  </blockquote>
  
  <p><a href="https://i.stack.imgur.com/flRq0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/flRq0.png" alt="enter image description here"></a></p>
  
  <p>I've Googled the error and they say it's caused by an infinite loop. The JSON response entries can be quite long, around 300 items.</p>
  
  <p>Even then, it shouldn't really output this if I'm correct. Why is this happening?</p>