//Define data
function Person(name, role) {
	this.name = name;
	this.role = role;
    }

Person.prototype.setRole = function(role) {
	this.role = role;
    }
Person.prototype.toJSON = function() {
	const obj = {name: this.name, role:this.role};
	const json = JSON.stringify(obj);
	return json;
    }
    
// Creating data and putting it into a list
var Tanay = new Person("Tanay", "Scrum Father");
var Yuri = new Person("Yuri", "DevOps");
var Harsha = new Person("Harsha", "Frontend Dev");
var Sachit = new Person("Sachit", "Backend Dev");
var Raunak = new Person("Raunak", "Backend Dev");

storedInfo = [Yuri, Tanay, Harsha, Sachit, Raunak];

//Make a object to hold the data
function infoStorage(storedInfo) {
	this.storedInfo = storedInfo;
    }
    
    // Type Object that holds the data
    infoHolder = new infoStorage(storedInfo);
    //HTML conversion method
    infoStorage.prototype._toHtml = function() {
	var style = (
	  "display:inline-block;" +
	  "border: 2px solid grey;" +
	  "box-shadow: 0.8em 0.4em 0.4em grey;"
	);
      
	var table = "";
	table += "<tr>";
	table += "<th><mark>" + "Name" + "</mark></th>";
	table += "<th><mark>" + "Role" + "</mark></th>";
	table += "</tr>";
    
	//Go through all data and each data's properties in a table format
	for (var row of this.storedInfo) {
	    table += "<tr>";
	    table += "<td>" + row.name;
	    table += "<td>" + row.role + "</td>";
	    table += "<tr>"
	}
	 //Return table
	return (
	  "<div style='" + style + "'>" +
	    "<table>" +
		table +
	    "</table>" +
	  "</div>"
	);
      };
      
      // IJavaScript HTML processor receive parameter of defined HTML fragment
      $$.html(infoHolder._toHtml());
</table></div> </div> </div> </div> </div> </div> </div>
Name Role
Yuri DevOps
Tanay Scrum Master
Harsha Frontend
Sachit Backend
Raunak Backend