By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
446,361 Members | 1,677 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 446,361 IT Pros & Developers. It's quick & easy.

Partially iterating through JSON list looses attrib properties

RMWChaos
100+
P: 137
The next episode in the continuing saga of trying to develop a modular, automated DOM create and remove script asks the question, "Where should I put this code?"

Alright, here's the story: with a great deal of help from gits, I've developed a DOM creation and deletion script, which can be used in multiple applications. You simply feed the script a JSON list of any size, and the script will create multiple DOM elements with as many attributes as you desire, iterating through all the elements in the list one after another. An additional feature allows you to select individual elements from the list rather than iterating through all of them at once. Okay, everything is good up to this point.

Now I've gone and asked my poor, overworked script to take on even more responsibility, and apparently it is just too much for the script to bear. I wanted to combine the individual element creation with the iteration functionality. Oh boy, let the fun begin!

If my JSON property lists were static, this whole issue would be moot. Unfortunately, the lists are dynamic (I like to make things difficult). For example, each element has a unique id that is determined by its function, location on the displayed HTML page, and other factors. Here is an example:

Expand|Select|Wrap|Line Numbers
  1. var page =
  2.     {
  3.     'homepage'   :  0,
  4.     'pagetwo'    :  1,
  5.     'pagethree'  :  2
  6.     };
  7.  
  8. for (var index in page)
  9.     {
  10.     var imageId = "nav" + index;
  11.     var navOptions =
  12.         {
  13.         'id'     :  imageId,
  14.         'dom'    :  'img',
  15.         'parent' :  'body'
  16.         };
  17.     createDOM(navOptions);
  18.     };
  19.  
Here you can see that imageId is dynamically created each time the for loop is run. That is fine as long as I am iterating through the entire list, but if I want to stop at a certain point (say at homepage) and later iterate through the rest (pageone and pagetwo), then everything breaks down because of the following code:

Expand|Select|Wrap|Line Numbers
  1. // Split attribList and submit to createNode //
  2. /*
  3. *  'attribList' (Str.) is the full JSON list passed to createDOM
  4. *  'split' (#) is the first element of the iteration section of the list
  5. *  'iterate' (#) is the current element to be created
  6. */
  7. function createDOM(attribList, split, iterate)
  8.     {
  9.     var splitList = {};
  10.     // if only split is listed, default iterate to 0 //
  11.     if (split && (typeof iterate == 'undefined'))
  12.         {
  13.         iterate = 0;
  14.         };
  15.     // if neither split nor iterate, create entire attribList (no split) //
  16.     if ((typeof split == 'undefined') || (split == 0))
  17.         {
  18.         createNode(attribList);
  19.         }
  20.     // if iterate is less that split or if split is null, create only value [iterate] per index //
  21.     else if ((split > iterate) || (split == null))
  22.         {
  23.         for (var index in attribList)
  24.             {
  25.             var value = attribList[index];
  26.             splitList[index] = value instanceof Array ? value[iterate] : value;
  27.             };
  28.         createNode(splitList);
  29.         }
  30.     // if iterate matches or exceeds split, create the remainder of values //
  31.     else if (split <= iterate)
  32.         {
  33.         for (var i = iterate; i < attribList.id.length; i++)
  34.             {
  35.             for (var index in attribList)
  36.                 {
  37.                 var value = attribList[index];
  38.                 splitList[index] = value instanceof Array ? value[i] : value;
  39.                 };
  40.             createNode(splitList);
  41.             };
  42.         };
  43.     };
  44.  
Originally, this was part of my createDOM() code, the very beginning in fact, but I am starting to think it needs to be attached to the script that is calling createDOM(). Was trying to remove redundancy since multiple scripts call this code, but because there is no easy way to pass all the vars and other JSON lists or Arrays that create the dynamic objects in the attribList...well, I may not have any alternative. I need to think about this some more. Maybe iteration recalls the original function to run again with a new variable ... originalFunction(i++)...hmm.
Dec 3 '07 #1
Share this Question
Share on Google+
4 Replies


RMWChaos
100+
P: 137
Oh wait, duh! <smacks forehead>

All I need to do is call the code currently called createDOM() inside my other scripts in order to create the new attribList, then pass attribList to the code that actually creates the DOM elements as many times as there are nodes to iterate through.

Sigh. Sometimes I just need to talk it out with you folks in order to understand my folly. =D

I'll report back here on the results.
Dec 3 '07 #2

