Как показать данные из файла JSON в Bootstrap 4 Carousel с помощью jQuery, включая хэш изображений

Question

Я пытаюсь проанализировать файл JSON из моего локального json и в console.log Я получаю массив, но я не знаю, как вставить карусель Bootstrap для отображения данных.Я хочу получить файлы JSON и показать в карусели только тот файл JSON, который начинается с данных тега. Здесь вы можете найти файлы JSON файлы JSON Я пробовал что-то подобное до сих пор.От ответа @ T.Shah зависит все, с чем он работает, одна проблема: первый элемент пуст, а затем он принимает данные JSON, я пытался удалить carousel-item active, но затем он показывает что-либо.Код обновлен.

$.getJSON('./data/projects.json', {get_param: 'value'}, function (getArray) {
        $.each(getArray.data, function (index, element) {
            var thisImage = element.image;
            $('.carousel-inner').append('<div class="carousel-item">' +
                '<img class="d-block w-100" src="https://demo.test.com/api/v4/media/' + thisImage + '/thumbnail/width/900/height/600/strategy/crop" alt="">' +
                '<div class="carousel-caption">' +
                '<h3>' + element.name + '</h3>' +
                '<p>' + element.description + '</p>' +
                '</div>' + '</div>');
        });
    });
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
        </div>

    </div>
    <a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

Answer 1

Вы добавляете идентификатор с именем «test», когда карусель вообще не имеет этого идентификатора.Я изменил ваш сценарий, и он добавляет элементы в карусель.

    <script>
    $(document).ready(function () {
            var itemClass;
            $.getJSON('./data/projects.json', {get_param: 'value'}, function (getArray) {
                $.each(getArray.data, function (index, element) {
                    var totalItems = $(".carousel-item").length;
                    if(totalItems === 0) {
                        itemClass = "carousel-item active";
                    }
                    else {
                        itemClass = "carousel-item";
                    }
                    console.log(totalItems);
                    var thisImage = element.image;
                    $('.carousel-inner').append('<div class="'+itemClass+'">' +
                        '<img class="d-block w-100" src="https://demo.test.com/api/v4/media/' + thisImage + '/thumbnail/width/900/height/600/strategy/crop" alt="">' +
                        '<div class="carousel-caption">' +
                        '<h3>' + element.name + '</h3>' +
                        '<p>' + element.description + '</p>' +
                        '</div>' + '</div>');
                });
            });
    })
    </script>

Answer 2

Прежде всего убедитесь, что вы используете строгий режим в глобальной области видимости модуля. Данные json немного сложны для демонстрации, но я уверен, что вы можете перебирать объекты и массивы, поэтому давайте предположим, что это файл json, который у нас есть:

{
   "items" : [
  {
   "img": "assets/owl1.jpg",
   "alt" : "Owl Image 1"
  },
  {
   "img": "assets/owl2.jpg",
   "alt" : "Owl Image 2"
  },
  {
   "img": "assets/owl3.jpg",
   "alt" : "Owl Image 1"
  },
 ]
}

Вы используете плагин карусели или пользовательский плагин ?!я рекомендую вам использовать owlcarousel.импортируйте свой пользовательский json в owlcarousel следующим образом:

$("#owl-demo").owlCarousel({
  jsonPath : 'json/customData.json',
  jsonSuccess : customDataSuccess
});

, затем создайте customDataSuccess следующим образом:

function customDataSuccess(data){
 var content = "";
 for(var i in data["items"]){

   var img = data["items"][i].img;
   var alt = data["items"][i].alt;

   content += "<img src=\"" +img+ "\" alt=\"" +alt+ "\">"
 }
 $("#owl-demo").html(content);
}

owl-demo - это div в html, куда карусель уйдет:

<div id="owl-demo" class="owl-carousel">
</div>