Create contacts based on an array of objects in Electron js 11

- Andrés Cruz

En español

Create contacts based on an array of objects in Electron js 11

Previously we saw how to create the text box; In this section, we are going to build the list of contacts programmatically using JavaScript; for that, we will start from an array of objects with the following format:

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>

Now, with the previous format, we are going to iterate the contacts array and build an HTML with the previous structure:

<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>

 

Remember that the previous material is part of mi curso completo sobre Electron.js

Andrés Cruz

Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz In Udemy

I agree to receive announcements of interest about this Blog.