PracticeFolder/pranjal.html at main · SwifSys/PracticeFolder · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table border="1">
        <pran>
            <tr>
                <th>ID</th>
                <th>User Id</th>
                <th>Title</th>
                <th>Body</th>
            </tr>
        </pran>
        <tbody id="tableT"></tbody>
        <tbody id="BodyB"></tbody>

    </table>
    <script>
        const fetchCall = fetch('https://jsonplaceholder.typicode.com/posts'); //api call
        console.log(fetchCall); //only for crosscheck
        const responce = fetchCall.then((res) => res.json()).catch((err) => console.log(err));// promise
        responce.then((res) => {
            console.log(res);
            document.getElementById('BodyB').innerHTML = renderTableData(res); //save data in rendertabledata
        })
        //map ::
        //.json and .JSON
        const renderTableData = (list) => {
            return list.map(
                (item) =>
                    `<tr onclick="mainFn(${item.id})">
                    <td id="selectId">${item.id}</td>
                    <td>${item.userId}</td>
                    <td>${item.title}</td>
                    <td>${item.body}</td>
                </tr>`
            )
        }

        function mainFn(r) {
            responce.then((respo) => {
                r = r - 1;
                document.getElementById("tableT").style.display = "none";
                document.getElementById("BodyB").innerHTML =
                    `<tr>
                    <td>${respo[r].id}</td>
                    <td>${respo[r].userId}</td>
                    <td>${respo[r].title}</td>
                    <td>${respo[r].body}</td>
                </tr> </br> <button onclick="refresh()"
                                    style="
                                            position: absolute;
                                            left: 50%;
                                            right: 50%;
                                            width: 75px;
                                            height: 25px;
                                            margin-top: 15px;"
                                >Go Back
                            </button>`;
            })
        }
        function refresh() {
            location.reload();
        }
    </script>

</body>

</html>