gits
Expert Mod 5K+
P: 5,384
hey ... :)

i'm looking forward to it ;)

kind regards
Dec 4 '07 #3

RMWChaos
100+
P: 137
hey ... :)

i'm looking forward to it ;)

kind regards
Don't hold your breath. =D

Still having problems, but I think I know what I need to do, I just need to figure out how to do it.

Instead of submitting the entire JSON list to createDOM() and splitting the list there, I need to split the list before I send it to createDOM(). The problem is that I need to include the code within the same function where all my vars are that create the JSON list in the first place, and then I still want to somehow make it modular rather than have to write the same code repeatedly within the scripts.

WAIT! Epiphany! A single, large JSON list, with deeper member levels of course, then just singly pick out the node to create. Iteration code is separate, but operates on the exact same principal of: for (i = #; i < #; i++)...hm, that could work, but talk about a major recode! Still, could be very efficient.

You know, I don't think I'll ever finish this darn website. I still have to code an XML (more probably JSON) -based forums system after the framework for the site is done. Never could get chatterbox to work.
Dec 4 '07 #4

RMWChaos
100+
P: 137
Ok, here's a start...much simplified:

Expand|Select|Wrap|Line Numbers
  1. // Split attribList and submit to createDOM //
  2. function splitAttribList(attribList, splitStart, splitStop)
  3.     {
  4.     for (var i = splitStart; i <= splitStop; i++)
  5.         {
  6.         var splitList = {};
  7.         for (var index in attribList)
  8.             {
  9.             var value = attribList[index];
  10.             splitList[index] = value instanceof Array ? value[i] : value;
  11.             };
  12.         createDOM(splitList);
  13.         };
  14.     };
  15.  
This will work for a single level JSON list. But what if it's multiple levels:

Expand|Select|Wrap|Line Numbers
  1. myJsonList = {
  2.     'navigation':  [
  3.         {
  4.         'id'    :  'idOne',
  5.         'dom'   :  'img',
  6.         'parent':  'body',
  7.         'src'   :  '../images/imageOne.jpg'
  8.         },{
  9.         'id'    :  'idTwo',
  10.         'dom'   :  'img',
  11.         'parent':  'body',
  12.         'src'   :  '../images/imageTwo.jpg'
  13.         },],
  14.     'loginForm' :  [
  15.         {
  16.         'id'    :  'login',
  17.         'dom'   :  'img',
  18.         'parent':  'body',
  19.         'src'   :  '../images/login.jpg'
  20.         },{
  21.         'id'    :  'logout',
  22.         'dom'   :  'img',
  23.         'parent':  'body',
  24.         'src'   :  '../images/logout.jpg'
  25.         },],
  26.     };
  27.  
  28. myJsonList.loginForm[1].id    // 'logout'
  29.  
So now the hard part: convert the code above to access this JSON structure...

Expand|Select|Wrap|Line Numbers
  1. /*
  2. * Split attribList and submit to createDOM
  3. * attribList is original JSON list
  4. * member is 1st level member (by name or #) of attribList
  5. * splitStart is begin object by node # (0, 1, 2...) only!
  6. * splitStop is end object by node # (0, 1, 2...) only!
  7. * if splitStart and splitStop are == only one node is created.
  8. */
  9. function splitAttribList(attribList, member, splitStart, splitStop)
  10.     {
  11.     // iterate from start to stop //
  12.     for (var i = splitStart; i <= splitStop; i++)
  13.         {
  14.         // new empty object //
  15.         var splitList = {};
  16.         // create all attribs in object member[i] //
  17.         for (var index in attribList[member][i])
  18.             {
  19.             var value = attribList[member][i];
  20.             // create new JSON list with single node and attribs //
  21.             splitList[index] = value instanceof Array ? value[index] : value;
  22.             };
  23.         // submit new list to createDOM() //
  24.         createDOM(splitList);
  25.         };
  26.     };
  27.  
  28. // to initiate
  29. splitAttribList(myJsonList, loginForm (or 1), 0, 0);  // this should create 'login' node //
  30.  
Is that right? If it is, that wasn't so hard after all. Just wrote it here, so I still have to test. I wonder if the structure of splitList will match the structure of the original JSON list, or if it will be a single-level list?? I think single...

Now if this works, how to convert the vars into strings in the original JSON list so that each attrib has a unique value? Sigh...more work.
Dec 4 '07 #5

Post your reply

Sign in to post your reply or Sign up for a free account.