adding in the proper json data and effectivley parsing with FileReader; doing necessary things to display table

main.js

@@ -0,0 +1,35 @@
+/*
+  * By: Arjun Patel
+  * Date: 7/30/18
+  *
+  */
+
+/*
+  * jQuery function call on DOM loading
+  */
+$(function() {
+
+  // Event Handlers
+    $("#inputFile").change(function(e) {
+      onChangeInput(e);
+      $('#inputFile').css("background-color", "#0d7aa5");
+    });
+
+
+  // Helper Function to read/load specific file
+    function onChangeInput(event) {
+        var reader = new FileReader();
+        reader.onload = onReaderLoad;
+        reader.readAsText(event.target.files[0]);
+    }
+
+  // General function to parse JSON
+    function onReaderLoad(event) {
+        var obj = JSON.parse(event.target.result);
+        console.log(obj.orders);
+        obj.orders.map((order) => {
+          console.log(order);
+          $('#table').append("<div class='flexBasicRow'><p class='col'>" + order.customer_id + "</p><p class='col'>" + order.order_no + "</p><p class='col'>" + order.part_id + "</p><p class='col'>" + order.parent_part + "</p><p class='col'>" + order.price + "</p><p class='col'>" + order.qty + "</p></p><p class='col'>" + order.paid + "</p></div>").fadeIn();
+        });
+    }
+});

sample_data.json

@@ -1,25 +1,58 @@
-[{
-	"first" : "John",
-	"last" : "Smith",
-	"email" : "johnsmith@gmail.com",
-	"phone" : 9492039201, 
-	"address" : "12123 Stock Ave, Stockton, CA 92112",
-	"age" : 34
-},
 {
-	"first" : "Mike",
+	"orders" :
-	"last" : "Jordan",
+		[{
-	"email" : "mekadn@gmail.com",
+			"customer_id" : 1,
-	"phone" : 8321829301, 
+			"order_no" : 1,
-	"address" : "2121 Elk Tree, Victorville, CA 73821",
+			"part_id" : 1111,
-	"age" : 21
+			"parent_part" : 1111,
-},
+			"price" : 1000,
-{
+			"qty" : 2,
-	"first" : "Alex",
+			"paid" : 2000
-	"last" : "Bergues",
+		},
-	"email" : "abuesg@gmail.com",
+		{
-	"phone" : "9120219293", 
+			"customer_id" : 1,
-	"address" : "81239 Oak Grove Ave, Folsom, CA 22012",
+			"order_no" : 2,
-	"age" : 50
+			"part_id" : 2321,
+			"parent_part" : 1111,
+			"price" : 500,
+			"qty" : 2,
+			"paid" : 1000
+		},
+		{
+			"customer_id" : 2,
+			"order_no" : 3,
+			"part_id" : 1232,
+			"parent_part" : 2222,
+			"price" : 200,
+			"qty" : 1,
+			"paid" : 200
+		},
+		{
+			"customer_id" : 3,
+			"order_no" : 4,
+			"part_id" : 12321,
+			"parent_part" : 3333,
+			"price" : 100,
+			"qty" : 1,
+			"paid" : 100
+		},
+		{
+			"customer_id" : 3,
+			"order_no" : 5,
+			"part_id" : 3331,
+			"parent_part" : 1111,
+			"price" : 500,
+			"qty" : 1,
+			"paid" : 500
+		},
+		{
+			"customer_id" : 4,
+			"order_no" : 6,
+			"part_id" : 2343,
+			"parent_part" : 1222,
+			"price" : 150,
+			"qty" : 1,
+			"paid" : 150
+		}
+		]
 }
-]

styles.css

@@ -0,0 +1,79 @@
+html {
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  font-family: 'Montserrat', sans-serif;
+}
+body {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #eff3f4;
+}
+.flexBasicRow {
+  flex: 1;
+  display: flex;
+  align-items: stretch;
+  justify-content: center;
+  align-self: stretch;
+  min-width: 800px;
+}
+.flexBasicCol {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  align-self: stretch;
+}
+.flex-1 {
+  flex: 1;
+}
+.pageHeader {
+  font-size: 1.5em;
+  font-weight: bold;
+  background-color: #0d7aa5;
+  padding: 1em;
+  color: white;
+  margin: 0;
+  align-self: stretch;
+  text-align: center;
+}
+#inputFile {
+  text-align: center;
+  padding: 1em;
+  margin: 1em;
+  background:#d0d4db;
+  border: none;
+  position:relative;
+  color:#fff;
+  border-radius:2px;
+  text-align:center;
+  float:left;
+  cursor:pointer;
+  transition: 1s;
+  -webkit-transition: 1s;
+}
+.card {
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  margin: 2em;
+}
+#table {
+  display: none;
+}
+.headRow {
+  background-color: #0d7aa5;
+  color: white;
+  align-self: stretch;
+}
+.col {
+  flex: 1;
+  margin: 0;
+  padding: 5px;
+  border-right: 1px solid white;
+  text-align: center;
+  text-overflow: ellipsis;
+    overflow: hidden;
+}

upload.html

@@ -1,11 +1,36 @@
 <!DOCTYPE html>
 <html>
-<head>
+  <head>
-  <title>Data Flow</title>
+    <title>Data Flow</title>
-</head>
+
+    <!-- Package/dependencies -->
+    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
+    <link rel="stylesheet" href="styles.css">
+    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
+  </head>
 
 <body>
+  <div class="flexBasicCol">
+    <div class="flexBasicCol card">
+      <p class="pageHeader">Input a JSON file with order details</p>
+      <input type="file" id="inputFile" value="Import" />
+    </div>
 
+    <div class="flexBasicCol card" id="table">
+      <div class="flexBasicRow headRow">
+        <p class="col">customer_id</p>
+        <p class="col">order_no</p>
+        <p class="col">part_id</p>
+        <p class="col">parent_part</p>
+        <p class="col">price</p>
+        <p class="col">qty</p>
+        <p class="col">paid</p>
+      </div>
+    </div>
 
+  </div>
+
+  <!-- Importing JS files after for efficient render -->
+  <script src="./main.js"></script>
 </body>
 </html>