examples/getCategories/javascript.html

<html>
<head><title>WikiTree API | getCategories</title></head>
<body>

<!-- Use a GitHub Markdown style -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/4.0.0/github-markdown.min.css" integrity="sha512-Oy18vBnbSJkXTndr2n6lDMO5NN31UljR8e/ICzVPrGpSud4Gkckb8yUpqhKuUNoE+o9gAb4O/rAxxw1ojyUVzg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="../examples.css" />

<!-- We'll use jQuery to make the Ajax calls easier. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- Use a JSON formatter to show the raw result -->
<script src="../json-formatter.js"></script>


<article class="markdown-body">
	<h1> getCategories </h1>

	<p>
		Retrieve the categories connected to a profile.
		The "key" for getCategories is a WikiTree ID (e.g., Shoshone-1), Free Space Title (e.g., Space:Cemetery_Pages), or a User/Person Id (e.g. 30030890).
		<table>
		<tr><td>Key:</td><td><input type="text" id="key" name="key" value="Shoshone-1" size="20"></td></tr>
		<tr><td colspan=3>
			<button onClick="getCategories()">Get Connected Categories</button>
			<button onClick="clearResults()">Clear Results</button>
		</td></tr>
		</table>
	</p>

	<h2>JSON Results</h2>
	<blockquote id="json"></blockquote>
</article>


<script>

// When the "Get Categories" button is clicked, we execute this function.
function getCategories() {
	// The parameters we want are in our input elements.
	var key = $('#key').val();

	// The POST is asynchronous, so we have to wait for it to return before we have any profile data to work with.
	// We pass in the action and parameters we're sending to the API.
	// getCategories just needs a "key" which can be a WikiTree ID or "User" Id.
	postToAPI( { 'action': 'getCategories', 'appId': 'APIExamples', 'key': key } )
	.done(function(result) { renderResults(result); })
	.fail(function(error) {
		console.log(error);
		$('#result').html("WikiTree API Error: "+error);
		$('#json').html('');
	});
}

// Put the JSON result into our display div.
function renderResults(result) {
	$('#json').html("<pre>"+FormatJSON(result)+"</pre>");
}

// Use jQuery's .ajax method to query the WikiTree API for some content.
function postToAPI(postData) {
	var ajax = $.ajax({
		// The WikiTree API endpoint
		'url': 'https://api.wikitree.com/api.php',
	
		// We tell the browser to send any cookie credentials we might have (in case we authenticated).
		'xhrFields': { withCredentials: true },

		// Doesn't help. Not required from (dev|apps).wikitree.com and api.wikitree.com disallows cross-origin:*
		//'crossDomain': true,

		// We're POSTing the data so we don't worry about URL size limits and want JSON back.
		type: 'POST',
		dataType: 'json',
		data: postData
	});

	return ajax;
}

function clearResults() {
	$('#result').html('');
	$('#json').html('');
}

</script>
</body>
</html>