Simple Stock Table

Yesterday I meet a guy he is working with some product development company. We had a technical discussion for 45 min. he asked me to develop a stock board which will show some KPI based on the stock price. He gave some constraints.Display stock data in a table format

1. Consume JSON data which is sent from the server. 
2. Data need to update in a regular time interval.
3. When JSON Data Updates Stock table and KPIS also need to update
4. Code should be written in the OOPS Manner.

Right now I am bit busy with some of my office work even though, I want to work on that. For now I made a rough one with some dummy JSON Object which is declared in the stock object it self. 

It is a simple static one but once I got some time I will make this like what he wanted.

STEP -1 --- FOLDER STRUCTURE

i have created a folder in the wwwroot folder and named it as stock. in that folder i made 2 more folders images, js and index.html file. in the js folder i made a stock.js file.

function Stock(){

// dummy JSON Object

var dummyJson = {

   "stockElements":[

      {

         "stockName":"Apple",

         "stockPrice":100,

"kpi" : ""

      },

      {

         "stockName":"Samsung",

         "stockPrice":98,

"kpi" : ""

      },

      {

         "stockName":"Motorola",

         "stockPrice":67,

"kpi" : ""

      },

 {

         "stockName":"Nokia",

         "stockPrice":80,

"kpi" : ""

      },

  {

         "stockName":"HTC",

         "stockPrice":110,

"kpi" : ""

      }

   ]

}

// to display the stock table

this.genrateStockTable = function(){

var stockTable = document.createElement('table');

stockTable.id="stocktable";

document.body.appendChild(stockTable);

var stocktrArray = [];

var stocktdArray = [];

for(var i=0;i<dummyJson.stockElements.length;i++){

stocktrArray[i] = (function(){

var row = document.createElement('tr');

stockTable.appendChild(row);

var count=0, key;

for(key in dummyJson.stockElements[i]){

count++;

stocktdArray[count] = (function(){

var myTd = document.createElement('td');

row.appendChild(myTd);

myTd.innerHTML = dummyJson.stockElements[i][key];

if(count == "3"){

var stockVal =  parseInt(document.getElementById('stocktable').rows[i].cells[1].innerHTML);

if(stockVal<100){

myTd.innerHTML ="<img src='images/downTrend.png'/>";

}

else{

myTd.innerHTML ="<img src='images/upTrend.png'/>";

}

}

})();

}

})();

}

}

}

STEP -2--- index.html

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>Stock KPI</title>

<script src="js/stock.js"></script>

<style>

table{

border:1px solid #333;

border-collapse:collapse;

}

table td{

background:#FFFFFF;

padding:5px;

border:1px solid #333;

}

</style>

</head>

<body>

<script>

var mystock = new Stock();

mystock.genrateStockTable();

</script>

</body>

</html>

once i get some time i will get the JSON form the server and 

Implement 

remaining logic .