team-fresh/fetch.js at main · opher-dev/team-fresh · 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
57
58
59
60
61
62
63
64
65
66
// const users = fetch('https://jso???nplaceholder.typicode.com/users');

// promise
const p = new Promise((resolve, reject)=>{
try {
   return resolve({name:"jean avenue"})
} catch (error) {
   return reject(error)
}
})

p.then(r=>{
console.log(r)
});
// GET
// HTTP METHODS  read on this
// GET : fetch data from api
// POST : send data to the API
// DELETE: delete data from api
// PUT: update
// PATCH: update

// {
//     "id": 1,
//     "name": "Leanne Graham",
//     "username": "Bret",
//     "email": "Sincere@april.biz",
//     "address": {
//       "street": "Kulas Light",
//       "suite": "Apt. 556",
//       "city": "Gwenborough",
//       "zipcode": "92998-3874",
//       "geo": {
//         "lat": "-37.3159",
//         "lng": "81.1496"
//       }
//     },
//     "phone": "1-770-736-8031 x56442",
//     "website": "hildegard.org",
//     "company": {
//       "name": "Romaguera-Crona",
//       "catchPhrase": "Multi-layered client-server neural-net",
//       "bs": "harness real-time e-markets"
//     }
//   },

const renderData = (userData)=> {
    userData.map(user=>{
        const ucard = document.createElement('div');
        const h1= document.createElement("h1")
        h1.textContent = `${user.name} ${user.username}`
        const p1= document.createElement("p")
        p1.textContent = user.email
        const p2= document.createElement("p")
        p2.textContent = user.phone
        ucard.appendChild(h1)
        ucard.appendChild(p1)
        ucard.appendChild(p2)
        document.querySelector("body").appendChild(ucard)
    })
}
const users = fetch('https://jsonplaceholder.typicode.com/users');
users.then(async userList=> {
    const fNamd = await userList.json()
    renderData(fNamd)
});