Iterate through JSON property list

[RMWChaos]

Any JSON experts out there? I'd like to know if it is possible, and if so how, to iterate through a JSON property list so that each iteration selects the next value for each object. Here is an example list:

function myFunction()
{
    createDOM({
    'id'      :   ["formname", "inputname", "submitbutton"],
    'dom'     :   ["form", "input", "input"],
    'parent'  :   "content",
    'form'    :   [null, "formname", "formname"],
    'action'  :   [URI, null, null],
    'method'  :   ["post", null, null],
    'type'    :   [null, null, "submit"],
    'size'    :   [null, 6, null],
    'value'   :   [null, null, "Submit"],
    )};
};
 

Now what I want to do is iterate through this list 3 times, in each case selecting the next value for each object. So through each iteration, it will go through all the objects (id, dom, parent, etc.). On the first run it will select the first set of values for each object (formname, form, content, null, URI, etc.). On the second run, it will select the second set (inputname, input, content, formlogin, etc.) and so on. In the case of the 'parent' object, it will select 'content' on each run.

I know one way to do this, but it involves creating an array for each object's value list, like so:

function myFunction()
{
var A = new Array ("formname", "inputname", "submitbutton");
var B = new Array ("form", "input", "input");
var C = new Array(null, "formname", "formname");
var x = 0;
var D = A.length + x;
var E = B.length + x;
var F = C.length + x;
 
for (x <= 3; x >= 0; x++)
    {
    createDOM({
    'id'      :   D,
    'dom'     :   E,
    'parent'  :   F,
    )};
};
 

That would result in a long list of arrays and "array.leng th + x" vars. So I am hoping there is an easier way by working with the first example.

Thanks!

[gits]

Huh? :-\
If I understand you correctly, you mean that if the attribute does not exist, then I can modify the element on the fly, but if the attribute is null or 'undefined' I couldn't? Is that what you are saying?

I'm pretty sure that I can do "elemId.attribN ame = newValue" regardless of whether the attribute already exists or not, or whether it is set to null or 'undefined'. That's how my mouseHover() function works.

no ... it was an example for the input-box readonly-attrib locks the input and removing the attrib makes it editable (inputable) again. and with elemId.attribNa me = newValue you mix up two different things. you setting the javascript-property of an element with setAttribute('a ttribName', 'newValue'); you set the dom-attribute. setting the js-property effects the element directly ... and overwrites the setted attributes ... so sometimes it could be difficult to debug such things that mixes the two ways and it would be good practice to use only one-way the attibute OR the property way ...

kind regards

[RMWChaos]

...and with elemId.attribNa me = newValue you mix up two different things. you setting the javascript-property of an element with setAttribute('a ttribName', 'newValue'); you set the dom-attribute. setting the js-property effects the element directly ... and overwrites the setted attributes ... so sometimes it could be difficult to debug such things that mixes the two ways and it would be good practice to use only one-way the attibute OR the property way ...

Oh, right, you told me not to mix up the two variations before. So to clarify:

// This sets the javascript property
element[attribute] = value;
// or
element.attribute = value;
 
// And this sets the DOM-node attribute
element.setAttribute(attribute, "value");
 

Have I got it right? Can you tell me is there any advantage to using one method over the other? I realize that they do not operate in exactly the same way; so perhaps the answer is, "It depends on what you want to do." I don't know enough about the differences between the two methods to understand if one method suites my needs over the other. That will be my research project for today.

[gits]

hmmm ... you gave the answer already :) ... personally i would always use the attribute way since i consider it a dom operation and i would like to use dom-methods for this purpose ... but in IE you cannot set the onclick handler with set attribute for example ... but i wouldnt do that anyway ... since i would use a generalized event-handling with addEventListene r() and attachEvent() ... so as you can see one should make a choice ... and i think sometimes, when using some js-constructs (or not using them) you cannot avoid the mixing of the two ways ... but as i said ... in huge projects it could lead to strange things and then it could be difficult to debug by team-members that didn't know all the code ...

a solution for the mix-up-thing could be to create a util-method ... that centralizes the handling ... so that would be a typical framework-candidate :)

kind regards

[RMWChaos]

... but i wouldnt do that anyway ... since i would use a generalized event-handling with addEventListene r() and attachEvent() ...

