Fetch Method API tutorial in Advance JavaScript

October 16, 2024
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Fetch Method API Advance JavaScript</title>
    <link rel="stylesheet" href="">
</head>

<body>
    <form id="myForm">
        Title <input type="text" id="titleText"><br><br>
        Body <input type="text" id="bodyText"><br><br>
        User Id <input type="text" id="userid"><br><br>
        <input type="submit" id="saveForm">
    </form>
    <script>
        //Example 1 :
        // fetch("content/readme.txt").then((response) => {
        //     return response.text();
        // }).then((data) => {
        //     console.log(data);
        //     document.write(`${data}<br><br>`);
        // });

        // //Example 2 :
        // fetch("https://jsonplaceholder.typicode.com/users").then((response) => {
        //     return response.json();
        // }).then((data) => {
        //     console.log(data);

        //     //Here "key" will be store in "x"
        //     for (var x in data) {
        //         document.write(x);
        //         document.write(data[x]);
        //         var a = `${data[x].name} - ${data[x].email} - ${data[x].address.city}<br><br>`;
        //         document.write(a);
        //     }
        // }).catch((error) => {
        //     console.log("Can't fetch data");
        // });

        // //Example 3 :
        // fetch("json/student_data.json").then((response) => {
        //     return response.json();
        // }).then((data) => {
        //     console.log(data);
        //     for (var x in data) {
        //         var a = `${data[x].name} - ${data[x].age} - ${data[x].city}<br><br>`;
        //         document.write(a);
        //     }
        // }).catch((error) => {
        //     console.log("Can't fetch data");
        // });
        // //JSON.stringify() method convert JavaScript Object to JSON
        // //Example 4 :
        // var obj = {
        //     title: "foo",
        //     body: "bar",
        //     userId: 1
        // };
        // fetch("https://jsonplaceholder.typicode.com/posts", {
        //     method: "POST",
        //     body: JSON.stringify(obj),
        //     headers: {
        //         "Content-type": "application/json; charset=UTF-8",
        //     },
        // }).then((response) => {
        //     return response.json();
        // }).then((json) => {
        //     return console.log(json);
        // });

        //Example 5 :
        document.getElementById("saveForm").addEventListener("click", function (e) {
            e.preventDefault(); //e.preventDefault() stops Page Refreshing Functionality
            var obj = {
                title: document.getElementById("titleText").value,
                body: document.getElementById("bodyText").value,
                userId: document.getElementById("userid").value,
            };
            fetch("https://jsonplaceholder.typicode.com/posts", {
                method: "POST",
                body: JSON.stringify(obj),
                headers: {
                    "Content-type": "application/json; charset=UTF-8",
                },
            }).then((response) => {
                return response.json();
            }).then((json) => {
                return console.log(json);
            });
        });

        //Example 6 : If we want to send Direct Form Data (means Not Converting JavaScript Object to JSON)
        //then we can perform as shown below :
        document.getElementById("saveForm").addEventListener("click", function (e) {
            e.preventDefault();
            fetch("https://jsonplaceholder.typicode.com/posts", {
                method: "POST",
                body: new FormData(document.getElementById("myForm")),  //Send Form Data Directly (Not Converting JavaScript Object to JSON)
                headers: {
                    "Content-type": "application/x-www-form-urlencoded",
                },
            }).then((response) => {
                return response.json();
            }).then((json) => {
                return console.log(json);
            });
        });

        //We can check Whether browser supports fetch() method OR not as shown below :
        if (window.fetch) {

        }
        else { }
    </script>
</body>

</html>





Below File is json/student_data.json File
[
    {
        "name": "Kumar Sanu",
        "age": "25",
        "city": "Goa"
    },
    {
        "name": "Ram Kumar",
        "age": "56",
        "city": "Agra"
    }
]