@Liyebre

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

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 блоков, а при пролистывании страницы вниз подгружалось еще столько же?
  • Вопрос задан
  • 85 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы