Загрузите список объектов в ответе ajax и создайте список Dynmi c с этими данными

Question

У меня есть эта часть HTML:

<div class="container">
    <div class="row">
        <div class="col-sm-4">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">{title}</h4>
                    <p class="card-text">{content}</p>
                    <a href="#" class="card-link">Read...</a>
                </div>
            </div>
        </div>
    </div>
</div>

, и у меня есть ajax запрос, который вызывает после загрузки страницы:

<script>
    $(window).on('load', function () {
        loadArticles();
    });

    function loadArticles() {
        $.ajax({
            dataType: "json",
            url: "/articles", success: function (result) {

            }
        });
    }
</script>

Мне нужно создать список карточек (<div class="card">) с данными из ответа. Например, я получаю 5 статей в ответ. Мне нужно создать 5 карточных делителей и заполнить их данными из ответа. Как мне это сделать?

Answer 1

L oop поверх объектов, которые вы возвращаете из вызова ajax, и используйте функцию jQuery .append (), чтобы добавить их в домен.

Сначала вам нужно добавить идентифицируя класс (или id) родительского div в вашем HTML и извлеките карту HTML:

<div class="container">
    <div class="row">
        <div class="col-sm-4 cards-wrapper"></div>
    </div>
</div>

Затем в вашей функции loadArticles l oop поверх вашего ответа ajax и добавьте к что jQuery выбрано, мы только что определили - '.cards-wrapper':

function loadArticles() {
    $.ajax({
        dataType: "json",
        url: "/articles",
        }).done(function(data) {
            const cards = data.body.cards; // Or however you need to traverse the response object
            cards.forEach(function(card) {
                $('.cards-wrapper').append('<div class="card"><div class="card-body"><h4 class="card-title">' + card.title + '</h4><p class="card-text">' + card.content + '</p><a href="#" class="card-link">Read...</a></div></div>');
            }) 
        });
}

В идеале вы должны извлечь этот код для добавления в свою собственную функцию для удобства чтения, например, c.

Answer 2

Вы можете сделать это, просто используя html шаблон

HTML

Сначала вам нужно добавить карт-контейнер id в тег HTMl, в который мы будем вводить HTMl, используя ajax

<div class="container">
    <div class="row">
        <div class="col-sm-4" id="card-container">
        </div>
    </div>
</div>

Javascript

<script>
    $(window).on('load', function () {
        loadArticles();
    });

    function loadArticles() {
        $.ajax({
            dataType: "json",
            url: "/articles", success: function (result) {
             //Get template html using ajax and append it with **card-container** 
             var cardTemplate = $("#cardTemplate").html();
             result.forEach(function (card) {           

                    $('#card-container').append(cardTemplate.replace("{title}", 
                      card.title).replace("{content}", card.content));
             })
            }
        });
    }
</script>

HTML Template

Назначение идентификатора cardTemplate для html template

<template id="cardTemplate">
    <div class="card">
        <div class="card-body">
            <h4 class="card-title">{title}</h4>
            <p class="card-text">{content}</p>
            <a href="#" class="card-link">Read...</a>
        </div>
    </div>
</template>

Я также реализовал на своем конце, так что он наверняка будет работать !!!