I managed to find a very easy solution...I wrote some extensions on the native
javascript Object and Array and put that file in the flowscript folder. So
whenever Cocoon is started, the flowscript folder is scanned and all my objects
inherit the extensions automatically.
Some extension functions I wrote:
/**
* Extension function on Native Javascript Array which calls a function f with
(@param index, @param object) for all objects in the array.
*/
Array.prototype.forEach = function(f) {
for (var i=0; i < this.length; i++) {
f(i, this[i]);
}
}
/**
* Extension function on Native Javascript Object which calls a function f with
(@param key, @param value) for all 'own' properties.
*/
Object.prototype.forEach = function(f) {
var that = this;
this.keys().forEach(
function(index, key) {
f(key, that[key]);
}
)
}
/**
* Extension function on Native Javascript Object which returns an array of
keys for all 'own' properties
*/
Object.prototype.keys = function() {
var keys = [];
for (var key in this) {
if (this.hasOwnProperty(key)) {
keys.push(key);
}
}
return keys;
}
/**
* Extension function on Native Javascript Object which returns an array of
values for all 'own' properties.
*/
Object.prototype.values = function() {
var values = [];
var that = this;
this.keys().forEach(
function(index, key) {
values.push(that[key]);
}
)
return values;
}
So now I can do following in my jx-template:
<jx:forEach var="topic" items="${data.topics}">
<Topic id="${topic.id}">
<jx:forEach var="key" items="${topic.keys()}">
<jx:attribute name="${key}" value="${topic[key]}"/>
</jx:forEach>
</Topic>
</jx:forEach>
</Topics>
Works like a charm ;-)
Kind regards,
Robby Pelssers
From: Robby Pelssers [mailto:[email protected]]
Sent: Tuesday, December 15, 2009 12:22 PM
To: [email protected]
Subject: how-to iterate over attributes of javascript object within template
block
Hi all,
I know i'm kinda pushing it by what I'm trying to accomplish here but it would
be cool if it would work.
Suppose I have following objects defined in my flowscript:
var topics = [
{
"title": "Product profile",
"id": "product_profile"
},
{
"title": "Pinning information",
"id": "pinning_information",
},
{
"title": "Limiting values",
"id": "limiting_values",
"type": "parametric",
}
];
What I would like to generate is something like:
<Topics>
<Topic id="product_profile" title="Product profile"/>
<Topic id="pinning_information" title="Pinning information"/>
<Topic id="limiting_values" title="Limiting values" type="parametric"/>
</Topics
So written in pseudo-code:
Iterate over all topics and generate a <topic> with it's corresponding
attributes. The only thing I don't know is if the forEach iterator also can
handle something like we can do to iterate over all keys of an object and then
retrieving the value.
for (var key in object) {
someFunction(key, object[key]);
}
<Topics>
<jx:forEach var="topic" items="${data.topics}">
<Topic>
<!--
<jx:forEach var="attribute" items="${topic}">
<jx:attribute name="${attribute}" value="${topic[attribute]}"/>
à this does not work because the @items does not seem to be able to handle the
wanted behaviour in case we don't pass on a collection but a javascript object.
In that case default behaviour should be in my opinion to iterate over the
keys of the object.
</jx:forEach>
-->
</Topic>
</jx:forEach>
</Topics>
What do you guys think?
Kind regards,
Robby
