Project4_API_fetch_project/api_fetch.js at main · Vidhya0501/Project4_API_fetch_project · 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
const head=document.createElement("header");
head.innerText="Users List";
document.body.append(head);
const sec=document.createElement("section");

/*Using asyn-await and try-catch*/

async function app(){
  try{
        const result=await fetch("https://jsonplaceholder.typicode.com/users");
        const res=await result.json();
            for (var i = 0; i < res.length; i++) {
              const div = document.createElement("div");
              div.innerHTML = `<div class="row">
              <div class="col-sm-6 mb-3 mb-sm-0">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Name : ${res[i].name}</h5>
                        <p class="card-text">Email : ${res[i].email}</P>
                        <p class="card-text">Street : ${res[i].address.street}</P>
                        <p class="card-text">City : ${res[i].address.city}</P>
                    </div>
                </div>
              </div>
              </div>`;
            sec.append(div)
            document.body.append(sec);
            }
          } catch(error){
                  console.log(error);
                }
}

app();


/* Using .then */

// function app(){
//     const result=fetch("https://jsonplaceholder.typicode.com/users");
//     result
//       .then((data) => data.json())
//       .then((data1) => {
//         for (var i = 0; i < data1.length; i++) {
//           const div = document.createElement("div");
//           div.innerHTML = `<div class="row">
//           <div class="col-sm-6 mb-3 mb-sm-0">
//             <div class="card">
//                 <div class="card-body">
//                     <h5 class="card-title">Name : ${data1[i].name}</h5>
//                     <p class="card-text">Email : ${data1[i].email}</P>
//                     <p class="card-text">Street : ${data1[i].address.street}</P>
//                     <p class="card-text">City : ${data1[i].address.city}</P>
//                 </div>
//             </div>
//           </div>
//           </div>`;
//         sec.append(div)
//         document.body.append(sec);
//         }
//     });
//   }
//   app();