<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Emad Alashi&#039;s Blog &#187; json</title>
	<atom:link href="http://www.emadashi.com/index.php/tag/json/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.emadashi.com</link>
	<description></description>
	<lastBuildDate>Sun, 15 Jan 2012 10:05:42 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Happy Life with Intuitive API in Smart Controls</title>
		<link>http://www.emadashi.com/index.php/2010/06/happy-life-with-intuitive-api-in-smart-controls/</link>
		<comments>http://www.emadashi.com/index.php/2010/06/happy-life-with-intuitive-api-in-smart-controls/#comments</comments>
		<pubDate>Tue, 15 Jun 2010 14:42:23 +0000</pubDate>
		<dc:creator>Emad Alashi</dc:creator>
				<category><![CDATA[Development]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[json]]></category>
		<category><![CDATA[jstree]]></category>

		<guid isPermaLink="false">http://www.emadashi.com/index.php/2010/06/happy-life-with-intuitive-api-in-smart-controls/</guid>
		<description><![CDATA[In this post I will show you an example of how smartly built controls and API’s can make the developers programming life extremely enjoyable, hopefully this example will urge you in giving such a smart effort when you build your own control or API.
Lately I have been playing around with a very nice tree control [...]]]></description>
			<content:encoded><![CDATA[<p>In this post I will show you an example of how smartly built controls and API’s can make the developers programming life extremely enjoyable, hopefully this example will urge you in giving such a smart effort when you build your own control or API.</p>
<p>Lately I have been playing around with a very nice tree control based on jQuery called <a href="http://www.jstree.com/">jsTree</a>. One of the nice features is that it allows populating the tree through asynchronous calls with JSON data representation. In order to achieve that, you needed to provide the data by JSON special format suitable to the tree. This format, regrettably, is open to the JSON vulnerability <a href="http://haacked.com/">Phil Haack</a> talked about in his two posts <a href="http://haacked.com/archive/2008/11/20/anatomy-of-a-subtle-json-vulnerability.aspx">here</a> and <a href="http://haacked.com/archive/2009/06/25/json-hijacking.aspx">here</a>.     <br />So to avoid this vulnerability I had to change this default data format of the tree, at least until the very end of the data flow just before the tree populates the data, only then I can change it back to the default format, like the following:</p>
<p>The format I need to send from server to avoid the vulnerability, but the tree wouldn’t understand:</p>
<p>&#160;<em>{ &quot;d&quot; : [ { attributes : { id : &quot;2&quot;, balance : &quot;0.00000&quot; },&#160; data : &quot;Child&quot;,&#160; state : &quot;closed&quot; }&#160; , { attributes : { id : &quot;3&quot;, balance : &quot;0.00000&quot; },&#160; data : &quot;AnotherChild&quot;,&#160; state : &quot;closed&quot; }&#160; ] }</em></p>
<p>The format the tree accepts, to which I should change back before populating: </p>
<p><em>[ { attributes : { id : &quot;2&quot;, balance : &quot;0.00000&quot; },&#160; data : &quot;Child&quot;,&#160; state : &quot;closed&quot; }&#160; , { attributes : { id : &quot;3&quot;, balance : &quot;0.00000&quot; },&#160; data : &quot;AnotherChild&quot;,&#160; state : &quot;closed&quot; }&#160; ] </em></p>
<p>That would not have been possible if the tree control wasn’t smart enough to provide the developer with the <strong>“ondata”</strong> event (line 45) that happens exactly before the binding to the tree, in which you can manipulate the data; in my case I am eliciting the data out by returning the “content” of the wrapper object “d” rather than the whole thing.</p>
<div style="font-family: consolas; background: white; color: black; font-size: 10pt">
<p style="margin: 0px"><span style="color: #2b91af">&#160;&#160; 31</span>&#160;<span style="color: blue">&lt;</span><span style="color: maroon">script</span> <span style="color: red">type</span><span style="color: blue">=&quot;text/javascript&quot;&gt;</span></p>
<p style="margin: 0px"><span style="color: #2b91af">&#160;&#160; 32</span>&#160;&#160;&#160;&#160; <span style="color: blue">var</span> initialData = <span style="background: yellow">&lt;%</span><span style="color: blue">=</span> ViewData[<span style="color: maroon">&quot;InitialList&quot;</span>].ToString() <span style="background: yellow">%&gt;</span></p>
<p style="margin: 0px"><span style="color: #2b91af">&#160;&#160; 33</span> $(<span style="color: blue">function</span> () {</p>
<p style="margin: 0px"><span style="color: #2b91af">&#160;&#160; 34</span>&#160;&#160;&#160;&#160; $(<span style="color: maroon">&quot;#MyTree&quot;</span>).tree({</p>
<p style="margin: 0px"><span style="color: #2b91af">&#160;&#160; 35</span>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; data : {</p>
<p style="margin: 0px"><span style="color: #2b91af">&#160;&#160; 36</span>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; type : <span style="color: maroon">&quot;json&quot;</span>,</p>
<p style="margin: 0px"><span style="color: #2b91af">&#160;&#160; 37</span>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; async : <span style="color: blue">true</span>,</p>
<p style="margin: 0px"><span style="color: #2b91af">&#160;&#160; 38</span>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; opts : {</p>
<p style="margin: 0px"><span style="color: #2b91af">&#160;&#160; 39</span>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; async : <span style="color: blue">true</span>,</p>
<p style="margin: 0px"><span style="color: #2b91af">&#160;&#160; 40</span>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; method : <span style="color: maroon">&quot;GET&quot;</span>,</p>
<p style="margin: 0px"><span style="color: #2b91af">&#160;&#160; 41</span>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; url : <span style="color: maroon">&quot;GetNodesOfParent&quot;</span></p>
<p style="margin: 0px"><span style="color: #2b91af">&#160;&#160; 42</span>&#160;</p>
<p style="margin: 0px"><span style="color: #2b91af">&#160;&#160; 43</span>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; }</p>
<p style="margin: 0px"><span style="color: #2b91af">&#160;&#160; 44</span>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; },</p>
<p style="margin: 0px"><span style="color: #2b91af">&#160;&#160; 45</span>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; ondata: <span style="color: blue">function</span> (data, tree_obj) {</p>
<p style="margin: 0px"><span style="color: #2b91af">&#160;&#160; 51</span>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: blue">return</span> data.d;</p>
<p style="margin: 0px"><span style="color: #2b91af">&#160;&#160; 52</span>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; },…..</p>
</p></div>
<p>Such flexibility and clean structure in controls and API’s is one of the very important aspects a control-developer should keep in mind.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.emadashi.com/index.php/2010/06/happy-life-with-intuitive-api-in-smart-controls/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

