HomoEfficio/CodeSpitz75-01-오명운.html

## CodeSpitz75-01-오명운.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CodeSpitz71-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 validItems = items.filter(
      (item) => (Array.isArray(item) && item.length === header.length)
    );

    this._private = {title, headers: header, items: validItems};
  }

  get title() { return this._private.title; }
  get headers() { return this._private.headers; }
  get items() { return this._private.items; }
};

const Data = class {
  async getData() {
    const json = await this._getData();
    return new Info(json);
  }

  async _getData() {
    throw "_getData() must be overriden."
  }
};

const JsonData = class extends Data {
  constructor(url) {
    super();
    this._url = url;
  }

  async _getData() {
    if (typeof this._url !== 'string') throw "url must be string";

    let json;
    const response = await fetch(this._url);

    if (!response.ok) throw "invalid response";

    json = await response.json();

    return json;
  }
};

const Renderer = class {
  async render(info) {
    if (!(info instanceof Info)) throw "data is NOT Info type";

    this._title = info.title;
    this._headers = info.headers;
    this._items = info.items;
    this._render();
  }

  _render() {
    throw "_render() must be overriden."
  }
};

const TableRenderer = class extends Renderer {
  constructor(parent) {
    if (typeof parent != 'string' || !parent) {
      throw "invalid parent";
    }
    super();
    this._parent = parent;
  }

  _render() {
    const parent = document.querySelector(this._parent);
    if (!parent) throw "parent does NOT exist.";

    parent.innerHTML = "";
    const [table, caption] = "table,caption".split(',').map(v => document.createElement(v));

    caption.innerHTML = this._title;
    table.appendChild(caption);
    table.appendChild(
      this._headers.reduce(
        (thead, header) => (thead.appendChild(document.createElement('th')).innerHTML = header, thead),
        document.createElement('thead')
      )
    );
    parent.appendChild(
      this._items.reduce(
        (table, row) => (
          table.appendChild(
            row.reduce(
              (tr, col) => (tr.appendChild(document.createElement('td')).innerHTML = col, tr),
              document.createElement('tr')
            )
          ), table
        ),
        table
      )
    );
  }
};

const data = new JsonData("https://gist.githubusercontent.com/hikaMaeng/717dc66225e40a8fe8d1c40366d40957/raw/447d44b800ed98817b0d29681be90aa1ec36e4ac/71_1.json");

const infoPromise = data.getData();
infoPromise.then(info => {
  const renderer = new TableRenderer("#data");
  renderer.render(info);
});
</script>
</body>
</html>
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>CodeSpitz71-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 validItems = items.filter(
	(item) => (Array.isArray(item) && item.length === header.length)
	);

	this._private = {title, headers: header, items: validItems};
	}

	get title() { return this._private.title; }
	get headers() { return this._private.headers; }
	get items() { return this._private.items; }
	};

	const Data = class {
	async getData() {
	const json = await this._getData();
	return new Info(json);
	}

	async _getData() {
	throw "_getData() must be overriden."
	}
	};

	const JsonData = class extends Data {
	constructor(url) {
	super();
	this._url = url;
	}

	async _getData() {
	if (typeof this._url !== 'string') throw "url must be string";

	let json;
	const response = await fetch(this._url);

	if (!response.ok) throw "invalid response";

	json = await response.json();

	return json;
	}
	};

	const Renderer = class {
	async render(info) {
	if (!(info instanceof Info)) throw "data is NOT Info type";

	this._title = info.title;
	this._headers = info.headers;
	this._items = info.items;
	this._render();
	}

	_render() {
	throw "_render() must be overriden."
	}
	};

	const TableRenderer = class extends Renderer {
	constructor(parent) {
	if (typeof parent != 'string' \|\| !parent) {
	throw "invalid parent";
	}
	super();
	this._parent = parent;
	}

	_render() {
	const parent = document.querySelector(this._parent);
	if (!parent) throw "parent does NOT exist.";

	parent.innerHTML = "";
	const [table, caption] = "table,caption".split(',').map(v => document.createElement(v));

	caption.innerHTML = this._title;
	table.appendChild(caption);
	table.appendChild(
	this._headers.reduce(
	(thead, header) => (thead.appendChild(document.createElement('th')).innerHTML = header, thead),
	document.createElement('thead')
	)
	);
	parent.appendChild(
	this._items.reduce(
	(table, row) => (
	table.appendChild(
	row.reduce(
	(tr, col) => (tr.appendChild(document.createElement('td')).innerHTML = col, tr),
	document.createElement('tr')
	)
	), table
	),
	table
	)
	);
	}
	};

	const data = new JsonData("https://gist.githubusercontent.com/hikaMaeng/717dc66225e40a8fe8d1c40366d40957/raw/447d44b800ed98817b0d29681be90aa1ec36e4ac/71_1.json");

	const infoPromise = data.getData();
	infoPromise.then(info => {
	const renderer = new TableRenderer("#data");
	renderer.render(info);
	});
	</script>
	</body>
	</html>