Как можно создать новый блок в HTML на основе других данных из JSON?

Question

[Liyebre]

Cовсем недавно начал учить JS и решил учиться так сказать сразу на "боевых" задачах. В общем, есть данные, которые я получаю из JSON файла на стороннем сайте и мне нужно вывести лишь некоторые из них на страницу в HTML блоке.

Необходимые данные я смог получить и вывел их по классам в блоке в нужных местах. Но возник вопрос, а каким образом можно создать точно такой же блок, но уже с другими данными?

JS:

var settings = {
    "method": "GET",
    "url": "https://selectel.ru/api/servers/v2/service/server",
}
$.ajax(settings).done(function (response) {
    console.log(response);

    // Название сервера (тарифа)
    var dedicName = response.result[1].name;

    // CPU
    var cpu = response.result[1].cpu.cores_per_cpu + ' x ' + response.result[1].cpu.base_freq + ' GHZ';

    // RAM
    var ram = response.result[1].ram[0].count + ' x ' + response.result[1].ram[0].size + ' GB ' + response.result[1].ram[0].type;

    // Disk
    var disk = response.result[1].disk[0].count + ' x ' + response.result[1].disk[0].size + ' GB ' + response.result[1].disk[0].type;

    //Вывод цены + наценка
    var price = Number(response.result[1].price_collection.RUB.month) + 200 + ' Руб./мес.';

    // Тариф
    $(".dedic-name").append(dedicName);

    // Цена
    $(".price").append(price);

    // Процессор
    $(".cpu").append(cpu);

    // Оперативка
    $(".ram").append(ram);

    // Память
    $(".disk").append(disk);
});

HTMl:

<div class="price-two__item">
                    <div class="price-two__item--info">
                        <div class="price-two__item--text">
                            <h3 class="title--small price-two__item--title dedic-name"></h3>
                        </div>
                        <div class="price-two__prop">
                            <div class="price-two__prop--item">
                                <p class="t-up cpu"><span>CPU: </span></p>
                                <p class="t-up ram"><span>RAM: </span></p>
                            </div>
                            <div class="price-two__prop--item">
                                <p class="t-up disk"><span>Диск: </span></p>
                                <p class="t-up"><span>Канал: </span>100 MB</p>
                            </div>
                        </div>
                    </div>
                    <div class="price-two__price">
                        <span class="price"></span>
                        <a class="btn btn--success" href="#"><i class="fas fa-shopping-cart"></i> Заказать</a>
                    </div>
                </div>

Нужно чтобы при переборе данных из массива создавался точно такой же блок, но уже с другими данными.

И еще вопрос, можно ли будет как то сделать, чтобы изначально отображалось например 5 блоков, а при пролистывании страницы вниз подгружалось еще столько же?

Comments

[Вадим]

У вас response.result - массив. Перебирайте его и создавайте столько элементов, сколько нужно или сколько если элементов в массиве.

И еще вопрос, можно ли будет как то сделать, чтобы изначально отображалось например 5 блоков, а при пролистывании страницы вниз подгружалось еще столько же?

Можно. Реализация зависит от того, какое api у сервиса, от которого Вы получаете JSON. Если там есть пагинация и Вы можете запрашивать ровно столько элементов, сколько Вам нужно, тот тут всё просто:
Сделали запрос, указав что Вам нужны первые 5элементов.
Отобразили их.
Добавили прослушиватель прокрутки страницы.
Если докрутили до нужного значения(например низа), то сделали новый запрос, в котором указали что нужны вторые 5 элементов.
Снова отобразили.
Возможно нужно будет немного подправить текущий скролл.
Профит.

[Liyebre]

Вадим,

Перебирайте его и создавайте столько элементов, сколько нужно или сколько если элементов в массиве.

Не совсем понял как это сделать, если ссылки где можно прочитать про это?

[Вадим]

Liyebre, есть.