Leveraging the collapse feature within the info API on a bootstrap card

Question

Leveraging the collapse feature within the info API on a bootstrap card

I am currently learning Full Stack development and working on a cryptocurrency project. The goal is to use AJAX to call crypto coin data from an API, search for specific cryptocurrencies, display the information on Bootstrap cards, and implement toggle switches with collapsible additional information from the API. However, I'm encountering an issue where the collapse functionality is not working as expected. I've tried various solutions and even spent two weeks searching on Google but haven't been able to figure out what's wrong with my code. Your help would be greatly appreciated!

Below is a snippet of my code:

let cryptos = []
const baseUrl = 'https://api.coingecko.com/api/v3/coins'
let singleCrypto = {}

// Functions for displaying all and searching for cryptocurrencies

When clicking on the "MORE INFO" button for "bitcoin," I should receive additional data from the moreInfo function. However, instead of getting the desired information, I'm seeing the following error in the console:

Uncaught ReferenceError: bitcoin is not defined
    at HTMLButtonElement.onclick (home.html:1:15)
onclick @ home.html:1

javascript ajax api

Answer 1

Answer №1

Your code seems a bit complex, but I believe I have grasped the gist of what you are trying to achieve

let cryptoContainer=document.getElementById("cryptoContainer");
const baseUrl = 'https://api.coingecko.com/api/v3/coins';

function createCoinCard(crypto) {
   let cardDiv=document.createElement("div");//create single coin container
   cardDiv.innerHTML = `
      <div class="col-3">
      <div class="card" style="margin: 10px; border: 1px solid gray">
      <div class="card-body">
      <div id="toggle"></div>
        <h5 class="card-title">${crypto.name}</h5>
        <div class="symbolDV">
          ${crypto.symbol}
        </div>
        <button type="button" class="btn btn-primary" type="button" 
        data-bs-toggle="collapse" data-bs-target="#collapse" aria-expanded="false">MORE INFO </button>
        <div id="collapse"></div>
      </div>
    </div>
  </div>`;
return cardDiv;
}
function showMoreInfo(data,collapseSection) {  
  collapseSection.innerHTML = `
    <img src="${data.image ? data.image.thumb : ''}" alt="Card image cap">
    <div class="usd">${(data.market_data.current_price.usd) + 'USD'}</div>
    <div class="eur">${(data.market_data.current_price.eur) + 'EUR'}</div>
    <div class="ils">${(data.market_data.current_price.ils) + 'ILS'}</div>
      `
  console.log('moreInfo:', data)
}
function displayAllCrypto() {
  $.ajax({
    type: 'GET',
    datatype: 'json',
    url: baseUrl,
    success: function (data) {
      for(var i in data){
        let card=createCoinCard(data[i]);//create individual coin card       
        let button=card.querySelector("button");//locate the "MORE INFO" button
        button.dataPointer=data[i];//assign data pointer
        button.onclick=function(){//add event listener
          showMoreInfo(this.dataPointer,this.parentNode.querySelector("#collapse"))
        }
        cryptoContainer.appendChild(card);//add card to main container
      }
    },
    error: function (error) {
      console.log('error : ', error)
    },
  })
}
displayAllCrypto();

Answer 2

Your code seems a bit complex, but I believe I have grasped the gist of what you are trying to achieve

let cryptoContainer=document.getElementById("cryptoContainer");
const baseUrl = 'https://api.coingecko.com/api/v3/coins';

function createCoinCard(crypto) {
   let cardDiv=document.createElement("div");//create single coin container
   cardDiv.innerHTML = `
      <div class="col-3">
      <div class="card" style="margin: 10px; border: 1px solid gray">
      <div class="card-body">
      <div id="toggle"></div>
        <h5 class="card-title">${crypto.name}</h5>
        <div class="symbolDV">
          ${crypto.symbol}
        </div>
        <button type="button" class="btn btn-primary" type="button" 
        data-bs-toggle="collapse" data-bs-target="#collapse" aria-expanded="false">MORE INFO </button>
        <div id="collapse"></div>
      </div>
    </div>
  </div>`;
return cardDiv;
}
function showMoreInfo(data,collapseSection) {  
  collapseSection.innerHTML = `
    <img src="${data.image ? data.image.thumb : ''}" alt="Card image cap">
    <div class="usd">${(data.market_data.current_price.usd) + 'USD'}</div>
    <div class="eur">${(data.market_data.current_price.eur) + 'EUR'}</div>
    <div class="ils">${(data.market_data.current_price.ils) + 'ILS'}</div>
      `
  console.log('moreInfo:', data)
}
function displayAllCrypto() {
  $.ajax({
    type: 'GET',
    datatype: 'json',
    url: baseUrl,
    success: function (data) {
      for(var i in data){
        let card=createCoinCard(data[i]);//create individual coin card       
        let button=card.querySelector("button");//locate the "MORE INFO" button
        button.dataPointer=data[i];//assign data pointer
        button.onclick=function(){//add event listener
          showMoreInfo(this.dataPointer,this.parentNode.querySelector("#collapse"))
        }
        cryptoContainer.appendChild(card);//add card to main container
      }
    },
    error: function (error) {
      console.log('error : ', error)
    },
  })
}
displayAllCrypto();

Leveraging the collapse feature within the info API on a bootstrap card

Answer №1

Similar questions

Using dot notation for event handlers in Vue.Js is a handy technique

The integration of Ajax with Codeigniter poses a challenge in calling functions

Troubleshooting: Issue with JQuery click functionality within Django's AJAX implementation

Caution: It is important for every child within a list to possess a distinct "key" prop. What is the solution to this issue?

Optimizing Chrome's Precious Load Time

What is the best way to create three distinct fractions in JavaScript that cannot be simplified?

Change the chart.js labels every time I make changes to the chart

Submitting an Ajax form with preventDefault functionality is a great way to

Loop through the JSON data to generate clickable links in the innerHTML

Using jQuery to target nested HTML elements is a great way to efficiently manipulate

Eliminating error messages that appear when a user clicks on a legend label

An alternative approach to ajaxSetup in AngularJS

What is the optimal approach for creating new objects using a mandatory module?

Struggling to make $.ajax.mostRecentCall function properly in jasmine 2.0.2

The functionality of Angular 5 reactive form valueChanges is not functioning correctly

TypeScript does not perform type checking on arrays created using the Array() constructor and filled with the fill method

Parsing the CSV file contents according to the specified columns

Incorporating multiple web services into a React JS project to populate a Material UI dropdown efficiently

Ways to acquire Json information from various websites

Controlling the v-model value of a v-select within a v-for loop