API-Practice-1/index.html at main · Kiretwo/API-Practice-1 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nationalize API Example</title>
</head>
<body>

<h1>Nationalize API Example</h1>
<div id="result"></div>

<script>
    async function fetchData() {
        const name = "Erik";
        const apiUrl = `https://api.nationalize.io?name=${name}`;

        try {
            // Make an asynchronous request using fetch
            const response = await fetch(apiUrl);

            if (!response.ok) {
                throw new Error(`HTTP error! Status: ${response.status}`);
            }

            // Parse the JSON response
            const data = await response.json();

            // Display the data on the webpage
            displayData(data);
        } catch (error) {
            console.error('Error fetching data:', error);
        }
    }

    function displayData(data) {
        const resultElement = document.getElementById('result');

        // Check if the data contains any country predictions
        if (data.country) {
            const predictions = data.country.map(country => {
                return `<p>${country.country_id}: ${country.probability.toFixed(4)}</p>`;
            }).join('');

            resultElement.innerHTML = `<p>Predictions for name "${data.name}":</p>${predictions}`;
        } else {
            resultElement.innerHTML = `<p>No predictions available for name "${data.name}"</p>`;
        }
    }

    // Call the fetchData function when the page loads
    window.onload = fetchData;
</script>

</body>
</html>