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.
- como eu faço para atualizar o valor ao invés de adicionar?
- 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);
});
}