added example of working with json in ajax

chadsmith12 · May 13, 2018 · 8dabe5d · 8dabe5d
1 parent 0515be4
commit 8dabe5d
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 0 deletions.
diff --git a/ajax-json/app.js b/ajax-json/app.js
@@ -0,0 +1,55 @@
+/**
+ * Example of using ajax to load up a JSON file.
+ * Examples shows working with json files
+ */
+
+document.getElementById("getSingleProductBtn").addEventListener('click', loadProduct);
+document.getElementById("getProductsBtn").addEventListener('click', loadProducts);
+
+// load a single product
+function loadProduct(e) {
+ const xhr = new XMLHttpRequest();
+ xhr.open('GET', "testFiles/product.json", true);
+
+ xhr.onload = function () {
+ if(this.status === 200) {
+ const product = JSON.parse(this.responseText);
+ const output = 
+ `<ul>
+ <li>Id: ${product.id}</li>
+ <li>SKU: ${product.sku}</li>
+ <li>Product Name: ${product.productName}</li>
+ </ul>
+ `
+ document.querySelector("#product").innerHTML = output;
+ }
+ }
+
+ xhr.send();
+}
+
+// load an array of products
+function loadProducts(e) {
+ const xhr = new XMLHttpRequest();
+ xhr.open('GET', "testFiles/products.json", true);
+
+ xhr.onload = function () {
+ if(this.status === 200) {
+ const products = JSON.parse(this.responseText);
+ let output = '';
+ products.forEach(product => {
+ output += 
+ `<ul>
+ <li>Id: ${product.id}</li>
+ <li>SKU: ${product.sku}</li>
+ <li>Product Name: ${product.productName}</li>
+ </ul>
+ `
+ });
+
+ document.querySelector("#products").innerHTML = output;
+ }
+ }
+
+ xhr.send();
+}
diff --git a/ajax-json/index.html b/ajax-json/index.html
@@ -0,0 +1,23 @@
+<!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">
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" />
+ <title>XHR Objects - Working With Text</title>
+</head>
+<body>
+ <div class="container">
+ <button id="getSingleProductBtn">Get Product</button>
+ <button id="getProductsBtn">Get Products</button>
+ <br><br>
+ <h3>Product</h3>
+ <div id="product"></div>
+ <h3>Products</h3>
+ <div id="products"></div>
+ </div>
+
+ <script src="app.js"></script>
+</body>
+</html>
diff --git a/ajax-json/testFiles/product.json b/ajax-json/testFiles/product.json
@@ -0,0 +1,5 @@
+{
+ "id": 1,
+ "sku": "11234",
+ "productName": "Computer Monitor"
+}
diff --git a/ajax-json/testFiles/products.json b/ajax-json/testFiles/products.json
@@ -0,0 +1,17 @@
+[
+ {
+ "id": 1,
+ "sku": "11234",
+ "productName": "Computer Monitor"
+ },
+ {
+ "id": 2,
+ "sku": "12345",
+ "productName": "Computer Hardrive"
+ },
+ {
+ "id": 3,
+ "sku": "17415",
+ "productName": "Computer Processor"
+ }
+]