How to generate carousel with images fetch from API json

Question

I'm trying to generate carousel with images from api json. URL where images are stored is: http://localhost/

First of all I want to check the amount of images occurring in JSON and then display them in carousel. Here's the example of bootstrap carousel code I want to use:

<div class="carousel" id="Carousel" data-ride="carousel">
    <ol class="carousel-indicators">
        <li class="active" data-slide-to="0" data-target="#Carousel">
        <li data-slide-to="1" data-target="#Carousel">
    </ol>
    <div class="carousel-inner" role="listbox">
        <div class="carousel-item active">
            <img class="img-fluid" src="" alt="">
        </div>
        <div class="carousel-item">
            <img class="img-fluid" src="" alt="">
        </div>
    </div>
</div>

Any help will be appreciated!

Answer 1

I just added an image element inside the carousel with the help of javascript. Now you have to work only for an active carousal.

serverInfo = {
  "levelshotsArray": [
    "https://picsum.photos/200",
    "https://picsum.photos/200/300?grayscale", "https://picsum.photos/200"
  ]
}

serverInfo.levelshotsArray.map(res => {
  var imge = document.createElement('img');
  imge.src = res;
  imge.height = 100;
  imge.width = 100;
  imge.alt = "dfs";
  document.getElementById('img').appendChild(imge);
});

<div class="carousel" id="Carousel" data-ride="carousel">
  <ol class="carousel-indicators">
    <li class="active" data-slide-to="0" data-target="#Carousel">
      <li data-slide-to="1" data-target="#Carousel">
  </ol>
  <div class="carousel-inner" role="listbox">
    <div id="img" class="carousel-item active">
    </div>
  </div>
</div>

Answer 2

let carouselBox=document.querySelector('.carousel-box')
let search=document.getElementById("search")
let sort=document.getElementById("sort")
let copyArr=[]
let filteredArr=[]
function getDataJson(){
    fetch(`http://localhost:3000/services`)
    .then(response=>response.json())
    .then(data=>{
        copyArr=data;
        carouselBox.innerHTML=""
        filteredArr=filteredArr.length||search.value ? filteredArr:data;
        filteredArr.forEach(element => {
            carouselBox.innerHTML+=`
            <div class="card">
            <div class="carousel-image"><img src="${element.image}" alt=""></div>
            <div class="carousel-text">
            <h5>${element.price}</h5>
            </div>  
            </div>
            `
            
        });

    })
}
getDataJson()

<section id="carousel">
        <div class="container">
            <div class="carousel">
                <div id="carouselExample" class="carousel slide">
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <div class="carousel-filter">
                                <input type="search" id="search">
                                <select id="sort">
                                    <option value="def">Deafultw</option>
                                    <option value="asc">Ascending</option>
                                    <option value="des">Default</option>
                                </select>
                            </div>
                            <div class="carousel-box">

                            </div>
                        </div>
                        <div class="carousel-item">
                            <div class="carousel-filter">
                                <input type="search" id="search">
                                <select id="sort">
                                    <option value="def">Deafult</option>
                                    <option value="asc">Ascending</option>
                                    <option value="des">Default</option>
                                </select>
                            </div>
                            <div class="carousel-box">

                            </div>
                        </div>
                    </div>
                    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample"
                        data-bs-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Previous</span>
                    </button>
                    <button class="carousel-control-next" type="button" data-bs-target="#carouselExample"
                        data-bs-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Next</span>
                    </button>
                </div>
            </div>
        </div>
    </section>