Skip to content

Instantly share code, notes, and snippets.

@bagbag

bagbag/index.html

Last active Sep 8, 2021
Star
Embed
What would you like to do?
Learn more about clone URLs
Download ZIP
MediathekViewWeb API Samplecode
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>MediathekViewWeb API</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<script>
const query = {
queries: [
{
fields: ['title', 'topic'],
query: 'sturm der liebe'
},
{
fields: ['channel'],
query: 'ndr'
}
],
sortBy: 'timestamp',
sortOrder: 'desc',
future: false,
offset: 0,
size: 10,
duration_min: 20,
duration_max: 100
};
const queryString = JSON.stringify(query);
const request = new XMLHttpRequest();
const 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>
@PapeCoding

This comment has been minimized.

Sign in to view
Copy link

@PapeCoding PapeCoding commented Aug 31, 2020

For everyone using JQuery for the whole code, this code example might be useful:

$.post({
	url: 'https://mediathekviewweb.de/api/query',
	type: 'POST',
	data: JSON.stringify(query),
	contentType: 'text/plain',
	success: function (data) {
		// ... Do something with data.result.results ...
	}
});

Note the contentType: 'text/plain', which has to be sent to avoid an Unexpected token o in JSON at position 1 - error
@axaneco

This comment has been minimized.

Sign in to view
Copy link

@axaneco axaneco commented Aug 22, 2021 •
edited

For everyone using PHP, this is a working sample code that produces the same result as the index.html above:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>MediathekViewWeb API</title>
    </head>
    <style>
        table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
        }

        th, td {
            padding: 5px;
        }

        th {
            text-align: left;
        }
    </style>
    <body>
        <?php
        $api_url = 'https://mediathekviewweb.de/api/query';

        function callmvapi($api_url, $query) {
            $ch = curl_init($api_url);
            curl_setopt_array($ch, array(
                CURLOPT_POST => 1,
                CURLOPT_POSTFIELDS => $query,
                CURLOPT_HTTPHEADER => array('User-Agent: ax mvclient 0.1.1', 'Content-Type: text/plain'),
                CURLOPT_RETURNTRANSFER => 1
            ));
            $result = curl_exec($ch);
            curl_close($ch);
            return $result;
        }

        $query = '{"queries":[{"fields":["title","topic"],"query":"sturm der liebe"},'
                . '{"fields":["channel"],"query":"ndr"}],"sortBy":"timestamp","sortOrder":"desc",'
                . '"future":"false","offset":"0","size":"10"}';

        $result = callmvapi($api_url, $query);
        $array = json_decode($result, true);
        ?>

        <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>
                <?php
                foreach ($array['result']['results'] as $entry) {
                    echo '<tr>';
                    echo '<td>' . $entry['channel'] . '</td>';
                    echo '<td>' . $entry['topic'] . '</td>';
                    echo '<td>' . $entry['title'] . '</td>';
                    echo '<td>' . $entry['description'] . '</td>';
                    echo '<td>' . $entry['url_video'] . '</td>';
                    echo '</tr>';
                }
                ?>  
            </tbody>
        </table>

        <?php
        echo '<pre>';
        echo nl2br(json_encode(json_decode($result), JSON_PRETTY_PRINT));
        echo '</pre>';
        ?>
    </body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment