Add dollar sign and complete value that was consumed by an API

Question

I have following problem my page, I would like to show up R$ and that the amount was completed.

I have the following 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> -->

And consume the API from this 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();

But I would need to complete these figures. Someone could help me; If anyone can help me simplify the API code I also appreciate.

Follow the link from Codepen of this project.