Вывод информации из json файла используя ajax

Question

есть задача по кнопке "Показать еще", вывести информацию на страницу из json файла при помощи ajax. На странице есть два блока с картинкой и без. Как сделать вывод этих блоков и если вся информация отображена на станице скрыть кнопку? Я несилен в js, но у меня получился вот такой код (не знаю насколько он корректен), все работает, но как мне вывести информацию с картинкой и без картинки?

var pageCounter = 1;
var animalContainer = document.getElementById("grid-info");
var btn = document.getElementById("btn");

btn.addEventListener("click", function () {
    var ourRequest = new XMLHttpRequest();
    ourRequest.open('GET', '/grid.json');
    ourRequest.onload = function () {
        if (ourRequest.status >= 200 && ourRequest.status < 400) {
            var ourData = JSON.parse(ourRequest.responseText);
            renderHTML(ourData);
        } else {
            console.log("С сервером ок, но что-то не так.");
        }
    };
    ourRequest.onerror = function () {
        console.log("Ошибка");
    };
    ourRequest.send();
    pageCounter++;
    if (pageCounter > 1) {
        btn.classList.add("hide-me");
    } 
});

function renderHTML(data) {
    var htmlString = ""; 

    for (i = 0; i < data.length; i++) {
        htmlString += "<div class='grid-item'><div class='news-box-four first-child'><a class='news-box-four__caption'>" + data[i].title + "</a><span class='news-box-four__info'>" + data[i].info + "</span><div class='news-box-four__date'>" + data[i].date + '</div></div></div>';

    }

    animalContainer.insertAdjacentHTML('beforeend', htmlString);
}

.hide-me {
display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div class="news-grid-list --grid"  id="grid-info"></div>

<button class="more" id="btn">
  <div class="more__arrow">
    <img src="images/icon/arrow-more.svg" alt="">
  </div>
  <div class="more__text">Показать еще</div>
</button>

JSON файл

[
    {
      "title": "Почти 30 млн рублей выплатили семьям с маленькими детьми в Магаданской области",
      "info" : "Пособие получили в рамках мер по поддержке семьи, инициированных Владимиром Путиным",
      "date" : "12 Мая 2020"
    },
    {
      "title": "Почти 30 млн рублей выплатили семьям с маленькими детьми в Магаданской области",
      "info" : "Пособие получили в рамках мер по поддержке семьи, инициированных Владимиром Путиным",
      "date" : "12 Мая 2020"
    },
    {
      "title": "Почти 30 млн рублей выплатили семьям с маленькими детьми в Магаданской области",
      "info" : "Пособие получили в рамках мер по поддержке семьи, инициированных Владимиром Путиным",
      "date" : "12 Мая 2020"
    }
  ]

БЛОГ НА HUSL

Вывод информации из json файла используя ajax

Ответы (0 шт):