melwyn95/data.js

## data.js
var data = {

	"inbox": [

		{
			"id": 1,
			"sender": "a@cs.com",
			"subject": "sub  1",
			"body": "body 1"
		},
		{
			"id": 2,
			"sender": "a@cs.com",
			"subject": "sub  2",
			"body": "body 1"
		},
		{
			"id": 3,
			"sender": "a@cs.com",
			"subject": "sub  3",
			"body": "body 1"
		}

	],
	"sent": [

		{
			"id": 4,
			"sender": "a@cs.com",
			"subject": "sub  4",
			"body": "body 1"
		},
		{
			"id": 5,
			"sender": "a@cs.com",
			"subject": "sub  5",
			"body": "body 1"
		},
		{
			"id": 6,
			"sender": "a@cs.com",
			"subject": "sub  6",
			"body": "body 1"
		}

	],
	"trash": [

		{
			"id": 7,
			"sender": "a@cs.com",
			"subject": "sub  7",
			"body": "body 1"
		},
		{
			"id": 8,
			"sender": "a@cs.com",
			"subject": "sub  8",
			"body": "body 1"
		},
		{
			"id": 9,
			"sender": "a@cs.com",
			"subject": "sub  9",
			"body": "body 1"
		}

	]

};

## index.html
<html>

	<head>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
		<script src="data.js"></script>
		<script src="main.js"></script>
	</head>

	<body>
		<div id="side">
		1
		</div>
		<div id="middle">
		2
		</div>
	</body>

</html>

## main.js

var press = "inbox";

$(document).ready(function() {

	var h = "";
	for (i in data) {
		h += ("<button id='"+i+"'>"+i+"</button><br/>");
	}
	$("#side").html(h);

	h = "";
	for(i in data["inbox"]) {
		h += ("<a href='#' id='"+data["inbox"][i]["id"]+"'>"+data["inbox"][i]["subject"]+"</a><br/>");
	}
	$("#middle").html(h);

	$("button").click( function(event){

		console.log(this.id);
		press = this.id;
		h = "";
		for(i in data[this.id]) {
			h += ("<a href='#' id='"+i+"'>"+data[this.id][i]["subject"]+"</a><br/>");
		}
		$("#middle").html(h);
	});


});

$(document).on("click", "a", function(){
	console.log(press);
	console.log(this.id);

	console.log(data[press][this.id]);


	$("#middle").html("<p>sender: "+data[press][this.id]["sender"]+"<br/><h3>Subject: "+data[press][this.id]["subject"]+"</h3><br/><p>"+data[press][this.id]["body"]+"</p></p>");

});
	var data = {

	"inbox": [

	{
	"id": 1,
	"sender": "a@cs.com",
	"subject": "sub 1",
	"body": "body 1"
	},
	{
	"id": 2,
	"sender": "a@cs.com",
	"subject": "sub 2",
	"body": "body 1"
	},
	{
	"id": 3,
	"sender": "a@cs.com",
	"subject": "sub 3",
	"body": "body 1"
	}

	],
	"sent": [

	{
	"id": 4,
	"sender": "a@cs.com",
	"subject": "sub 4",
	"body": "body 1"
	},
	{
	"id": 5,
	"sender": "a@cs.com",
	"subject": "sub 5",
	"body": "body 1"
	},
	{
	"id": 6,
	"sender": "a@cs.com",
	"subject": "sub 6",
	"body": "body 1"
	}

	],
	"trash": [

	{
	"id": 7,
	"sender": "a@cs.com",
	"subject": "sub 7",
	"body": "body 1"
	},
	{
	"id": 8,
	"sender": "a@cs.com",
	"subject": "sub 8",
	"body": "body 1"
	},
	{
	"id": 9,
	"sender": "a@cs.com",
	"subject": "sub 9",
	"body": "body 1"
	}

	]

	};
	<html>

	<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script src="data.js"></script>
	<script src="main.js"></script>
	</head>

	<body>
	<div id="side">
	1
	</div>
	<div id="middle">
	2
	</div>
	</body>

	</html>

	var press = "inbox";

	$(document).ready(function() {

	var h = "";
	for (i in data) {
	h += ("<button id='"+i+"'>"+i+"</button><br/>");
	}
	$("#side").html(h);

	h = "";
	for(i in data["inbox"]) {
	h += ("<a href='#' id='"+data["inbox"][i]["id"]+"'>"+data["inbox"][i]["subject"]+"</a><br/>");
	}
	$("#middle").html(h);

	$("button").click( function(event){

	console.log(this.id);
	press = this.id;
	h = "";
	for(i in data[this.id]) {
	h += ("<a href='#' id='"+i+"'>"+data[this.id][i]["subject"]+"</a><br/>");
	}
	$("#middle").html(h);
	});


	});

	$(document).on("click", "a", function(){
	console.log(press);
	console.log(this.id);

	console.log(data[press][this.id]);


	$("#middle").html("<p>sender: "+data[press][this.id]["sender"]+"<br/><h3>Subject: "+data[press][this.id]["subject"]+"</h3><br/><p>"+data[press][this.id]["body"]+"</p></p>");

	});