Iterate and fetch a specific quantity of information

Question

Iterate and fetch a specific quantity of information

I'm seeking a more efficient method to iterate through a JSON object and retrieve a specified number of objects. I am currently manually hardcoding the data retrieval using [] for key-value pairs, but I believe there must be a better approach to accomplish this.

Below is my code snippet:

fetch("https://api.coinmarketcap.com/v2/ticker/?start=0&limit=200")
.then((response) => {return response.json(); })
.then((resp => {
  console.log(resp);
  let price = resp.data;
  showPrice(price);
}))

function showPrice(cryptoPrice) {
  document.querySelector(".results").innerHTML = `
   <div class="container text-center">

     // Repeating structure removed for brevity

   </div>
`;
}

// Styling CSS omitted for brevity

<div class="results"></div>

If you'd like to explore the complete code further, here is a link to the CodePen project: https://codepen.io/Brushel/pen/mjrqXr

javascript json ajax xmlhttprequest fetch

Answer 1

Answer №1

https://codepen.io/dennisseah/pen/pZEpQo

fetch("https://api.coinmarketcap.com/v2/ticker/?start=0&limit=200")
  .then(response => {
    return response.json();
  })
  .then(resp => {
    var oData = Object.getOwnPropertyNames(resp.data).slice(0, 20).map(function(i) {
      return resp.data[i];
    });
    displayCryptoInfo(oData);
  });

function displayCryptoInfo(cryptoData) {
  var elements = cryptoData
    .map(function(data) {
      return `<div class="col-4">
      <h1>${data.name}</h1>
      <p><b>Price:</b> <span class="dollar-amount">${
        data.quotes.USD.price
      }</span></p>
      <span><b>Symbol:</b> ${data.symbol}</span>
    </div>`;
    })
    .join("");
  document.querySelector(".results").innerHTML = `
      <div class="container text-center">${elements}</div>`;
}

Answer 2

https://codepen.io/dennisseah/pen/pZEpQo

fetch("https://api.coinmarketcap.com/v2/ticker/?start=0&limit=200")
  .then(response => {
    return response.json();
  })
  .then(resp => {
    var oData = Object.getOwnPropertyNames(resp.data).slice(0, 20).map(function(i) {
      return resp.data[i];
    });
    displayCryptoInfo(oData);
  });

function displayCryptoInfo(cryptoData) {
  var elements = cryptoData
    .map(function(data) {
      return `<div class="col-4">
      <h1>${data.name}</h1>
      <p><b>Price:</b> <span class="dollar-amount">${
        data.quotes.USD.price
      }</span></p>
      <span><b>Symbol:</b> ${data.symbol}</span>
    </div>`;
    })
    .join("");
  document.querySelector(".results").innerHTML = `
      <div class="container text-center">${elements}</div>`;
}

Iterate and fetch a specific quantity of information

Answer №1

Similar questions

Troubleshooting AngularJS ng-route and Three.js crashes and glitches: A comprehensive guide

Can Express not use await?

Obtain the initial element in a table using pure Javascript

React Native application fails to return any values from an asynchronous operation in App function

In ReactJS, the process of rendering a functional component differs from that of a class component

The date was modified after transforming an object into a string using Jackson JSON serialization

Analyzing the object for interface compatibility

Is there a way to utilize jquery to click a submit button within a concealed form?

Tips for avoiding HTTP 404 errors when calling a servlet from jQuery using $.ajax

Is your Vue.js chart malfunctioning?

When ColorField is modified, the color of ScatterLineSeries in Telerik UI for ASP.NET AJAX remains unchanged

Loop through a range of numbers within an array and retrieve the corresponding values

Transfer information using cURL without the need to refresh the webpage

Remove all div elements that do not match the search results using jQuery

Gather information from various Mongoose requests and forward it to the specified route

Aggregate values through an onclick event using a get request and iterate through each using

Transmitting client-side Javascript data to backend server using Express

Using a combination of JavaScript and ASP.NET, you can easily toggle the functionality of buttons

Using various hues for segmented lines on ChartJS

Execute a second ajax function in Jquery only when the first ajax function has finished its execution entirely