a note for jsonview

[jbowman]

I imagine this applies to the JSONDataModel actually.

I decided to start playing with JsonView to see if I could use it for templating, even just single instances. It works great. However, there is one thing I struggled with for a bit, and that's the format of the JSON returned. The elements you are trying to turn have to be arrays, even if it's a single instance.

For example, say you have the following code.


var dh = YAHOO.ext.DomHelper;
dh.append(document.body, {tag: 'div', id: 'editUserDialog-user'});

var tpl = new YAHOO.ext.Template('<div>Username: {username}</div>' +
'<div>Birthday: {birthday}</div>' +
'<div>Member Since: {join_date}</div>' +
'<div>Last Login: {last_login}</div>');
tpl.compile();
var mainView = new YAHOO.ext.JsonView('editUserDialog-user',
tpl, {jsonRoot: 'user'});
mainView.load("show_user.php", "id=" + id);



You might think that
{"user": {"username": "Bob", "birthday": "1976-11-08", "join_date": "2006-08-01", "last_login": "2006-12-03"}}
Would be a perfectly valid JSON response to your load to display within the template. Nope, it won't work.

The correct format for your JSON would be:
{"user": [{"username": "Bob", "birthday": "1976-11-08", "join_date": "2006-08-01", "last_login": "2006-12-03"}]}

Note the brackets to declare the user data is actually an array of user data. This is required to get the view to actually render based off of the data model.

Really, it makes perfect sense when you stop and think about what the purpose of a datamodel is for. However, since I struggled with this for a little bit, I didn't think it was too far out of reach others might also. So, here's the example and an explanation.

[brian.moeskau]

Thanks for posting it. I haven't run into it personally, but I appreciate the proactive help ;)

[jack.slocum]

Nice post. I'm sure you will save some folks some headaches. :)

[Choleriker]

Hey i struggeled at this point too! Thank you!

[Slapyo]

I am using the JSON package found here: http://mike.teczno.com/JSON/JSON.phps and it doesn't return the appropriate string with the [ and ] around the array of data being returned.

<php>
$value = array("params" =>
array("test" => "test", "int1" => 100, "int2" => 100));
$output = $json->encode($value);

echo $output;
?>

OUTPUT
{"params":{"test":"test","int1":100,"int2":100}}

Also, I am stuck on how to return multiple arrays, when I try to return multiple arrays, it doesn't return what I am looking for, it returns something like this.

{"params":{"test":"test","int1":100,"int2":100},"0":{"test":"test","int1":100,"int2":100}}

FIXED
<?php
require_once('json.php');
require_once('header_nocache.php');

$json = new Services_JSON();

$value = array("params" =>
array(
array("test" => "test", "int1" => 100, "int2" => 100),
array("test" => "test", "int1" => 100, "int2" => 100)));
$output = $json->encode($value);

echo $output;
?>

OUPUT
{"params":[{"url":"test","height":100,"width":100},{"url":"test","height":100,"width":100}]}

[jbowman]

yea I ran into that, I just do things like this


$my_array[0] = array("test" => "test", "int1" => 100, "int2" => 100));


and then would json_encode($my_array);

You're going to have to wrap the associative arrays inside arrays, because that's what the JsonView is expecting. Remember, the original concept is built around the JSONDataModel, which was implemented to expect rows of data.

So, even if you're really only returning one set of data back to the javascript, it's expecting it to be formated for the possibility of multiple sets. Sometimes I have trouble expressing exactly what I mean, so I hope that makes sense.

[jack.slocum]

JsonView expects multiple objects (the array) mainly because if you don't have multiple objects, you should probably just use a template anyway. Make sense?

By the way, I just did a really nice commit on JsonView. I added some cool new features that I implemented manually in a new example (Image Chooser component) and then decided to integrate into JsonView. There's also some new events.

It's all undocumented but in a nutshell it allows filtering and sorting of the json data and it maintains a "snapshot" of the raw data for clearing filters.

The example component is pretty nice and was needed for the official .33 release (gotta have one cool example right?). When I get the code documented, I think it's officially time for the .33 release. :D