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]

hi ...

i hope i don't misunderstand your question ... have a look at the following example:

var data = {
    '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"]
};
 
for (var i = 0; i < 3; i++) {
    // array for demonstrating the selection
    var arr = [];
 
    for (var j in data) {
        var prop = data[j];
 
        // the 'parent'-property case ... is handled for a
        // property that is not an array or object
        if (typeof prop != 'object') {
            arr.push(prop);
        } else {
            arr.push(prop[i]);
        }
    }
 
    // alert the demo array
    alert('[' + arr + '] :: length = ' + arr.length);
}
 

kind regards

ps: note that i made URI to a string (for testing purposes) and you had a syntax error in your original post in line 13 ... the brackets have to be switched :)

[RMWChaos]

Hey again, gits!

Ok, I am trying to understand your code here. Do you recall my post from a couple days ago, the one you replied to with that mass of code to go through (dom attributes vs. javascript attributes)?

Hover Scripts Work in FF & NN, but not IE

Well, createDOM is a function that creates a DOM element (or elements in this case) using the values from a JSON property list; so my goal is basically to take several property lists like this:

createDOM ({
  'id'     :    "idname1",
  'dom'    :    "domtype1",
  'parent' :    "parentname"
  });
 
createDOM ({
  'id'     :    "idname2",
  'dom'    :    "domtype2",
  'parent' :    "parentname"
  });
 

...and turn it into a single list like this:

createDOM ({
  'id'     :    ["idname", "idname2"],
  'dom'    :    ["domtype", "domtype2"],
  'parent' :    "parentname"
  });
 

So all I need to know at this point is how to iterate through the list using the next value for each object every loop. Does that clarify my original question?

My second example in my original post does accomplish this goal, but it's not very graceful. Maybe it's something like createDOM.id[0] and [1] in the example above, or perhaps attrib.id[0] access the first value of the first property using my createDOM script.

So if that is the case, I can modify my createDOM script to do a "while attrib.id has child nodes", or if that doesn't work a check for attrib.id[x] using for (x >= 0; x < attrib.index[0].length; x++). Hm, that might work.

[gits]

hi ...

lets have a closer look at my example and adapt it slightly to match your needs:

var your_data = {
    '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"]
};
 
function createDOMfromList(data) {
    for (var i = 0; i < 3; i++) {
        var obj = {};
 
        for (var j in data) {
            var prop = data[j];
 
            obj[j] = prop instanceof Array ? prop[i] : prop;
        }
 
        createDOM(obj);
    }
}
 
function createDOM(obj) {
    alert(obj.toSource());
}
 
createDOMfromList(your_data);
 

as you can see ... its easy to use for your purpose, we create a new function that receives the list and calls you current method ... test it in FF because the toSource() won't work in IE ... but its only for demo of the createDOM() call :)

kind regards

[RMWChaos]

Ok, I think I got it now.

So to modify this a bit, I could recode my createDOM script to include this:

function createDOMfromList(data)
    {
    // because 'id' is required in my createDOM script, it determines
    // the total number of values (DOM elements) to create; so instead
    // of i < #, I can do this:
    for (var i = 0; i < data[id].length; i++)
        {
        var obj = {};
        for (var j in data)
            {
            var prop = data[j];
            obj[j] = prop instanceof Array ? prop[i] : prop;
            };
            createDOM(obj);
       };
   };
 

And then my property lists change to this:

createDOMfromList({
    'id'      :   ["formname", "inputname", "submitbutton"],
    'dom'     :   ["form", "input", "input"],
    'parent'  :   "content",
    etc...
    });
 

It adds an extra function, which is not really a problem, but I wonder if I can integrate the two into one? Anyway, I will try out what you have given me and work from there.

Thanks again!



[thinking out loud]
//no need to respond to this next part...just a reminder to myself

I also need to test to see what type of behavior to expect if there is a mismatch in the number of members in each value list. So if 'id' had 3 members, but 'parent' had only 2 members, what would be the result? In this case, my createDOM script has a default value for 'dom' and 'parent'; so I am pretty sure what the result would be there, but what if there were no default value, such as 'name' or 'type'. Would it error out, use the last value member repeatedly, use null?

