JSON

pktcodes · pktcodes · commit 337a85cefc91 · 2023-04-16T23:10:36.000-05:00
diff --git a/api/people.json b/api/people.json
@@ -0,0 +1,6 @@
+[
+  { "name": "john", "age": 25 },
+  { "name": "peter", "age": 30 },
+  { "name": "anna", "age": 18 },
+  { "name": "susan", "age": 19 }
+]
diff --git a/app.js b/app.js
@@ -1,22 +1,40 @@
 /* To show that data fetching is happening asynchronously (in the background), but not on initial page refresh */
 
+/*  
+- JSON is the string format will "GET" from server or sent from  browser "POST"
+- Since it is string we will need to "parse"  when we get or "stringify" when sent to server
+ */
+
+const url = "./api/people.json";
+
 const btn = document.querySelector(".btn");
 btn.addEventListener("click", () => {
-  getData();
+  getData(url);
 });
 
-function getData() {
+function getData(url) {
   const xhr = new XMLHttpRequest();
 
-  xhr.open("GET", "./api/sample.txt");
+  xhr.open("GET", url);
 
   /* It gets fired when since ready state changes from 0 to 1 when used open() method */
   xhr.onreadystatechange = function () {
     // console.log(xhr);
     if (xhr.readyState === 4 && xhr.status === 200) {
-      const paragraph = document.createElement("p");
-      paragraph.textContent = xhr.responseText;
-      document.body.appendChild(paragraph);
+      console.log(xhr.responseText);
+
+      const data = JSON.parse(xhr.responseText);
+      console.log(data);
+
+      const displayPeople = data
+        .map((person) => {
+          return `<p>${person.name}</p>`;
+        })
+        .join("");
+
+      const element = document.createElement("div");
+      element.innerHTML = displayPeople;
+      document.body.appendChild(element);
     } else {
       console.log({
         status: xhr.status,
@@ -31,4 +49,4 @@ function getData() {
 }
 
 // It executes first, since the above functionality works asynchronously by browser, only when JavaScript is free then it takes the data from browser
-console.log("hello world");
+// console.log("hello world");
diff --git a/index.html b/index.html
@@ -12,7 +12,7 @@
   </head>
   <body>
     <h1>AJAX</h1>
-    <button type="button" class="btn">Show More</button>
+    <button type="button" class="btn">Show JSON</button>
     <!-- Link to JavaScript -->
     <script type="module" src="./app.js"></script>
   </body>
