javascript - 使用 FETCH API 显示两位小数
问题描述
我正在制作一个显示不同货币报价的网站。
我正在使用 FETCH 的 API。但是我已经尝试在其中添加 .toFix (2) 并且在逗号后只显示两个数字对我来说没有用。
function fetchData() {
fetch("https://www.dolarsi.com/api/api.php?type=valoresprincipales")
.then(response => {
return response.json();
})
.then(data => {
const filteredOutput = data.filter(item => {
switch (item.casa.nombre) {
case "Dolar Blue":
return item;
break;
default:
return null;
}
})
let html = "";
filteredOutput.forEach(item => {
html += "<p class= \"compra\"><small class= \"compraPrecio\">COMPRA</small><br> $ " +item.casa.compra + "</p>";
})
document
.querySelector('#blueCompra')
.insertAdjacentHTML("afterbegin", html);
});
}
fetchData();
这是我当前使用的代码。我应该在哪里安排?有人知道吗?谢谢!
...和我的 html html
解决方案
主要问题是比较号实际上是一个字符串。第二个问题是它包含一个“,”,因此不能简单地用parseInt
. 解决方法如下:
- 从比较字符串中删除所有逗号
- 将字符串解析为 int
- 将 int 格式化为货币字符串
我添加了注释// 1.
// 2.
和// 3.
与上述列表项相对应的代码
function fetchData () {
fetch("https://www.dolarsi.com/api/api.php?type=valoresprincipales")
.then(response => {
return response.json();
})
.then(data => {
document.querySelector('.loading').remove()
const filteredOutput = data.filter(item => {
switch (item.casa.nombre) {
case "Dolar Blue":
return item;
break;
default:
return null;
}
})
filteredOutput.forEach(item => {
let compra = item.casa.compra
compra = compra.replace(',', '') // 1. ⭐️
compra = parseInt(compra) // 2. ⭐️
compra = compra.toLocaleString('en-US', { minimumFractionDigits: 2 }) // 3. ⭐️
document.body.innerHTML += '<p><small>COMPRA $' + compra
})
})
}
fetchData()
<span class="loading">Loading...</span>