CODEWITHSUNDEEP
javascripthtmljqueryjsonbootstrap-4
tigerhoo
tigerhoo

Reputation: 89

Bootstrap Cards does not show correctly when using J Query

I trying to create a dynamic HTML page where the data will come from a JSON response to an AJAX request. I am trying to put three columns in a row but I am getting one column for one row.

I'm wondering what is wrong with my code. I appreciate that someone can give me some pointers.

window.onload = function loadDoc() {
  var url = "SK_movie_world_movies.json";
  
  $.getJSON(url, function(data) {
    $.each(data, function(i, item) {
      //alert(item.Title);
      let name = item.Title;
      let ca_st = item.cast;
      let dir = item.director;
      let gen = item.genre;
      let dur = item.duration;
      let lang = item.language;
      let syn = item.synopsis;
      let pic = item.image;
      let id = item.MoveID;

      $(".movie_container").append(
        `<div class="col-md-4 mb-5">
          <div class="card">
            <div class="text-center"><img src="${pic}" alt="${id}" class="card-img-top"></div>
            <div class="card-body">
              <h5 class="card-title text-center">${name}</h5>
              <p class="card-text">Cast: ${ca_st}</p>
              <p class="card-text">Director: ${dir}</p>
              <p class="card-text">Genre: ${gen}</p>
              <p class="card-text">Duration: ${dur}</p>
              <p class="card-text">Language: ${lang}</p>
              <div class="text-center">
                <a href="#" class="btn btn-primary">View Detail</a>
              </div>
            </div>
          </div>
        </div>`);
    });
  })
}

Upvotes: 0

Views: 127

Answers (1)

Ramazan Alkan
Ramazan Alkan

Reputation: 1874

You should use child elements after the row instead of using another container.

Do not use movie_container as another container just attach an ID to your <div class="row" style="margin-top: 20px" id="movie_container" > and try to append your movies into this.

$("#movie_container").append(
        `<div class="col-md-4 mb-5">
          <div class="card">
            <div class="text-center"><img src="${pic}" alt="${id}" class="card-img-top"></div>
            <div class="card-body">
              <h5 class="card-title text-center">${name}</h5>
              <p class="card-text">Cast: ${ca_st}</p>
              <p class="card-text">Director: ${dir}</p>
              <p class="card-text">Genre: ${gen}</p>
              <p class="card-text">Duration: ${dur}</p>
              <p class="card-text">Language: ${lang}</p>
              <div class="text-center">
                <a href="#" class="btn btn-primary">View Detail</a>
              </div>
            </div>
          </div>
        </div>`);

Upvotes: 1

Related Questions