1

Estou tentando puxar informações de um arquivo JSON e inserir em uma tag img, essa tag esta em vários cards com diferentes informações e uma quantidade especifica de array, conforme o arquivo JSON abaixo, coloquei apenas dois, mas existem em torno de 20.

O problema que esta ocorrendo e que toda vez que eu clico em um novo card ele pega os três src e acrescenta mais três, dessa forma somando infinitamente ao invés de substituir pelo novo valor.

  1. como eu faço para atualizar o valor ao invés de adicionar?
  2. como eu puxo as informações da "src" de forma dinâmica?
{
"projectBr": [
    {
      "paragraph": "este é o projeto dos cosmeticos",
      "page": "url da webpage0",
      "github": "url do github0",
      "src": [
        "/scr/technology/js.png",
        "/scr/technology/docker.png",
        "/scr/technology/react.png"
      ]
    },
    {
      "paragraph": "projeto das NFTs em construção",
      "page": "url da webpage1",
      "github": "url do github1",
      "src": [
        "/scr/technology/js.png",
        "/scr/technology/docker.png",
        "/scr/technology/nodejs.png",
        "/scr/technology/react.png"
      ]
    },
}

Meu Javascript esta assim:

 const resJson = await fetch('text.json');
  const data = await resJson.json();
  const arrayTecnology = data.projectBr;
  const modalTecnology = document.querySelector('.modal-technology');

  function Createlogo(dado, id, array) {
    const createLogo = document.createElement('img');
    const src = data.projectBr;
    createLogo.setAttribute('src', src);
    modalTecnology.appendChild(createLogo);
  }

  function SetLogo() {
    for (let n = 0; n < getImage.length; n++)
      document.getElementById(`image${n + 1}`).addEventListener('click', () => {
        arrayTecnology.forEach(Createlogo);
      });
  }
2
  • "O problema que esta ocorrendo e que toda vez que eu clico em um novo card ele pega os três src e acrescenta mais três" pq não compara com o que já existe para evitar inserir duplicado? outra ideia se vem os mesmo valores era não fazer o "append" mas remover o que já existe e adicionar novamente Commented 12/10/2022 às 8:24
  • poderia me dar um exemplo para eu ter uma ideia melhor de como fazer? Commented 12/10/2022 às 8:26

1 Resposta 1

1

Quem, assim como eu, estiver tendo dificuldades em problemas semelhantes, eu consegui resolver usando o código abaixo.

Quem puder comentar o código ou refotara-lo, para melhora-lo, iremos agradecer, eu sei que há formas de chegar no mesmo resultado de forma mais eficiente.

  const resJson = await fetch('text.json');
  const data = await resJson.json();
  const modalTecnology = document.querySelector('.modal-technology');

  function SetTechnology() {
    for (let i = 0; i < getImage.length; i++)
      imageArray[i].addEventListener('click', (e) => {
        let idLogo = imageArray.indexOf(e.target);
        const arrayTecnology = data.projectBr[idLogo].src;
        const imgModal = document.querySelectorAll('.modal-technology img');
        for (let i = 0; i < imgModal.length; i++)
          imgModal[i] ? imgModal[i].parentNode.removeChild(imgModal[i]) : null;
        arrayTecnology.forEach((dados) => {
          const elementCreate = document.createElement('img');
          elementCreate.setAttribute('src', dados);
          modalTecnology.appendChild(elementCreate);
        });
      });
  }

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .