Bootstrap cards when dynamically generating elements with JavaScript

Question

How to use Bootstrap cards when dynamically generating elements with Javascript?

I am dynamically generating a list of restaurant recommendations based on preferences entered into a form by a user with JavaScript (using Yelp Business Search & Google Maps APIs). I would like each of the results to be contained in a Bootstrap card, but am having trouble finding examples online of how to do this with JavaScript.

This is the code I have right now that generates the list of recommendations with the info that I'm grabbing from my API calls. I would like each restaurant and its info to be on a Bootstrap card so that it looks neater and more contained on my page. Does anyone have any pointers on how I can do this since my list is being dynamically generated with JavaScript? I'm a very new software engineering bootcamp student so any guidance would be appreciated :)

function updateResults(data, userLocation) {
  const resultsContainer = document.getElementById("results-container");
  const mapContainer = document.getElementById("map-container");

  //clears any existing results from the container
  resultsContainer.innerHTML = "";
  // console.log(data)
  // console.log(userLocation)
  console.log(data.businesses.length)
  initMap(userLocation, mapContainer, data.businesses);

  //loop through the search results and create HTML elements for each one
  data.businesses.forEach(result => {
    const resultElement = document.createElement("div");

    const nameElement = document.createElement("h2");
    const nameLink = document.createElement("a");
    nameLink.href = result.url;
    nameLink.innerText = result.name;
    nameElement.appendChild(nameLink);

    const imageElement = document.createElement("img");
    imageElement.src = result.image_url;
    imageElement.src = result.image_url;
    imageElement.style.width = "100px";
    imageElement.style.height = "100px";
    imageElement.style.objectFit = "cover";

    const addressElement = document.createElement("p");
    addressElement.innerText = result.location.display_address.join(", ");

    const distanceElement = document.createElement("p");
    if (result.distance_data.distance){
      distanceElement.innerText = `${result.distance_data.distance.text} miles from your location`;
    }
    const durationElement = document.createElement("p");
    if (result.distance_data.duration){
    durationElement.innerText = `${result.distance_data.duration.text} minutes from your location`;
    }

    const priceElement = document.createElement("p");
    priceElement.innerText = result.price;

    const ratingElement = document.createElement("p");
    ratingElement.innerText = `${result.rating} stars`;


    resultElement.appendChild(nameElement);
    resultElement.appendChild(imageElement);
    resultElement.appendChild(addressElement);
    resultElement.appendChild(distanceElement);
    resultElement.appendChild(durationElement);
    resultElement.appendChild(priceElement);
    resultElement.appendChild(ratingElement);

Does this answer your question? [How can I add a class to a DOM element in JavaScript?](https://stackoverflow.com/questions/1115310/how-can-i-add-a-class-to-a-dom-element-in-javascript) — MrUpsidown, May 19 '23 at 08:55

score -1 · Answer 1 · answered May 18 '23 at 23:54

You can just set add the appropriate classes to the elements before adding them to the DOM.

resultElement.className = 'card';
// perhaps also set resultElement.style.width
imageElement.className = 'card-img-top';
resultElement.append(imageElement);
const body = document.createElement('div');
body.className = 'card-body';
nameElement.className = 'card-title';
body.append(nameElement, addressElement, distanceElement, durationElement, priceElement, ratingElement);
resultElement.append(body);
resultsContainer.append(resultElement);

Bootstrap cards when dynamically generating elements with JavaScript

1 Answers1