And is it better to use null as a spaceholder for empty values, or "", or nothing at all, just back-to-back commas to separate empty values (i.e. [value1,,value3, ,,value6]). Guess I will find out.

[/thinking out loud]

[gits]

good luck with it ... :)

btw: in case you refer to an nonexistent element in an array you will get it as 'undefined' ... so you could use the following check to set a default value in such a case:

if (typeof value == 'undefined') {
    value = null;
}

kind regards

[RMWChaos]

...you could use the following check to set a default value in such a case:

if (typeof value == 'undefined')
    {
    value = null;
    };
 

The problem with that is I already use this code:

for (var index in defaultAttribs)
    {
    if(typeof attrib[index] == 'undefined')
        {
        attrib[index] = defaultAttribs[index];
        };
    };
 

And I set defaultAttribs in a seperate JSON property list. I would rather the code simply ignore 'undefined' values that do not have a default, and not even include them in the DOM creation process. I'll think on that a while. It shouldn't matter whether the attribute is 'undefined' or null should it? It won't affect the element in any way, I don't think. I guess I could just leave it alone; I haven't seen any issues with it so far.

[gits]

you are right in case i understand it right that you don't create an attribute when there is no value for it ... otherwise it could be a problem with attributes that are such ones that only have to be present like:

[HTML]<input type="text" name="test" readonly="whate ver_value"/>[/HTML]
so in such a case it would matter when simply creating the readonly attribute (with null or undefined or even whatever_value) because the browser simply checks for its existence ... so make the element editable the attribute mustn't exist ... so in case you handle it the 'leave-it-out-way' you wouldn't encounter problems with that ... otherwise it could be a problem ... :)

[RMWChaos]

you are right in case i understand it right that you don't create an attribute when there is no value for it...

Correct, if the attribute does not exist in the either the attrib or defaultAttribs list, then it will not be created at all. So that is not an issue when I am working with a single value for each object. However, when I am setting multiple values for each object, many of them will be null or 'undefined' unless I am creating the same type of DOM element all the time (unlikely). That is where I want to make sure that null or 'undefined' values will not be a problem, and I believe that it is not.

...so make the element editable the attribute mustn't exist ... so in case you handle it the 'leave-it-out-way' you wouldn't encounter problems with that ... otherwise it could be a problem ... :)

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.

So how would it be a problem? And should I create a filter that removes/ignores objects when the value is null or 'undefined'. How would I say, "if ((value == null) || (typeof value == 'undefined')) skip it and go to the next value"? Oh, duh. It would actually be "if ((value != null) || (typeof value != 'undefined')) set the attib". Otherwise, it would ignore it and move on to the next value...I think.

[RMWChaos]

Woo-hoo! It works!

I ended up going with this code:

function createDOM(attribList) // Create DOM Elements Function //
    {
    for (var i = 0; i < attribList.id.length; i++) // iterate through multiple values //
        {
        var attrib = {};
        for (var index in attribList) // assign attribList values to attrib //
            {
            if ((attribList[index] != null) && (typeof attribList[index] != 'undefined')) // filter out null & 'undefined' values //
                {
                var value = attribList[index];
                attrib[index] = value instanceof Array ? value[i] : value;
                };
            };
        };
    var defaultAttribs =
        {
        'dom'        :    'div',
        'parent'    :    'body'
        };
    for (index in defaultAttribs) // Assign default attribs to 'undefined' values//
        {
        if(typeof attrib[index] == 'undefined')
            {
            attrib[index] = defaultAttribs[index];
            };
        };
etc...
 

It remains a single function, I don't have to change any of the rest of my createDOM() function, and I don't have to make any changes to my other scripts which call createDOM(). In this particular order, the code iterates through multiple values, ignores null and 'undefined' values (shouldn't be a problem, right?), and then sets default values to required 'undefined' values.

Thank you very much for your help, once again, gits.