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

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

这是我的密码：

fetch（“https://api.coinmarketcap.com/v2/ticker/?start=0&limit=200")
.then（（response）=>{return response.json（）；}）
。然后（（resp=>{
控制台日志（resp）；
让价格=相应数据；
showPrice（价格）；
}))
函数showPrice（加密价格）{
document.querySelector（“.results”）.innerHTML=`
${cryptoPrice[1].name}
价格：${cryptoPrice[1].quotes.USD.Price}

Symbol:${cryptoPrice[1]。Symbol}
${cryptoPrice[2].name}
价格：${cryptoPrice[2].quotes.USD.Price}

Symbol:${cryptoPrice[2]。Symbol}
${cryptoPrice[52].name}
价格：${cryptoPrice[52].quotes.USD.Price}

Symbol:${cryptoPrice[52]。Symbol}
${cryptoPrice[74].name}
价格：${cryptoPrice[74].quotes.USD.Price}

Symbol:${cryptoPrice[74]。Symbol}
${cryptoPrice[109].name}
价格：${cryptoPrice[109].quotes.USD.Price}

Symbol:${cryptoPrice[109]。Symbol}
${cryptoPrice[118].name}
价格：${cryptoPrice[118].quotes.USD.Price}

Symbol:${cryptoPrice[118]。Symbol}
${cryptoPrice[131].name}
价格：${cryptoPrice[131].quotes.USD.Price}

Symbol:${cryptoPrice[131]。Symbol}
${cryptoPrice[213]。名称}
价格：${cryptoPrice[213].quotes.USD.Price}

Symbol:${cryptoPrice[213]。Symbol}
${cryptoPrice[291].name}
价格：${cryptoPrice[291].quotes.USD.Price}

Symbol:${cryptoPrice[291]。Symbol}
${cryptoPrice[328].name}
价格：${cryptoPrice[328].quotes.USD.Price}

Symbol:${cryptoPrice[328]。Symbol}
${cryptoPrice[372].name}
价格：${cryptoPrice[372].quotes.USD.Price}

Symbol:${cryptoPrice[372]。Symbol}
${cryptoPrice[463].name}
价格：${cryptoPrice[463].quotes.USD.Price}

Symbol:${cryptoPrice[463]。Symbol}
`;
}

.container{
显示器：flex；
柔性包装：包装；
证明内容：之间的空间；
弯曲方向：行；
最大宽度：1080px；
左侧填充：15px；
右侧填充：15px；
左边距：自动；
右边距：自动；
}
.文本中心{
文本对齐：居中；
}
.col-4{
弹性：0.33.3%；
边缘底部：1米；
}
h1{
页边距底部：0；
}
.美元金额{
颜色：绿色；
}
@介质（最大宽度：1000px）{
.col-4{
弹性：0.49.9%；
}
}
@介质（最大宽度：678px）{
.col-4{
弹性：0.100%；
}
}

fetch（“https://api.coinmarketcap.com/v2/ticker/?start=0&limit=200")
。然后（响应=>{
返回response.json（）；
})
。然后（resp=>{
var oData=Object.getOwnPropertyNames（resp.data）.slice（0,20）.map（函数（i）{
返回相应数据[i]；
});
showPrice（oData）；
});
函数showPrice（加密价格）{
var divs=加密价格
.map（功能（价格）{
返回`
${price.name}
价格：${
price.quotes.USD.price
}

符号：${price.Symbol}
`;
})
.加入（“”）；
document.querySelector（“.results”）.innerHTML=`
${divs}`；
}

是否要遍历所有条目？或者你有一些选择标准？我想重复前20个@user3808826如果你想要前20个，为什么要使用1、2、52、74等等？谢谢！非常干净易懂的方式做这件事！我很感激

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>`;
}