循环并拉入一定数量的数据

2022-01-20 00:00:00 json fetch xmlhttprequest javascript ajax

我正在寻找一种更好的方法来遍历 json 对象并拉入一定数量的对象.我只是对如何创建循环有点困惑.现在我正在手动硬编码并使用 [] 获取数据以获取密钥对值.我知道有更好的方法来做到这一点.

I'm looking for a better way to loop through a json object and pull in a certain amount of objects. I'm just a little confused on how to create the loop. Right now I'm manually hardcoding and getting the data using [] to get key pair values. I know there is a better way to do this.

这是我的代码:

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">

     <div class="col-4">
       <h1>${cryptoPrice[1].name}</h1>
       <p><b>Price:</b> <span class="dollar-amount">${cryptoPrice[1].quotes.USD.price}</span></p>
       <span><b>Symbol:</b> ${cryptoPrice[1].symbol}</span>
     </div>

     <div class="col-4">
       <h1>${cryptoPrice[2].name}</h1>
       <p><b>Price:</b> <span class="dollar-amount">${cryptoPrice[2].quotes.USD.price}</span></p>
       <span><b>Symbol:</b> ${cryptoPrice[2].symbol}</span>
     </div>
      
     <div class="col-4">
       <h1>${cryptoPrice[52].name}</h1>
       <p><b>Price:</b> <span class="dollar-amount">${cryptoPrice[52].quotes.USD.price}</span></p>
       <span><b>Symbol:</b> ${cryptoPrice[52].symbol}</span>
     </div>

     <div class="col-4">
       <h1>${cryptoPrice[74].name}</h1>
       <p><b>Price:</b> <span class="dollar-amount">${cryptoPrice[74].quotes.USD.price}</span></p>
       <span><b>Symbol:</b> ${cryptoPrice[74].symbol}</span>
     </div>

     <div class="col-4">
       <h1>${cryptoPrice[109].name}</h1>
       <p><b>Price:</b> <span class="dollar-amount">${cryptoPrice[109].quotes.USD.price}</span></p>
       <span><b>Symbol:</b> ${cryptoPrice[109].symbol}</span>
     </div>
     
     <div class="col-4">
       <h1>${cryptoPrice[118].name}</h1>
       <p><b>Price:</b> <span class="dollar-amount">${cryptoPrice[118].quotes.USD.price}</span></p>
       <span><b>Symbol:</b> ${cryptoPrice[118].symbol}</span>
     </div>
     
     <div class="col-4">
       <h1>${cryptoPrice[131].name}</h1>
       <p><b>Price:</b> <span class="dollar-amount">${cryptoPrice[131].quotes.USD.price}</span></p>
       <span><b>Symbol:</b> ${cryptoPrice[131].symbol}</span>
     </div>

     <div class="col-4">
       <h1>${cryptoPrice[213].name}</h1>
       <p><b>Price:</b> <span class="dollar-amount">${cryptoPrice[213].quotes.USD.price}</span></p>
       <span><b>Symbol:</b> ${cryptoPrice[213].symbol}</span>
     </div>

     <div class="col-4">
       <h1>${cryptoPrice[291].name}</h1>
       <p><b>Price:</b> <span class="dollar-amount">${cryptoPrice[291].quotes.USD.price}</span></p>
       <span><b>Symbol:</b> ${cryptoPrice[291].symbol}</span>
     </div>

     <div class="col-4">
       <h1>${cryptoPrice[328].name}</h1>
       <p><b>Price:</b> <span class="dollar-amount">${cryptoPrice[328].quotes.USD.price}</span></p>
       <span><b>Symbol:</b> ${cryptoPrice[328].symbol}</span>
     </div>

     <div class="col-4">
       <h1>${cryptoPrice[372].name}</h1>
       <p><b>Price:</b> <span class="dollar-amount">${cryptoPrice[372].quotes.USD.price}</span></p>
       <span><b>Symbol:</b> ${cryptoPrice[372].symbol}</span>
     </div>

     <div class="col-4">
       <h1>${cryptoPrice[463].name}</h1>
       <p><b>Price:</b> <span class="dollar-amount">${cryptoPrice[463].quotes.USD.price}</span></p>
       <span><b>Symbol:</b> ${cryptoPrice[463].symbol}</span>
     </div>

   </div>
`;
}

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  flex-direction: row;
  max-width: 1080px;
  padding-left: 15px;
  padding-right: 15px;
  margin-left: auto;
  margin-right: auto;
}

.text-center {
  text-align: center;
}

.col-4 {
  flex: 0 0 33.3%;
  margin-bottom: 1em;
}

h1 {
  margin-bottom: 0;
}

.dollar-amount {
  color: green;
}

@media(max-width: 1000px) {
  .col-4 {
    flex: 0 0 49.9%;
  }
}

@media(max-width: 678px) {
  .col-4 {
    flex: 0 0 100%;
  }
}

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

如果您想获得更好的外观，这里是我正在开发的 codepen 的链接.https://codepen.io/Brushel/pen/mjrqXr

Here is a link to the codepen I'm working on if you'd like to get a better look. https://codepen.io/Brushel/pen/mjrqXr

推荐答案

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];
    });
    showPrice(oData);
  });

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

相关文章