Создайте ползунок на основе данных, возвращенных из вызова API

Необходимо построить слайдер (карусель), который должен основываться на данных, возвращаемых при вызове API. Есть 3 значения, которые мне нужно вытащить. image, title и description.

Это должны быть picture, heading и description (на каждом слайде, взятые из JSON).

jQuery

var myJSON = 'apiCall';
$.getJSON('myJSON, { get_param: 'value' }, function(data) {
    $.each(data, function(index, element) {
        $('body').append($('<img>', {  
        }));
    });
});

HTML

   <div id = "carouselExampleIndicators" class = "carousel slide" data-ride = "carousel">
             <ol class = "carousel-indicators">
               <li data-target = "#carouselExampleIndicators" data-slide-to = "0" class = "active"></li>
    <li data-target = "#carouselExampleIndicators" data-slide-to = "1"></li>
    <li data-target = "#carouselExampleIndicators" data-slide-to = "2"></li>
  </ol>
  <div class = "carousel-inner">
    <div class = "carousel-item active">
      <img class = "d-block w-80" src = "..." alt = "First slide">
        <div class = "carousel-caption d-none d-md-block">
         <h5></h5>
         <p></p>
        </div>
    </div>
    <div class = "carousel-item">
      <img class = "d-block w-80" src = "..." alt = "Second slide">
        <div class = "carousel-caption d-none d-md-block">
         <h5></h5>
         <p></p>
        </div>
  </div>
    </div>
    <div class = "carousel-item">
      <img class = "d-block w-80" src = "..." alt = "Third slide">
       <div class = "carousel-caption d-none d-md-block">
         <h5></h5>
         <p></p>
       </div>
    </div>
  </div>
  <a class = "carousel-control-prev" href = "#carouselExampleIndicators" role = "button" data-slide = "prev">
    <span class = "carousel-control-prev-icon" aria-hidden = "true"></span>
    <span class = "sr-only">Previous</span>
  </a>
  <a class = "carousel-control-next" href = "#carouselExampleIndicators" role = "button" data-slide = "next">
    <span class = "carousel-control-next-icon" aria-hidden = "true"></span>
    <span class = "sr-only">Next</span>
  </a>
</div>

Опишите, что вы имеете в виду, когда говорите возникла проблема с отправкой данных на ползунок

— 28.05.2019 21:55

jquery html json ajax api

28.05.2019 21:47

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

1 733

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

let html = `
<div class = "carousel-item">
      <img class = "d-block w-80" src = "${imgSrc}" alt = "Second slide">
        <div class = "carousel-caption d-none d-md-block">
         <h5>${title}</h5>
         <p>${parangraph}</p>
        </div>
  </div>
`
$(".carousel-inner")[0].append(html)

Поместите приведенный выше код в цикл, и все будет готово. ImgSrc, заголовок и абзац должны динамически генерироваться из ваших вызовов API.

28.05.2019 22:01

Ответ принят как подходящий

$.get('apiCall')
      .then(function(response) {
          var $carousel = $('#carouselExampleIndicators');
          var $carouselInner = $carousel.find('.carousel-inner');

          response.data.forEach(function(item, i) {
            var template = '';

            if (i === 0) {
              template = '<div class = "carousel-item active">';
            } else {
              template = '<div class = "carousel-item">';
            }
            
            template += '<img class = "d-block w-80" src = "' + item.image + '" alt = "Second slide">'; 
            template += '<div class = "carousel-caption">';
            template += '<h5>' + item.title_a + '</h5>';
            template += '<p>' + item.category + '</p>';
            template += '</div>';
            template += '</div>';

            $carouselInner.append(template);
          })

          $carousel.carousel();
      })

<link href = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel = "stylesheet"/>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div id = "carouselExampleIndicators" class = "carousel slide" data-ride = "carousel">
		<div class = "carousel-inner">
		
		</div>
		<a class = "carousel-control-prev" href = "#carouselExampleIndicators" role = "button" data-slide = "prev">
			<span class = "carousel-control-prev-icon" aria-hidden = "true"></span>
			<span class = "sr-only">Previous</span>
		</a>
		<a class = "carousel-control-next" href = "#carouselExampleIndicators" role = "button" data-slide = "next">
			<span class = "carousel-control-next-icon" aria-hidden = "true"></span>
			<span class = "sr-only">Next</span>
		</a>
	</div>

Привет, вот пример с jQuery и ES5 js. Я предлагаю вам использовать https://handlebarsjs.com/ для создания шаблонов html. Это будет выглядеть лучше.

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

— 29.05.2019 11:27

Да, вам нужно адаптировать шаблон для свойств json. Я отредактировал код выше (я добавил json, который вы предоставили), так что вы можете попробовать прямо сейчас.

— 29.05.2019 12:00

Я вижу, что это работа сейчас. Спасибо! Скажите, пожалуйста, почему, по-вашему, у меня эта ошибка в моей консоли? «Uncaught ReferenceError: $ не определено» и «$.get не является функцией». У меня связаны все библиотеки (jQuery и Bootstrap).

— 29.05.2019 13:58

Библиотека jQuery не включена должным образом. Проверьте порядок включенных скриптов. Ваш javascript должен быть включен ниже скриптов jQuery и Bootstrap.

— 29.05.2019 15:17

Извините, у меня нет времени, чтобы помочь вам с реализацией этого. Я думаю, что помог вам более чем достаточно с приведенным примером.

— 29.05.2019 16:44

28.05.2019 23:56