Ok, I use addEvent() as well, but I have no idea how you mean to use it in this case. I'll post my code below.

...a solution for the mix-up-thing could be to create a util-method ... that centralizes the handling ... so that would be a typical framework-candidate.

Wha-? Now you're just showing off. ;-D I have no idea what a util-method is.

Here's my addEvent() code. How would I use this as you suggested?

if(Array.prototype.push == null)
 
    {
 
    Array.prototype.push = function()
 
        {
 
        for(var i = 0; i < arguments.length; i++)
 
            {
 
            this[this.length] = arguments[i];
 
            };
 
        return this.length;
 
        };
 
    };
 
function addEvent(obj, type, fn)
 
    {
 
    if (obj.addEventListener) // FireFox, NN, Mozilla, etc.
 
        {
 
        obj.addEventListener(type, fn, false);
 
        // bugzilla bug #241518
 
        EventCache.add(obj, type, fn);
 
        }
 
    else if (obj.attachEvent) // MSIE
 
        {
 
        var func = function()
 
            {
 
            fn.apply(window.event.srcElement);
 
            };
 
        obj.attachEvent("on" + type, func);
 
        EventCache.add(obj, type, func);
 
        }
 
    else if (typeof obj['on' + type] != 'function') // old
 
        {
 
        obj['on' + type] = fn;
 
        }
 
    else // really old
 
        {
 
        var oldonload = obj['on' + type];
 
        obj['on' + type] = function()
 
            {
 
            oldonload();
 
            fn();
 
            };
 
        };
 
    };
 
 
function removeEvent(obj, type, fn)
 
    {
 
    EventCache.remove(obj, type, fn);
 
    };
 
 
var EventCache = function()
 
    {
 
    var listEvents = [];
 
    return {
 
        listEvents : listEvents,
 
        add : function(node, sEventName, fHandler)
 
            {
 
            listEvents.push(arguments);
 
            },
 
        remove : function(node, sEventName, fHandler)
 
            {
 
            var i, item;
 
            for(i = listEvents.length - 1; i >= 0; i = i - 1)
 
                {
 
                if(node == listEvents[i][0] && sEventName == listEvents[i][1] && fHandler == listEvents[i][2])
 
                    {
 
                    item = listEvents[i];
 
                    if(item[0].removeEventListener)
 
                        {
 
                        item[0].removeEventListener(item[1], item[2], item[3]);
 
                        };
 
                    if(item[1].substring(0, 2) != "on")
 
                        {
 
                        item[1] = "on" + item[1];
 
                        };
 
                    if(item[0].detachEvent)
 
                        {
 
                        item[0].detachEvent(item[1], item[0][sEventName+fHandler]);
 
                        };
 
                    item[0][item[1]] = null;
 
                    };
 
                };
 
            },
 
        flush : function()
 
            {
 
            var i, item;
 
            for(i = listEvents.length - 1; i >= 0; i = i - 1)
 
                {
 
                item = listEvents[i];
 
                if(item[0].removeEventListener)
 
                    {
 
                    item[0].removeEventListener(item[1], item[2], item[3]);
 
                    };
 
                if(item[1].substring(0, 2) != "on")
 
                    {
 
                    item[1] = "on" + item[1];
 
                    };
 
                if(item[0].detachEvent)
 
                    {
 
                    item[0].detachEvent(item[1], item[2]);
 
                    };
 
                item[0][item[1]] = null;
 
                };
 
            }
 
        };
 
    }();
 
 
/* *******************************************
   **           Initialize Events           **
   ******************************************* */
 
function loadScripts()
 
    {
 
    loadScript('../scripts/DOMLoader.js');
 
    loadScript('../scripts/XHRLoader.js');
 
    loadScript('../scripts/FADELoader.js');
 
    loadScript('../scripts/LOGINLoader.js');
 
    loadScript('../scripts/NAVLoader.js');
 
    };
 
addEvent(window, 'load', loadScripts);
 
addEvent(window, 'reset', loadScripts);
 
addEvent(window, 'unload', EventCache.flush);
 
addEvent(window, 'reset', EventCache.flush);
 

[gits]

hi ...

