0

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.

2
  • quer criar uma mascara para transformar o valor em padrão monetário?
    – Wees Smith
    Commented 3/04/2019 às 23:21
  • Isso mesmo Wees! Commented 3/04/2019 às 23:31

0

Pesquise outras perguntas com a tag .