jfh-main-profile-json [Jcink.com Wiki]

JFH: Main Profile JSON Variables

HTML Templates allow use of variables for your convenience to restructure the board layout. The main profile HTML template contains some variables that utilize JSON, or JavaScript Object Notation that allow you to build your own layout around the items. Examples and scripts will be provided below for each JSON variable.

Understanding JSON

To utilize these templates, we have provided copy and paste examples for you to help you to edit and make into your own template. However, to fully customize these you must have a basic understanding of how JSON works.

Let's start off with a very basic JSON array based on the comment example.

var comment = [{"comment_id":"745","avatar":"<img src='http:\/\/support.b1.jcink.com\/uploads\/support\/\/av-1.png' border='0' width='25' height='25' alt='' \/>","name":"<a href='?showuser=1'>John<\/a>","date":"10 minutes ago","message":"One more test comment.... ","options":"[  <a href=\"index.php?showuser=11446&ctab=3&deletecomment=745&auth_key=x\">Delete<\/a> ]"},{"comment_id":"744","avatar":"<img src='http:\/\/support.b1.jcink.com\/uploads\/support\/\/av-1.png' border='0' width='25' height='25' alt='' \/>","name":"<a href='?showuser=1'>John<\/a>","date":"11 minutes ago","message":"Another comment&#33; ","options":"[  <a href=\"index.php?showuser=11446&ctab=3&deletecomment=744&auth_key=x\">Delete<\/a> ]"},{"comment_id":"743","avatar":"<img src='http:\/\/support.b1.jcink.com\/uploads\/support\/\/av-1.png' border='0' width='25' height='25' alt='' \/>","name":"<a href='?showuser=1'>John<\/a>","date":"11 minutes ago","message":"Hello&#33; Testing comment&#33; ","options":"[  <a href=\"index.php?showuser=11446&ctab=3&deletecomment=743&auth_key=x\">Delete<\/a> ]"}];

Looks pretty crazy, doesn't it? It's easier to work with than you think. To start, there are 3 comments contained in this JSON array, which has been set to the variable “comment.” Each comment is between {} and separated by commas. This type of string is automatically generated by the system for you, so you're not going to have to worry about creating it yourself. But you do need to understand how to access the data within it.

In the above string, each comment has these attributes: comment_id, avatar, name, message, and options.

To access this information we can use something called a for loop:

<script>
var comment = <!-- |comments| -->;
for (var i = 0; i < comment.length; i++){
	document.write(comment[i].name + ": ");
        document.write(comment[i].message + "<br />");
}
</script>

The above script loops through each available comment, and prints the name and message attributes. If you wanted to print the date, you could modify the script like so:

<script>
var comment = <!-- |comments| -->;
for (var i = 0; i < comment.length; i++){
	document.write(comment[i].name + ": ");
        document.write(comment[i].message + "<br />");
        document.write(comment[i].date + "<br />");
}
</script>

Accessing a key in the JSON array is simply done by doing “dot” and then the name of the key you're trying to print. In this case, we printed the name, message, and date keys.

This is the basic idea behind the use of JSON. For an in-depth tutorial on JSON we recommend the W3schools JSON Intro: http://www.w3schools.com/js/js_json_intro.asp

Comments

The variable for the most recent comments made on the profile is <!– |comments| –>, and the output when parsed by the code below looks like this:

Recent Comments)

The complete code to display the above is provided here, copy and paste it into the Main Profile template:

<style>
.largeframe,.smallframe{text-align: center;padding:4px;margin-top:auto;margin-bottom:auto;width: 52px;height: 52px;background: transparent;float:right;}
.smallframe{width:27px;height:27px;margin-top: auto;margin-bottom: auto;float:right;}
</style>

<div id="profile-comments" class="tableborder" style="padding:1px; max-width: 200px;">
	<table width="100%" cellspacing="1" cellpadding="6">
	<tbody><tr><td class="maintitle" valign="top">Recent Comments</td></tr></tbody>
	</table>
	<script>
	function print_comment(row){
	document.write('<div class="row2"><div class="pformstrip"></div>');
	document.write('<div class="smallframe">'+row.avatar+'</div>');
	document.write('<strong>'+row.name+'</strong><br>');
	document.write('<div class="desc">'+row.message+' '+row.options+'<br>');
	document.write('<strong>'+row.date+'</strong>');
	document.write('</div></div>');
	}

	var comment = <!-- |comments| -->;
	for (var i = 0; i < comment.length; i++){
		print_comment(comment[i]);
	}
	</script>
	<div class="pformstrip">
	</div>
</div>

Visitors

 
jfh-main-profile-json.txt · Last modified: 2017/01/07 15:04 by jcink