Объявите переменную $result = [] перед конструкциями if, foreach и т.д.

$result = [];
if(...) {
     foreach(... as ...) {
          $images = $this->model_catalog_product->getProductImages($result['product_id']);
          if(isset($images[0]['image']) && !empty($images)){
               $images = $images[0]['image']; 
          } else {
               $images = $image;
          }
}

При генерации блоков задайте атрибут hidden всем блокам, начиная с шестого (чтобы первые 5 отображались)

<div class="content">
   <div class="filter">
      <p>Текст - 1</p>
   </div>
   <div class="filter">
      <p>Текст - 2</p>
   </div>
   <div class="filter">
      <p>Текст - 3</p>
   </div>
   <div class="filter">
      <p>Текст - 4</p>
   </div>
   <div class="filter">
      <p>Текст - 5</p>
   </div>
   <div class="filter" hidden>
      <p>Текст - 6</p>
   </div>
   <div class="filter" hidden>
      <p>Текст - 7</p>
   </div>
   <div class="filter" hidden>
      <p>Текст - 8</p>
   </div>
   <div class="filter" hidden>
      <p>Текст - 9</p>
   </div>
   <div class="filter" hidden>
      <p>Текст - 10</p>
   </div>
   <p class="show_content">Показать остальное</p>
</div>

Далее на Jquery напишите код..

$(document).ready(() => {
        $('body').on('click', '.show_content' , () => {
            var scrollToProduct = $('.filter:hidden');
            $('.filter:hidden:lt(5)').slideDown(1000);
            if (scrollToProduct.length === 0) $('.show_content').hide() ;
            $('html, body').animate({
                scrollTop: scrollToProduct.offset().top
            }, 1000);
        });
    });

$('.filter:hidden:lt(5)').slideDown(1000); - 5 можете заменить на любое значение, именно столько блоков будут отображаться при каждом нажатии на "Показать остальное"
Также может быть будет полезным после нажатия на кнопку "Показать остальное", чтобы вас плавно скроллило на первый новый отобразившийся блок)
Либо, если Вам нужно, чтобы при нажатии на кнопку отображались все блоки, то напишите:

$(document).ready(() => {
        $('body').on('click', '.show_content' , () => {
            var scrollToProduct = $('.filter:hidden');
            $('.filter:hidden').slideDown(1000);
            if (scrollToProduct.length === 0) $('.show_content').hide() ;
            $('html, body').animate({
                scrollTop: scrollToProduct.offset().top
            }, 1000);
        });
    });

или примитивный вариант:

$(document).ready(() => {
        $('body').on('click', '.show_content' , () => {
            var scrollToProduct = $('.filter:hidden');
            $('.filter:hidden').show();
            if (scrollToProduct.length === 0) $('.show_content').hide() ;
        });
    });

Попробуйте вот так!

var url_json = 'https://www.site.com/json.txt';
function init(){
    fetch(url_json)
        .then(response => response.json())
        .then(_json => {
            let artist = document.getElementById('artist');
            let title= document.getElementById('title');
             artist.innerHTML = _json.artist;
             title.innerHTML = _json.title;
        });
}
setInterval(init,1000);

ИЛИ

var url_json = 'https://www.site.com/json.txt';
function init(){
    fetch(url_json)
        .then(response => response.json().then(_json => {
            let artist = document.getElementById('artist');
            let title= document.getElementById('title');
             artist.innerHTML = _json.artist;
             title.innerHTML = _json.title;
        }));
}
setInterval(init,1000);

В вашем примере ошибка - Метод JSON.parse() разбирает строку JSON, а вы передаёте не строку JSON, а url