Scanning JSON ...and repeating images

Question

What’s wrong with that code? In the first item of the catalog has 2 images, and in the second item has 1 image (JSON). But on the page when executed it shows the first item with all 3 photos and the second item is correct (only with the last).

What could it be? (Obs. I’m new to programming, so take it easy kkkk) Thanks

    catalogo = [
        {
            'nome': 'Polo Masculina Detalhe',
            'tamanhos': 'Disponivel nos tamanhos P, M, G, GG',
            'avista': '39,90',
            'aprazo': '42,90',
            'imgs': [
    
                {
                    'cod': 'COD: 1010',
                    'ft': '<img src="imgs/36.webp">'
                },
                {
                    'cod': 'COD: 1011',
                    'ft': '<img src="imgs/37.webp">'
                }
            ]
        },
        {
            'nome': 'Polo Masculina Outr',
            'tamanhos': 'Disponivel nos tamanhos P, M, G, GG',
            'avista': '39,90',
            'aprazo': '42,90',
            'imgs': [
                {
                    'cod': '1113',
                    'ft': '<img src="imgs/5.webp">'
                }
            ]
        }
    ]
    
    
    for (var p = 0; p < catalogo.length; p++) {
    
        var sessao = `
            <section class="sec">
                <div class="detalhes">
                    <h2>${catalogo[p].nome}</h2>
                    <p class="descricao">${catalogo[p].tamanhos}</p>
                    <span class="precoVista">${catalogo[p].avista}</span>
                    <span class="precoPrazo">${catalogo[p].aprazo}</span>
                </div>
            </section>
            `
            
            $('.corpo').append(sessao);
    
        for (var i = 0; i < catalogo[p].imgs.length; i++) {
            var imagem = `
            <div class="item">
            ${catalogo[p].imgs[i].ft}
            <span class="cod">${catalogo[p].imgs[i].cod}</span>
            </div>
            `
            $('.sec').append(imagem)
        }
    }

Answer 1

It can solve this in a very simple way, using seletores avançados of jQuery like the eq(). It finds an element in the DOM referencing itself by the element index:

let catalogo = [{
    'nome': 'Polo Masculina Detalhe',
    'tamanhos': 'Disponivel nos tamanhos P, M, G, GG',
    'avista': '39,90',
    'aprazo': '42,90',
    'imgs': [

      {
        'cod': 'COD: 1010',
        'ft': `<img src="https://picsum.photos/200/300
">`,
      },
      {
        'cod': 'COD: 1011',
        'ft': `<img src="http://placekitten.com/200/300">`,
      }
    ]
  },
  {
    'nome': 'Polo Masculina Outr',
    'tamanhos': 'Disponivel nos tamanhos P, M, G, GG',
    'avista': '39,90',
    'aprazo': '42,90',
    'imgs': [{
      'cod': '1113',
      'ft': `<img src="https://www.placecage.com/200/300">`
    }]
  }
]

for (var p = 0; p < catalogo.length; p++) {
  var sessao = `
     <section class="sec">
        <div class="detalhes">
           <h2>${catalogo[p].nome}</h2>
           <p class="descricao">${catalogo[p].tamanhos}</p>
           <span class="precoVista">${catalogo[p].avista}</span>
           <span class="precoPrazo">${catalogo[p].aprazo}</span>
        </div>
     </section>
  `
  $('.corpo').append(sessao);

  for (var i = 0; i < catalogo[p].imgs.length; i++) {
    var imagem = `
       <div class="item">
          ${catalogo[p].imgs[i].ft}
          <span class="cod">${catalogo[p].imgs[i].cod}</span>
       </div>
    `
    $(`.sec`).eq(`${p}`).append(imagem)
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="corpo"></div>

OBS : What is happening in your code is that it takes the JSON images only it inserts the 3 Divs .sec with the images in the same element, so the use of the eq().