fetchAPI/index.html at master · devamaz/fetchAPI · 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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>AMAZ-TECH | Fetch API</title>
    <link rel="stylesheet" href="style/w3.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Allerta+Stencil">
    <style>
        .w3-allerta {
            font-family: "Allerta Stencil", Sans-serif;
        }
    </style>


</head>

<body>
    <div class="w3-container">
        <h1 class="w3-center w3-allerta w3-xxlarge">How to GET and POST data with Fetch API</h1>
        <p class="w3-center"> A Demo to my tutorial on Using Fetch API to GET and POST.  <a class="w3-btn w3-green" href="https://dev.to/dev_amaz/using-fetch-api-to-get-and-post--1g7d">LINK</a></p>
        <p>
            <p>
                CLICK TO GET AND DISPLAY DATA
            </p>
            <input type="submit" value="GET DATA FROM LOCAL" id="getJSON" class="w3-btn w3-white w3-border w3-border-blue w3-margin">
            <input type="submit" value="GET DATA FROM API" id="getAPI" class="w3-btn w3-blue w3-margin">
        </p>
        <hr>

        <div id="result" class="w3-container"></div>

        <hr>

        <div class="w3-container w3-blue">
            <h2>Input Form</h2>
        </div>
        <form id="postData" class="w3-container w3-margin">
            <p>
                <input type="text" name="" placeholder="Post title ..." class="w3-input" id="title">
            </p>
            <p>
                <textarea name="" placeholder="Body ..." id="body" cols="20" rows="5" class="w3-input"></textarea>
            </p>
            <input type="submit" value="SEND POST" class="w3-btn w3-blue">
        </form>

    </div>


    <script>
        document.getElementById('getJSON').addEventListener('click', getJSON);
        document.getElementById('getAPI').addEventListener('click', getAPI);
        document.getElementById('postData').addEventListener('submit', postData);

        function getJSON() {
            /*********************************************
            *      When using the  sample json file      *
            * ********************************************/

            fetch('sampleUser.json')
                .then(function (res) {
                    return res.json();
                })
                .then(function (data) {
                    let result = `<h2 class="w3-center w3-allerta w3-xxlarge"> User Info From sampleUser.json </h2>`;
                    data.forEach((user) => {
                        const { id, name, email } = user
                        result +=
                            `<div class="w3-panel w3-leftbar w3-border w3-round-small w3-border-blue w3-margin">
                                <h5> User ID: ${id} </h5>
                                <ul class="w3-ul">
                                    <li> User Name : ${name}</li>
                                    <li> User Email: ${email} </li>
                                </ul>
                             </div>`;
                        document.getElementById('result').innerHTML = result;
                    });
                })

        }

        function getAPI() {

            /*********************************************
           *          Using jsonplaceholder API         *
           * ********************************************/

            fetch('https://jsonplaceholder.typicode.com/users')
                .then((res) => { return res.json() })
                .then((data) => {
                    let result = `<h2 class="w3-center w3-allerta w3-xxlarge"> Random User Info From Jsonplaceholder API</h2>`;
                    data.forEach((user) => {
                        const {id, name, email, address:{city,street}} = user
                        result +=
                            `<div class="w3-panel w3-leftbar w3-border w3-round-small w3-border-blue w3-margin">
                                <h5> User ID: ${id} </h5>
                                <ul class="w3-ul">
                                    <li> User Full Name : ${name}</li>
                                    <li> User Email : ${email} </li>
                                    <li> User Address : ${city}, ${street} </li>
                                </ul>
                             </div>`;
                        document.getElementById('result').innerHTML = result;
                    });
                })

        }

        function postData(event) {
            event.preventDefault();

            let title = document.getElementById('title').value;
            let body = document.getElementById('body').value;

            title || body === "" ?
            alert('Please Enter all details') :
            fetch('https://jsonplaceholder.typicode.com/posts', {
                method: 'POST',
                headers: new Headers(),
                body: JSON.stringify({ title, body })
            }).then((res) => res.json())
                .then((data) => alert('Data Sent'))
                .catch((err) => console.log(err))
        }
    </script>

</body>

</html>