index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>People Data</h1>
    <ul id="people-list"></ul>

    <script>
        fetch('./persons.json')
            .then(response => response.json())
            .then(people => {
                
                const peopleList = document.getElementById('people-list');

                people.forEach((person, index) => {
                    const listItem = document.createElement('li');
                    listItem.innerHTML = `<strong>Name:</strong> ${person.name}, <strong>Age:</strong> ${person.age}`;
                    peopleList.appendChild(listItem);
                });
            })
            .catch(error => {
                console.error('Error fetching JSON:', error);
            });
    </script>
</body>
</html>