Jae-kwang/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CodeSpitz75-1</title>
</head>
<body>
  <section id="data"></section>
  <script>
    const Info = class {
      constructor(json) {
        const {title, header, items} = json;
        if (typeof title != 'string' || !title) throw "invalid title";
        if (!Array.isArray(header) || !header.length) throw "invalid header";
        if (!Array.isArray(items) || !items.length) throw "invalid items";
        const returnItem = items.filter((v, idx) => {
          if (!(!Array.isArray(v) || v.length != header.length)) {
            return v; // throw "invalid items:" + idx;
          }
        });
        this._private = {title, header, returnItem};
      }
      get title() { return this._private.title;}
      get header() { return this._private.header;}
      get items() { return this._private.returnItem;}
    };
    const Data = class {
      async getData() {
        const json = await this._getData();
        return new Info(json);
      }
      async _getData() {
        throw "getData must override";
      }
    }
    const JsonData = class extends Data {
      constructor(data) {
        super();
        this._data = data;
      }
      async _getData() {
        if (typeof this._data == 'string') {
          const response = await fetch(this._data);
          return await response.json();
        } else {
          return this._data;
        }
      }
    }
    const Renderer = class {
      constructor() {}
      async render(data) {
        if (!(data instanceof Data)) throw "invalid data type";
        this._info = await data.getData();
        this._render();
      }
      _render() {
        throw "_render must overrided";
      }
    }
    const TableRenderer = class extends Renderer {
      constructor(parent) {
        if (typeof parent != 'string' || !parent) throw "invalid param";
        super();
        this._parent = parent;
      }
      _render() {
        const parent = document.querySelector(this._parent);
        if (!parent) throw "invalid parent";
        parent.innerHTML = "";
        const [table, caption] = "table,caption".split(",").map(v=>document.createElement(v));
        caption.innerHTML = this._info.title;
        table.appendChild(caption);
        table.appendChild(
          this._info.header.reduce(
            (thead, data) => (thead.appendChild(document.createElement("th")).innerHTML = data, thead),
            document.createElement("thead"))
        );
        parent.appendChild(
          this._info.items.reduce(
            (table, row) => (table.appendChild(
              row.reduce(
                (tr, data) => (tr.appendChild(document.createElement("td")).innerHTML = data, tr),
                document.createElement("tr"))
            ), table),
            table)
        );
      }
    }
    const url = 'https://gist.githubusercontent.com/hikaMaeng/717dc66225e40a8fe8d1c40366d40957/raw/447d44b800ed98817b0d29681be90aa1ec36e4ac/71_1.json';
    const data = new JsonData(url);
    const renderer = new TableRenderer("#data");
    renderer.render(data);
  </script>
</body>
</html>