i'm sorry for confusing you ... was a little bit late yesterday :) ... let me explain it a little bit more clearly:

when you have to mix the property and attribute way for some reason ... you should centralize the handling of setting the value with a custom method like the following (and i use the onclick only for demonstration now ... you use the better attachEvent() - handling already ... but if you need to set a property because the attibute doesn't work as you expect then you may replace it or extend the exception list ... ok?) its only a general discussion ... and may be it is of some help for you or others that read the thread:

/** 
 * the util-method is a simple method that encapsulates the
 * setAttribute() and property-setting - i simply call it set_node_attrib 
 * @param docroot the document
 * @param id node-id
 * @param attr_state true when we wnat to set the value
 * explicitly, false when we want to remove it
 * @param attr the attribute-name
 * @param the value to set 
 */
function set_node_attr(docroot, id, attr_state, attr, value) {
    var node = docroot.getElementById(id);
    var exceptions = { onclick: 1 };
 
    if (attr in exceptions) {
        _set_node_prop(node, attr, value);
    } else  if (attr_state) {
        node.setAttribute(attr, value);
    } else {
        node.removeAttribute(attr);
    }
}
 
/**
 * @private
 */
function _set_node_prop(node, attr, value) {
    node[attr] = value;
}

and now we should always use the set_node_attr() ; method and we always know where the attribs and properties are controlled ... ok?

kind regards

[RMWChaos]

Ok, took me a few times reading through your code to fully understand it, but I get it now. So basically, you create an exception list for attributes that are problematic or don't add the same in all browsers. If the attribute is in the exception list, it calls _set_node_prop( ), which uses the javascript node[attr] = value method. If the attrib is not in the exception list, it uses the DOM node.setAttribu te(attr, value) method. Makes sense now.

But why a separate function for exceptions rather than this:

function set_node_attr(docroot, id, attr_state, attr, value)
    {
    var node = docroot.getElementById(id);
    var exceptions =
        {
        onclick: 1
        };
 
    if (attr in exceptions)
        {
        node[attr] = value;
        }
    else  if (attr_state)
        {
        node.setAttribute(attr, value);
        }
    else
        {
        node.removeAttribute(attr);
        };
    };
 

And how would you remove a attr in the exceptions list? Set value to null?

As for using attachEvent(), I think your example here helped me understand better the addEvent() code I posted (obviously, I didn't write it). I could, for instance, do this:

addEvent(document.getElementById('image"), "click", someFunction);
 

[gits]

hi ...

yes ... that is what i thought :) ... two things:

first: i used a seperate function because it could be that we might have to use a much more complex handling of some properties ... so that the code would be more modular and we could handle the changes a bit better, or we later could have the need to call the property-setter seperatly from another function ... so i always prefer to use a seperate function for a seperate task ...

second: to remove a property from the exeption list we have to remove it ... a better way in huge projects would be to use a constant for the list that is defined in a seperate js-file ... so that we may find that very easy and could adapt the list ... setting the value to 0 wouldn't help, since we actually check with the in operator and that simply checks for the existence in the list ...

kind reagards

[RMWChaos]

Why this in your code?

/**
* @private
*/

[RMWChaos]

gits,

This is the code I ended up going with in my createDOM() function to address problems adding certain attributes in different browsers:

for (index in attrib)
     {
     var exceptions = ({
          'onclick'     :   1,
          'onmouseover' :   1,
          'onmouseout'  :   1
          });
     if (index in exceptions)
          {
          createElem[index] = attrib[index];
          }
     else
          {
          createElem.setAttribute(index, attrib[index]);
          };
     };
 

I understand why you suggested making the exception code a seperate function, but for my purposes, this will work fine.

I do have one other question, however. You have the exceptions in a JSON list, so I copied what you did, but is that necessary? Why not just:

var exceptions = new Array ("onclick", "onmouseover", "onmouseout");
 

There is no data to hold here; so I guess I am missing the point of a JSON property list.

Thanks!

[gits]

Why this in your code?

/**
* @private
*/

that's for marking, that you shouldn't use that method seperatly ... only set_node_attr() ; should be used in the code. the reason for that is, that you later on simply may change the functions without changing the code in different places, and so centralizes the attrib/property setting ion one place ...

kind regards