bagbag/index.html

## index.html
<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>MediathekViewWeb API</title>

		<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
	</head>

	<script>
		let query = {
		  queries:[
			{
			  fields:[
				'title',
				'topic'
			  ],
			  query:'sturm der liebe'
			},
			{
			  fields:[
				'channel'
			  ],
			  query:'ndr'
			}
		  ],
		  sortBy:'timestamp',
		  sortOrder:'desc',
		  future:false,
		  offset:0,
		  size:10
		}

		let queryString = JSON.stringify(query);

		let request = new XMLHttpRequest();
		let requestURL = 'https://mediathekviewweb.de/api/query';
		request.open("POST", requestURL);

		request.addEventListener('load', function(event) {
			let response;
			try {
				response = JSON.parse(request.responseText);
			} catch (e) { }
			if (request.status == 200 && typeof response != 'undefined') {
				for (let i = 0; i < response.result.results.length; i++) {
					let entry = response.result.results[i];
					let row = $('<tr>');
					row.append($('<td>').text(entry.channel));
					row.append($('<td>').text(entry.topic));
					row.append($('<td>').text(entry.title));
					row.append($('<td>').text(entry.description));
					row.append($('<td>').text(entry.url_video));
					$('#mediathek > tbody').append(row);
				}

				$('#responseText').text(JSON.stringify(response, null, 2));
			} else {
				if (response) {
					console.log(response.err);

					$('#errorText').html(response.err.join('</br>'));
				}
				else {
					$('#errorText').html(request.statusText + '</br>' + request.responseText);
				}
			}
		});
		request.send(queryString);
	</script>

	<style>
		table, th, td {
			border: 1px solid black;
			border-collapse: collapse;
		}

		th, td {
			padding: 5px;
		}

		th {
			text-align: left;
		}
	</style>

	<body>

	<table id="mediathek" class="table table-striped table-hover">
		<thead>
			<tr>
				<th>Sender</th>
				<th>Thema</th>
				<th>Titel</th>
				<th>Beschreibung</th>
				<th>URL</th>
			</tr>
		</thead>
		<tbody>
		</tbody>
	</table>

	<p id="errorText"></p>
	</br>
	<p id="responseText" style="white-space:pre-wrap;"></p>

	</body>
</html>
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>MediathekViewWeb API</title>

	<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
	</head>

	<script>
	let query = {
	queries:[
	{
	fields:[
	'title',
	'topic'
	],
	query:'sturm der liebe'
	},
	{
	fields:[
	'channel'
	],
	query:'ndr'
	}
	],
	sortBy:'timestamp',
	sortOrder:'desc',
	future:false,
	offset:0,
	size:10
	}

	let queryString = JSON.stringify(query);

	let request = new XMLHttpRequest();
	let requestURL = 'https://mediathekviewweb.de/api/query';
	request.open("POST", requestURL);

	request.addEventListener('load', function(event) {
	let response;
	try {
	response = JSON.parse(request.responseText);
	} catch (e) { }
	if (request.status == 200 && typeof response != 'undefined') {
	for (let i = 0; i < response.result.results.length; i++) {
	let entry = response.result.results[i];
	let row = $('<tr>');
	row.append($('<td>').text(entry.channel));
	row.append($('<td>').text(entry.topic));
	row.append($('<td>').text(entry.title));
	row.append($('<td>').text(entry.description));
	row.append($('<td>').text(entry.url_video));
	$('#mediathek > tbody').append(row);
	}

	$('#responseText').text(JSON.stringify(response, null, 2));
	} else {
	if (response) {
	console.log(response.err);

	$('#errorText').html(response.err.join('</br>'));
	}
	else {
	$('#errorText').html(request.statusText + '</br>' + request.responseText);
	}
	}
	});
	request.send(queryString);
	</script>

	<style>
	table, th, td {
	border: 1px solid black;
	border-collapse: collapse;
	}

	th, td {
	padding: 5px;
	}

	th {
	text-align: left;
	}
	</style>

	<body>

	<table id="mediathek" class="table table-striped table-hover">
	<thead>
	<tr>
	<th>Sender</th>
	<th>Thema</th>
	<th>Titel</th>
	<th>Beschreibung</th>
	<th>URL</th>
	</tr>
	</thead>
	<tbody>
	</tbody>
	</table>

	<p id="errorText"></p>
	</br>
	<p id="responseText" style="white-space:pre-wrap;"></p>

	</body>
	</html>