## modify_data.json
{
	"title":"TIOBE Index for June 2017",
	"header":["Jun-17","Jun-16","Change","Programming Language","Ratings","Change"],
	"items":[
			 [1,1,"","Java","14.49%","-6.30%"],
			 [2,2,"","C","6.85%","-5.53%"],
			 [3,3,"","C++","5.72%","-0.48%"],
			 [4,4,"","Python","4.33%","0.43%"],
			 [5,5,"","C#","3.53%","-0.26%"],
			 [6,9,"change","Visual Basic .NET","3.11%","0.76%"],
			 [7,7,"","JavaScript","3.03%","0.44%"],
			 [8,6,"change","PHP","2.77%","-0.45%"],
			 [9,8,"change","Perl","2.31%","-0.09%"],
			 [10,12,"change","Assembly language","2.25%","0.13%"],
			 [11,10,"change","Ruby","2.22%","-0.11%"],
			 [12,14,"change","Swift","2.21%","0.38%"],
			 [13,13,"","Delphi/Object Pascal","2.16%","0.22%"],
			 [14,16,"change","R","2.15%","0.61%"],
			 [15,48,"change","Go","2.04%","1.83%"],
			 [16,11,"change","Visual Basic","2.01%","-0.24%"],
			 [17,17,"","MATLAB","2.00%","0.55%"],
			 [18,15,"change","Objective-C","1.96%","0.25%"],
			 [19,22,"change","Scratch","1.71%","0.76%"],
			 [20,18,"change","PL/SQL","1.57%","0.22%"]
	]
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>CodeSpitz75-1</title>
	</head>
	<body>
	<section id="data"></section>
	<script>
	const Info = class {
	constructor(json) {
	const {title, header, items} = json;
	if (typeof title != 'string' \|\| !title) throw "invalid title";
	if (!Array.isArray(header) \|\| !header.length) throw "invalid header";
	if (!Array.isArray(items) \|\| !items.length) throw "invalid items";
	const returnItem = items.filter((v, idx) => {
	if (!(!Array.isArray(v) \|\| v.length != header.length)) {
	return v; // throw "invalid items:" + idx;
	}
	});
	this._private = {title, header, returnItem};
	}
	get title() { return this._private.title;}
	get header() { return this._private.header;}
	get items() { return this._private.returnItem;}
	};
	const Data = class {
	async getData() {
	const json = await this._getData();
	return new Info(json);
	}
	async _getData() {
	throw "getData must override";
	}
	}
	const JsonData = class extends Data {
	constructor(data) {
	super();
	this._data = data;
	}
	async _getData() {
	if (typeof this._data == 'string') {
	const response = await fetch(this._data);
	return await response.json();
	} else {
	return this._data;
	}
	}
	}
	const Renderer = class {
	constructor() {}
	async render(data) {
	if (!(data instanceof Data)) throw "invalid data type";
	this._info = await data.getData();
	this._render();
	}
	_render() {
	throw "_render must overrided";
	}
	}
	const TableRenderer = class extends Renderer {
	constructor(parent) {
	if (typeof parent != 'string' \|\| !parent) throw "invalid param";
	super();
	this._parent = parent;
	}
	_render() {
	const parent = document.querySelector(this._parent);
	if (!parent) throw "invalid parent";
	parent.innerHTML = "";
	const [table, caption] = "table,caption".split(",").map(v=>document.createElement(v));
	caption.innerHTML = this._info.title;
	table.appendChild(caption);
	table.appendChild(
	this._info.header.reduce(
	(thead, data) => (thead.appendChild(document.createElement("th")).innerHTML = data, thead),
	document.createElement("thead"))
	);
	parent.appendChild(
	this._info.items.reduce(
	(table, row) => (table.appendChild(
	row.reduce(
	(tr, data) => (tr.appendChild(document.createElement("td")).innerHTML = data, tr),
	document.createElement("tr"))
	), table),
	table)
	);
	}
	}
	const url = 'https://gist.githubusercontent.com/hikaMaeng/717dc66225e40a8fe8d1c40366d40957/raw/447d44b800ed98817b0d29681be90aa1ec36e4ac/71_1.json';
	const data = new JsonData(url);
	const renderer = new TableRenderer("#data");
	renderer.render(data);
	</script>
	</body>
	</html>
	{
	"title":"TIOBE Index for June 2017",
	"header":["Jun-17","Jun-16","Change","Programming Language","Ratings","Change"],
	"items":[
	[1,1,"","Java","14.49%","-6.30%"],
	[2,2,"","C","6.85%","-5.53%"],
	[3,3,"","C++","5.72%","-0.48%"],
	[4,4,"","Python","4.33%","0.43%"],
	[5,5,"","C#","3.53%","-0.26%"],
	[6,9,"change","Visual Basic .NET","3.11%","0.76%"],
	[7,7,"","JavaScript","3.03%","0.44%"],
	[8,6,"change","PHP","2.77%","-0.45%"],
	[9,8,"change","Perl","2.31%","-0.09%"],
	[10,12,"change","Assembly language","2.25%","0.13%"],
	[11,10,"change","Ruby","2.22%","-0.11%"],
	[12,14,"change","Swift","2.21%","0.38%"],
	[13,13,"","Delphi/Object Pascal","2.16%","0.22%"],
	[14,16,"change","R","2.15%","0.61%"],
	[15,48,"change","Go","2.04%","1.83%"],
	[16,11,"change","Visual Basic","2.01%","-0.24%"],
	[17,17,"","MATLAB","2.00%","0.55%"],
	[18,15,"change","Objective-C","1.96%","0.25%"],
	[19,22,"change","Scratch","1.71%","0.76%"],
	[20,18,"change","PL/SQL","1.57%","0.22%"]
	]
	}