adding in the proper json data and effectivley parsing with FileReader; doing necessary things to display table
This commit is contained in:
arjunpat
@@ -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();
|
||||
});
|
||||
}
|
||||
});
|
||||
+56
-23
@@ -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",
|
||||
"last" : "Jordan",
|
||||
"email" : "mekadn@gmail.com",
|
||||
"phone" : 8321829301,
|
||||
"address" : "2121 Elk Tree, Victorville, CA 73821",
|
||||
"age" : 21
|
||||
},
|
||||
{
|
||||
"first" : "Alex",
|
||||
"last" : "Bergues",
|
||||
"email" : "abuesg@gmail.com",
|
||||
"phone" : "9120219293",
|
||||
"address" : "81239 Oak Grove Ave, Folsom, CA 22012",
|
||||
"age" : 50
|
||||
"orders" :
|
||||
[{
|
||||
"customer_id" : 1,
|
||||
"order_no" : 1,
|
||||
"part_id" : 1111,
|
||||
"parent_part" : 1111,
|
||||
"price" : 1000,
|
||||
"qty" : 2,
|
||||
"paid" : 2000
|
||||
},
|
||||
{
|
||||
"customer_id" : 1,
|
||||
"order_no" : 2,
|
||||
"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
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
+79
@@ -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;
|
||||
}
|
||||
+28
-3
@@ -1,11 +1,36 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Data Flow</title>
|
||||
</head>
|
||||
<head>
|
||||
<title>Data Flow</title>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
Reference in New Issue
Block a user