Buttons with automatic modals based on JSON

Question

Hello

I’m making a website that builds images and modals based on Json but I can’t do the script that makes me copy the first div and based on the case numbers, they appear on the side.

I had already done something like this but with dolls, I tried to use the same code but with different class, const and id but it doesn’t work...

doll code:

const urlIcon = './imagens/personagem7.png';
const imagem = `<img src="${urlIcon}" />`;

const imagens = Array.from({
        length: Number(arrayResultados.length)
    }).reduce((html) => html + imagem, '');
    $('#images').html(imagens);

What was supposed to happen was to create that icon according to the number of victims in the json and that div had a link to a specific modal that was also created according to the number of victims and with the information from the json, if anyone can help me with the code I’d appreciate I’m still new at this javascript...

Page html (div e modal):

<div class="imagemavatar">
                    <img type="button" src="./imagens/avatar2.png" class="img-fluid" data-toggle="modal"
                        data-target="#exampleModalCenter1">
                </div>
                
                <div class="modal fade" id="exampleModalCenter1" tabindex="-1" role="dialog"
            aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <!-- hearder -->

                        <h5 class="modal-title" id="exampleModalLongTitle">Lúcia Rodrigues</h5>

                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>

                    </div>

                    <div class="modal-body">
                        <!-- body -->

                        <div class="imagemdocaso">
                            <img src="./imagens/avatar2.png" width="100%" height="100%">
                        </div>

                        <div class="descricao">
                            <p>
                                <b>Data do caso:</b> 05 de janeiro de 2019 <br>
                                <b>Nome da vítima:</b> Lúcia Rodrigues <br>
                                <b>Idade da Vítima:</b> 48 anos <br>
                                <b>Localidade:</b> Lagoa, Algarve
                            </p>

                        </div>

                    </div>

                    <div class="modal-footer">
                        <!-- footer -->
                        <a href="https://www.cmjornal.pt/exclusivos/detalhe/cacador-mata-mulher-por-ciumes-doentios"
                            class="noticia btn btn-outline-warning buttonlink" target="_blank">Noticia completa</a>

                    </div>
                </div>
            </div>
        </div>

the modal that already there this was made by hand and the information that there are also I liked to do it but automatic along with the JSON

Json:

[
    {
        "Nome": "Lucia Rodrigues",
        "Idade": 48,
        "Distrito": "Faro",
        "Faixa Etaria": "36 ou mais",
        "Faixa": "faixaD",
        "Sexo": "Feminino",
        "RecursoArma": "Sim",
        "id": 1,
        "longitude": -8.483230,
        "latitude": 37.147150
    },
    {
        "Nome": "Nome Desconhecido",
        "Idade": 46,
        "Distrito": "Açores",
        "Faixa Etaria": "36 ou mais",
        "Faixa": "faixaD",
        "Sexo": "Feminino",
        "RecursoArma": "Não",
        "id": 2,
        "longitude": -27.210329,
        "latitude": 38.721210
    },
    {
        "Nome": "Vera Silva",
        "Idade": 30,
        "Distrito": "Setúbal",
        "Faixa Etaria": "26-35",
        "Faixa": "faixaC",
        "Sexo": "Feminino",
        "RecursoArma": "Não",
        "id": 3,
        "longitude": -9.179570,
        "latitude": 38.667440
    },
    {
        "Nome": "Maria Eufrázia",
        "Idade": 83,
        "Distrito": "Évora",
        "Faixa Etaria": "36 ou mais",
        "Faixa": "faixaD",
        "Sexo": "Feminino",
        "RecursoArma": "Sim",
        "id": 4,
        "longitude": -7.411580,
        "latitude": 38.621020
    },
    {
        "Nome": "Luzia Rosado",
        "Idade": 80,
        "Distrito": "Évora",
        "Faixa Etaria": "36 ou mais",
        "Faixa": "faixaD",
        "Sexo": "Feminino",
        "RecursoArma": "Sim",
        "id": 5,
        "longitude": -7.411580,
        "latitude": 38.621020
    },
    {
        "Nome": "Fernanda",
        "Idade": 70,
        "Distrito": "Lisboa",
        "Faixa Etaria": "36 ou mais",
        "Faixa": "faixaD",
        "Sexo": "Feminino",
        "RecursoArma": "Sim",
        "id": 6,
        "longitude": -9.250460,
        "latitude": 38.706230
    },
    {
        "Nome": "Nome Desconhecido",
        "Idade": 48,
        "Distrito": "Santarém",
        "Faixa Etaria": "36 ou mais",
        "Faixa": "faixaD",
        "Sexo": "Feminino",
        "RecursoArma": "Não",
        "id": 7,
        "longitude": -8.682080,
        "latitude": 39.235370
    },
    {
        "Nome": "Marina Mendes",
        "Idade": 25,
        "Distrito": "Viseu",
        "Faixa Etaria": "18-25",
        "Faixa": "faixaB",
        "Sexo": "Feminino",
        "RecursoArma": "Sim",
        "id": 8,
        "longitude": -7.617740,
        "latitude": 40.985050
    },
    {
        "Nome": "Helena Cabrita",
        "Idade": 60,
        "Distrito": "Setúbal",
        "Faixa Etaria": "36 ou mais",
        "Faixa": "faixaD",
        "Sexo": "Feminino",
        "RecursoArma": "Sim",
        "id": 9,
        "longitude": -7.933170,
        "latitude": 40.668580
    },
    {
        "Nome": "Lara",
        "Idade": 2,
        "Distrito": "Setúbal",
        "Faixa Etaria": "0-17",
        "Faixa": "faixaA",
        "Sexo": "Feminino",
        "RecursoArma": "Sim",
        "id": 10,
        "longitude": -7.933170,
        "latitude": 40.668580
    },
    {
        "Nome": "Fernando Cruz",
        "Idade": 67,
        "Distrito": "Porto",
        "Faixa Etaria": "36 ou mais",
        "Faixa": "faixaD",
        "Sexo": "Masculino",
        "RecursoArma": "Não",
        "id": 11,
        "longitude": -8.629105,
        "latitude": 41.157944
    },
    {
        "Nome": "Ana Maria Silva",
        "Idade": 53,
        "Distrito": "Santarém",
        "Faixa Etaria": "36 ou mais",
        "Faixa": "faixaD",
        "Sexo": "Feminino",
        "RecursoArma": "Sim",
        "id": 12,
        "longitude": -8.489080,
        "latitude": 39.402700
    },
    {
        "Nome": "Ana Paula",
        "Idade": 40,
        "Distrito": "Braga",
        "Faixa Etaria": "36 ou mais",
        "Faixa": "faixaD",
        "Sexo": "Feminino",
        "RecursoArma": "Não",
        "id": 13,
        "longitude": -8.091410,
        "latitude": 41.681510
    },
    {
        "Nome": "Heila Lopes",
        "Idade": 44,
        "Distrito": "Lisboa",
        "Faixa Etaria": "36 ou mais",
        "Faixa": "faixaD",
        "Sexo": "Feminino",
        "RecursoArma": "Não",
        "id": 14,
        "longitude": -9.309280,
        "latitude": 39.067570
    },
    {
        "Nome": "Sónia Ribeiro",
        "Idade": 37,
        "Distrito": "Algarve",
        "Faixa Etaria": "36 ou mais",
        "Faixa": "faixaD",
        "Sexo": "Feminino",
        "RecursoArma": "Sim",
        "id": 15,
        "longitude": -7.414600,
        "latitude": 37.192760
    }
]