Tenho seguinte problema minha página, gostaria que mostra-se R$ e que o valor fosse completado.
Tenho o seguinte HTML:
<!-- <INICIO CARDS> -->
<div class="primeira-card">
<div class="card-deck">
<div class="card bg-light">
<a class="descricao" href="#">
<img id="imagem-produto" class="img-responsive" src="#" alt="Imagem produto 1">
<div class="card-body">
<h5 id="nome-do-produto" class="text-center card-title"></h5>
<p id="valor-do-produto" class="text-center card-text">R$</p>
</div>
</a>
</div>
<div class="card bg-light">
<a class="descricao" href="#">
<img id="imagem-produto1" class="img-responsive" src="#" alt="Imagem produto 2">
<div class="card-body">
<h5 id="nome-do-produto1" class="text-center card-title"></h5>
<p id="valor-do-produto1" class="text-center card-text"></p>
</div>
</a>
</div>
<div class="card bg-light">
<a class="descricao" href="#">
<img id="imagem-produto2" class="img-responsive" src="#" alt="Imagem produto 3">
<div class="card-body">
<h5 id="nome-do-produto2" class="text-center card-title"></h5>
<p id="valor-do-produto2" class="text-center card-text"></p>
</div>
</a>
</div>
</div>
</div>
<div class="segunda-card">
<div class="card-deck">
<div class="card bg-light">
<a class="descricao" href="#">
<img id="imagem-produto3" class="img-responsive" src="#" alt="Imagem produto 4">
<div class="card-body">
<h5 id="nome-do-produto3" class="text-center card-title"></h5>
<p id="valor-do-produto3" class="text-center card-text"></p>
</div>
</a>
</div>
<div class="card bg-light">
<a class="descricao" href="#">
<img id="imagem-produto4" class="img-responsive" src="#" alt="Imagem produto 5">
<div class="card-body">
<h5 id="nome-do-produto4" class="text-center card-title"></h5>
<p id="valor-do-produto4" class="text-center card-text"></p>
</div>
</a>
</div>
<div class="card bg-light">
<a class="descricao" href="#">
<img id="imagem-produto5" class="img-responsive" src="#" alt="Imagem produto 6">
<div class="card-body">
<h5 id="nome-do-produto5" class="text-center card-title"></h5>
<p id="valor-do-produto5" class="text-center card-text"></p>
</div>
</a>
</div>
</div>
</div>
<!-- <FIM CARDS> -->
E consumo a API a partir deste Javascript:
const url = 'https://thaleshenrique38.000webhostapp.com/products.json';
function readJson() {
fetch(url)
.then(response => {
if (!response.ok) {
throw new Error("Erro HTTP: " + response.status);
}
return response.json();
})
.then(json => {
this.response = json;
document.getElementById('nome-do-produto').innerHTML = json[0].name;
document.getElementById('valor-do-produto').innerHTML = json[0].Value;
document.getElementById('imagem-produto').src = json[0].images[0].imageUrl;
document.getElementById('nome-do-produto1').innerHTML = json[1].name;
document.getElementById('valor-do-produto1').innerHTML = json[1].Value;
document.getElementById('imagem-produto1').src = json[1].images[0].imageUrl;
document.getElementById('nome-do-produto2').innerHTML = json[2].name;
document.getElementById('valor-do-produto2').innerHTML = json[2].Value;
document.getElementById('imagem-produto2').src = json[2].images[0].imageUrl;
document.getElementById('nome-do-produto3').innerHTML = json[3].name;
document.getElementById('valor-do-produto3').innerHTML = json[3].Value;
document.getElementById('imagem-produto3').src = json[3].images[0].imageUrl;
document.getElementById('nome-do-produto4').innerHTML = json[4].name;
document.getElementById('valor-do-produto4').innerHTML = json[4].Value;
document.getElementById('imagem-produto4').src = json[4].images[0].imageUrl;
document.getElementById('nome-do-produto5').innerHTML = json[5].name;
document.getElementById('valor-do-produto5').innerHTML = json[5].Value;
document.getElementById('imagem-produto5').src = json[5].images[0].imageUrl;
})
.catch(function () {
this.dataError = true;
})
}
readJson();
Porém eu precisaria completar estes valores. Alguém poderia me ajudar; Se alguém puder me ajudar a simplificar o código da API agradeço também.
Segue o link do Codepen deste projeto.