Crear contactos en base a un array de objetos en Electron js 11

- Andrés Cruz

In english
Crear contactos en base a un array de objetos en Electron js 11

Anteriormente vimos como crear la caja de texto; en este apartado, vamos a construir el listado de contactos de manera programática mediante JavaScript; para eso, partiremos de un array de objetos con el siguiente formato:

index.html

<script>
    function createContacts() {
        var contacts = [
            {
                'name': 'Alex Alexis',
                'image': 'https://randomuser.me/api/portraits/women/56.jpg',
                'last_chat': [
                    {
                        'date': '9:15 AM',
                        'message': 'Lorem ipsum dolor sit amet consectetur adipisicing elit',
                    }
                ]
            },
            {
                'name': 'Ramon Reed',
                'image': 'https://randomuser.me/api/portraits/women/59.jpg',
                'last_chat': [
                    {
                        'date': '9:15 AM',
                        'message': 'Lorem Hello!',
                    }
                ]
            },
            {
                'name': 'Eli Barrett',
                'image': 'https://randomuser.me/api/portraits/women/58.jpg',
                'last_chat': [
                    {
                        'date': '8:55 PM',
                        'message': 'Lorem ipsum dolor sit ...',
                    }
                ]
            },
        ]
    }
</script>

Ahora, con el formato anterior, vamos a iterar el array de contactos y construir un HTML con la estructura anterior:

<script>
    function createContacts() {
        var contacts = [
            ***
        ]
 
        var lis = ''
 
        contacts.forEach((c) => {
            lis += `<li class="p-2 card mt-2">
                <div class="card-body">
                    <div class="d-flex">
                        <div>
                            <img class="rounded-pill me-3" width="60"
                                src="${c.image}">
                        </div>
                        <div>
                            <p class="fw-bold mb-0 text-light">${c.name}</p>
                            <p class="small text-muted">${c.last_chat[0]['message']}</p>
                        </div>
                        <div>
                            <p class="small text-muted">${c.last_chat[0]['date']}</p>
                            <span class="badge bg-danger rounded-pill float-end">1</span>
                        </div>
                    </div>
                </div>
            </li>`
        })
 
        document.querySelector('.contact').innerHTML = lis;
    }
    createContacts()
</script>

 

Recuerda que el material anterior forma parte sobre mi curso completo sobre Electron.js

Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.