Fetch-and-JSON-Studio/script.js at main · Bjorlow/Fetch-and-JSON-Studio · 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
window.addEventListener('Load', function() {


const container = document.getElementById('container');

//fetch using tradiotional syntax
// fetch('https://handlers.education.launchcode.org/static/astronauts.json').then(function (response) {
//     response.json().then(function (data) {
//         console.log(data);

//         for (let i=0; i < data.length; i++) {
//             let astronaut = data[i];
//             container.innerHTML += `
//             <div class="astronaut">
//             <div class="bio">
//             <h3>${astronaut.firstName} ${astronaut.lastName}</h3>
//             <ul>
//             <li>Hours in space: ${astronaut.hoursInSpace}</li>
//             <li>Active: ${astronaut.active}</li>
//             <li>Skills:${astronaut.skills.join(", ")}</li>
//             </ul>
//             </div>
//             <img class="avatar src="${astronaut.picture}">
//             </div>
//             `;
//         }
//     })
// });

//Fetch with modren async /await syntax
async function fetchAndDisplayAstronauts()  {
    let repsonse = await fetch('https://handlers.education.launchcode.org/static/astronauts.json');
    let data = await Response.json();

    for (let i=0; i < data.length; i++) {
        let astronaut = data[i];
        container.innerHTML += `
        <div class="astronaut">
        <div class="bio">
        <h3>${astronaut.firstName} ${astronaut.lastName}</h3>
        <ul>
        <li>Hours in space: ${astronaut.hoursInSpace}</li>
        <li>Active: ${astronaut.active}</li>
        <li>Skills:${astronaut.skills.join(", ")}</li>
        </ul>
        </div>
        <img class="avatar src="${astronaut.picture}">
        </div>
        `;
    }
}


fetchAndDisplayAstronauts();

});