Display json in different locations of my html statico

Question

Hello I have a json : http://mulher.store/clara/admin/api/empresa.php?e=8

this api data needs to appear in several places of my html page: example:

<div id="community-members-member-top-title" class="empresas">
<h1> Hotel Sol Y Luna</h1>
<p class="page-text9">Fundo Huincho Lote A5</p>
</div>

these two tags I was able to change... but I blocked the images...

<script>
        fetch("http://mulher.store/clara/admin/api/empresa.php?e=8").then((answer) => {
            answer.json().then((response) => {
                console.log(response);
                const empresas = document.querySelector(".empresas");
                li = document.createElement("h1");
                li.innerHTML = `
                     <p>${response.empresa.nome}</p>                  
                    `;
                empresas.append(li);
                const pagetext9 = document.querySelector(".page-text9");
                li = document.createElement("p");
                li.innerHTML = `
                     <p>${response.empresa.endereco}</p>                  
                    `;
                pagetext9.append(li);
            });
        });
    </script>
<script>
        const baseURL = `http://mulher.store/clara/admin/api/empresa.php?e=8`;
        fetch(baseURL).then((answer) => {
            answer.json().then((response) => {
                console.log(response);
                const imagens = response.fotos.map((foto) => {
                    return `
            <img src="https://remmote.la/img/community/${foto.url}" alt="fotos" />
              `;
                });
                const galeria = document.querySelector(".galeria");
                li = document.createElement("picture");
                li.innerHTML = `
                    <picture>
                       ${imagens}
                    </picture>
                    `;
                galeria.append(li);
            });
        });
    </script>

html images:

<div class="community-members-member-content-gallery-imgs-img-inner-inner">
<picture class="galeria">
<p class="galeria-fotos"></p>
<picture>
                    <picture>

but the image does not load

link: woman.store/clara/Tiago

Answer 1

Are 2 problems:

The first is that the code is placing a comma after each image. This is because the picture variable is an array, not a string. To solve, change ${imagens} for ${imagens.join('')}.

The second problem is on your server. It is returning the wrong image URL. You’re picking them up from the remote.la site, but the server delivers the URL with remmote.la (with’m' repeated).

Answer 2

Even though I already have an accepted answer, I will leave an example with another approach, without the need to convert the array, which I find totally unnecessary, in addition to some other corrections!

As commented by Ricardo, you are repeating the same call to the same endpoint unnecessarily, or you save the return in a variável/constante (indicated if the code gets large, can partition it into functions), or does everything within it fetch as I did in the example. As you can see in it there is no need to convert the array using Join(''), you can just walk through it and make the logic you need inside.

const baseURL = `http://mulher.store/clara/admin/api/empresa.php?e=8`;
const empresas = document.querySelector('.empresas');
const galeria = document.querySelector('.galeria');

fetch(baseURL).then((answer) => {
  answer.json().then((response) => {
    
    const h1 = document.createElement('h1');
    h1.innerHTML = `
       <span>${response.empresa.nome}</span>                  
    `;
    empresas.append(h1);
    
    const p = document.createElement('p');
    p.innerHTML = `
       <span>${response.empresa.endereco}</span>                  
    `;
    empresas.append(p);

    // IMAGENS
    response.fotos.map((foto) => {
      const picture = document.createElement('picture');
      picture.innerHTML = `
         <img src="https://remote.la/img/community/${foto.url}" alt="Fotos" />
      `;
      galeria.append(picture);
    });
  });
});

<div id="community-members-member-top-title" class="empresas"></div>


<div class="community-members-member-content-gallery-imgs-img-inner-inner">
  <p class="galeria-fotos">IMAGENS</p>
  <div class="galeria"></div>
</div>

OBS:

To access elements of the DOM is better already access them when loading the page, that is, outside the fetch

When creating elements in the DOM, it is indicated to use a variable/constant otherwise that element will be global in the code, as here: li = document.createElement("h1");

You used the same reference in memory to create different elements, as here li = document.createElement("h1"); and then right here li = document.createElement("p");

As stated in the other reply, the url of the images is incorrect.