JavaScript / DHTML / AJAX RSS JavaScript / DHTML / AJAX RSS

Trying to parse through javascript collection object using Prototype

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Reply
1 2

•
•
Join Date: Jul 2009
Posts: 17
Reputation: Chad Gary is an unknown quantity at this point 
Solved Threads: 0
Chad Gary Chad Gary is offline Offline
Newbie Poster

Trying to parse through javascript collection object using Prototype

 
0
  #1
Jul 6th, 2009
I have the following nested javascript collection (below) and I'm trying to access the information within the collection using prototype so I can properly style and layout the data. I'm stuck and would like to know if anybody could assist.

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. var teams = {
  2.  
  3. "team1:" {
  4.                       "QB": "Alexander Hamilton",
  5.                       "RB": "John Jay",
  6.                       "WR": "James Madison"
  7.                   },
  8.  
  9. "team2:    {
  10.                        "QB": "George Washington",
  11.                        "RB": "John Adams",
  12.                       "WR": "John Hancock"
  13.  
  14.                   }
  15. };
  16.  
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 954
Reputation: essential will become famous soon enough essential will become famous soon enough 
Solved Threads: 131
Featured Poster
essential's Avatar
essential essential is offline Offline
Posting Shark

Re: Trying to parse through javascript collection object using Prototype

 
0
  #2
Jul 6th, 2009
You could try this:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <?xml version="1.0" encoding="utf-8" standalone="no"?>
  2. <?xml-stylesheet type="text/css" href="#css21" media="screen"?>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  4.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  5. <html id="xhtml10S" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  6. <head profile="http://www.w3.org/2005/10/profile">
  7. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  8. <meta http-equiv="Window-target" content="_top" />
  9. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  10. <meta http-equiv="Content-Style-Type" content="text/css" />
  11. <meta http-equiv="Content-Script-Type" content="text/javascript" />
  12. <title>Free Live Help!</title>
  13. <style id="css21" type="text/css" media="screen">
  14. /* <![CDATA[ */
  15.  
  16. /* ]]> */
  17. </style> 
  18. <script id="javascript1.5" type="text/javascript">
  19. // <![CDATA[
  20. var Teams = function() { };
  21.  
  22. Teams.prototype = {
  23. team1 : { 
  24. QB : "Alexander Hamilton",
  25. RB : "John Jay",
  26. WR : "James Madison" },
  27.  
  28. team2 : {
  29. QB : "George Washington",
  30. RB : "John Adams",
  31. WR : "John Hancock" }
  32. };
  33.  
  34. var teams = new Teams();
  35. window.onload = function() {
  36.  
  37. var div = (( document.getElementById ) ? document.getElementById("main") : document.all.main );
  38.    for ( var team in teams ) {
  39.    div.innerHTML += "<h3>" + team + "</h3>\n<p>";
  40.       for ( var member in teams[ team ] ) {
  41.       div.innerHTML += "Type : <span style=\"color : green\">" + member + "</span> - <span style=\"color : blue\">" + teams[ team ][ member ] + "</span><br />";
  42.       } div.innerHTML += "</p>";
  43.    }
  44. }
  45. // ]]>
  46. </script>
  47. </head>
  48. <body>
  49. <div id="main"></div>
  50. </body>
  51. </html>
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2009
Posts: 49
Reputation: sysel is an unknown quantity at this point 
Solved Threads: 3
sysel sysel is offline Offline
Light Poster

Re: Trying to parse through javascript collection object using Prototype

 
0
  #3
Jul 7th, 2009
Not realy sure, about what are you in doubt. Read more about the object definition and try this example:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <script>
  5. var teams = {
  6.  
  7.              "team1": {
  8.                        "QB": "Alexander Hamilton",
  9.                        "RB": "John Jay",
  10.                        "WR": "James Madison"
  11.                       },
  12.  
  13.              team2: {                             // key need not to be quoted
  14.                        "QB": "George Washington",
  15.                         RB : "John Adams",
  16.                        "WR": "John Hancock"
  17.  
  18.                       }
  19. };
  20. </script>
  21. </head>
  22. <body>
  23. The use of object teams: <br>
  24. <script>
  25. document.write(teams.team1.RB);document.write("<br>");
  26. document.write(teams["team2"].WR);document.write("<br>");
  27. document.write(teams['team1']["QB"]);document.write("<br>");
  28. document.write("<br>");
  29. for (var index in teams.team1)
  30. { document.write(index+"  "+teams.team1[index]);document.write("<br>");
  31. }
  32. document.write("<br>");
  33. for (var teamix in teams)
  34. { for (var index in teams[teamix])
  35.   { document.write(teamix+" / "+index+" is: "+teams[teamix][index]);document.write("<br>");
  36.   } document.write("<br>");
  37. }
  38. </script>
  39. </body>
  40. </html>
Reply With Quote Quick reply to this message  
•
•
Join Date: Jul 2009
Posts: 17
Reputation: Chad Gary is an unknown quantity at this point 
Solved Threads: 0
Chad Gary Chad Gary is offline Offline
Newbie Poster

Re: Trying to parse through javascript collection object using Prototype

 
0
  #4
Aug 16th, 2009
Thanks,

•
•
•
•
I get the following json object back from a json_encode command that I'm using on the server-side. Is it possible to parse through this using javascript since it is missing names of inner objects (team1 and team2). If so, how?
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. [
  2. {"PlayerName":"Ron Artest","Position":"Forward","Height":"6-7","Weight":"260","College":"St. Johns"},
  3. {"PlayerName":"Kobe Bryant","Position":"Guard","Height":"6-6","Weight":"205","College":"Lower Marion High Sc"}
  4. ]
•
•
•
•
Originally Posted by essential View Post
You could try this:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <?xml version="1.0" encoding="utf-8" standalone="no"?>
  2. <?xml-stylesheet type="text/css" href="#css21" media="screen"?>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  4.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  5. <html id="xhtml10S" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  6. <head profile="http://www.w3.org/2005/10/profile">
  7. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  8. <meta http-equiv="Window-target" content="_top" />
  9. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  10. <meta http-equiv="Content-Style-Type" content="text/css" />
  11. <meta http-equiv="Content-Script-Type" content="text/javascript" />
  12. <title>Free Live Help!</title>
  13. <style id="css21" type="text/css" media="screen">
  14. /* <![CDATA[ */
  15.  
  16. /* ]]> */
  17. </style> 
  18. <script id="javascript1.5" type="text/javascript">
  19. // <![CDATA[
  20. var Teams = function() { };
  21.  
  22. Teams.prototype = {
  23. team1 : { 
  24. QB : "Alexander Hamilton",
  25. RB : "John Jay",
  26. WR : "James Madison" },
  27.  
  28. team2 : {
  29. QB : "George Washington",
  30. RB : "John Adams",
  31. WR : "John Hancock" }
  32. };
  33.  
  34. var teams = new Teams();
  35. window.onload = function() {
  36.  
  37. var div = (( document.getElementById ) ? document.getElementById("main") : document.all.main );
  38.    for ( var team in teams ) {
  39.    div.innerHTML += "<h3>" + team + "</h3>\n<p>";
  40.       for ( var member in teams[ team ] ) {
  41.       div.innerHTML += "Type : <span style=\"color : green\">" + member + "</span> - <span style=\"color : blue\">" + teams[ team ][ member ] + "</span><br />";
  42.       } div.innerHTML += "</p>";
  43.    }
  44. }
  45. // ]]>
  46. </script>
  47. </head>
  48. <body>
  49. <div id="main"></div>
  50. </body>
  51. </html>
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 954
Reputation: essential will become famous soon enough essential will become famous soon enough 
Solved Threads: 131
Featured Poster
essential's Avatar
essential essential is offline Offline
Posting Shark

Re: Trying to parse through javascript collection object using Prototype

 
0
  #5
Aug 17th, 2009
Hi Gary,

here's your code, i've extrcted all of its collections with the used of a table, but if don't like my concept of using table to differentiate the items inside the players collections -- then simply re-apply the same procedure in my original post, using the innerHTML method.

All codes is as follows:

javascript Syntax (Toggle Plain Text) 
  1. <?xml version="1.0" encoding="utf-8" standalone="no"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  3.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html id="xhtml10" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  5. <!-- W3Cs Standard Template : XHTML 1.0 Transitional DTD -->
  6. <head>
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  8. <meta http-equiv="Content-Script-Type" content="text/javascript" />
  9. <title>www.daniweb.com</title>
  10. <style type="text/css">
  11. /* <![CDATA[ */
  12.  
  13. table {
  14.   border-collapse : collapse;
  15.   border : 1px solid #C0C0C0;
  16.   color : #365895;
  17.   text-align : center;
  18.   width : 100%; }
  19. caption {
  20.   width : auto;
  21.   text-align : left;
  22.   margin-bottom : .500em;
  23.   padding-left : .500em; }
  24. td {
  25.   border-top : 1px solid #C0C0C0; 
  26.   border-right : 1px dashed #C0C0C0;
  27.   padding : .350em;
  28.   width : auto;
  29.   vertical-align : middle;
  30.   letter-spacing : 2px; }
  31. thead td {
  32.   background-color : #F0FFFF;
  33.   border-right : 1px dashed #C0C0C0;
  34.   padding : .350em;
  35.   font : bold 80%/1 "Trebuchet MS", Verdana, Arial, sans-serif; }
  36.  
  37. /* ]]> */
  38. </style>
  39. <script type="text/javascript">
  40. // <![CDATA[
  41.  
  42. window.onload = function() {
  43.    if ( document.createElement ) {
  44.    var players = [ 
  45. { PlayerName : "Ron Artest",
  46.   Position : "Forward",
  47.   Height : "6-7",
  48.   Weight : 260,
  49.   College : "St. Johns" },
  50. { PlayerName : "Kobe Bryant",
  51.   Position : "Guard",
  52.   Height : "6-6",
  53.   Weight : 205,
  54.   College : "Lower Marion High Sc" } ];
  55.    var container = document.getElementById("view");
  56.    var labels = [ "Name", "Position", "Height", "Weight", "College" ];
  57.    var table = document.createElement("table");
  58.    var tCaption = table.createCaption();
  59.    tCaption.appendChild( document.createTextNode("NBA :: Allstars Statistics-Table" ));
  60.    var tHead = table.createTHead();
  61.    var addCell = function( row, label ) {
  62.       return row.insertCell( -1 ).appendChild( document.createTextNode( label ));
  63.    };
  64.    var xrow = tHead.insertRow( -1 );
  65.    for ( var i = 0; labels[ i ]; i++ ) {
  66.       addCell( xrow, labels[ i ] );
  67.    } var tBody = document.createElement( "tbody" );
  68.    table.appendChild( tBody );
  69.    for ( i = 0; players[ i ]; i++ ) {
  70.       xrow = tBody.insertRow( -1 );
  71.       for ( var info in players[ i ] ) {
  72.          addCell( xrow, players[ i ][ info ] );
  73.       }
  74.    } container.appendChild( table );
  75.    return;
  76.    } alert( "unsupported features, please update your browser" );
  77.    return false;
  78. }
  79. // ]]>
  80. </script>
  81. </head>
  82. <body id="xhtml-10-transitional">
  83. <div id="view"></div> <!-- id :: view -->
  84. </body>
  85. </html>

hope it helps...
Dev.Opera — FOLLOW THE STANDARDS, BREAK THE RULES...
Reply With Quote Quick reply to this message  
•
•
Join Date: Jul 2009
Posts: 17
Reputation: Chad Gary is an unknown quantity at this point 
Solved Threads: 0
Chad Gary Chad Gary is offline Offline
Newbie Poster

Re: Trying to parse through javascript collection object using Prototype

 
0
  #6
Aug 18th, 2009
Thanks,
•
•
•
•
I getting a better understanding of parsing throuhg objects. Quick question. Wy won't the following work. I'm getting undefined when I try and execute the code.
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1.  for(var player in players)
  2.         document.write(player["College"]);

•
•
•
•
Originally Posted by essential View Post
Hi Gary,

here's your code, i've extrcted all of its collections with the used of a table, but if don't like my concept of using table to differentiate the items inside the players collections -- then simply re-apply the same procedure in my original post, using the innerHTML method.

All codes is as follows:

javascript Syntax (Toggle Plain Text) 
  1. <?xml version="1.0" encoding="utf-8" standalone="no"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  3.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html id="xhtml10" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  5. <!-- W3Cs Standard Template : XHTML 1.0 Transitional DTD -->
  6. <head>
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  8. <meta http-equiv="Content-Script-Type" content="text/javascript" />
  9. <title>www.daniweb.com</title>
  10. <style type="text/css">
  11. /* <![CDATA[ */
  12.  
  13. table {
  14.   border-collapse : collapse;
  15.   border : 1px solid #C0C0C0;
  16.   color : #365895;
  17.   text-align : center;
  18.   width : 100%; }
  19. caption {
  20.   width : auto;
  21.   text-align : left;
  22.   margin-bottom : .500em;
  23.   padding-left : .500em; }
  24. td {
  25.   border-top : 1px solid #C0C0C0; 
  26.   border-right : 1px dashed #C0C0C0;
  27.   padding : .350em;
  28.   width : auto;
  29.   vertical-align : middle;
  30.   letter-spacing : 2px; }
  31. thead td {
  32.   background-color : #F0FFFF;
  33.   border-right : 1px dashed #C0C0C0;
  34.   padding : .350em;
  35.   font : bold 80%/1 "Trebuchet MS", Verdana, Arial, sans-serif; }
  36.  
  37. /* ]]> */
  38. </style>
  39. <script type="text/javascript">
  40. // <![CDATA[
  41.  
  42. window.onload = function() {
  43.    if ( document.createElement ) {
  44.    var players = [ 
  45. { PlayerName : "Ron Artest",
  46.   Position : "Forward",
  47.   Height : "6-7",
  48.   Weight : 260,
  49.   College : "St. Johns" },
  50. { PlayerName : "Kobe Bryant",
  51.   Position : "Guard",
  52.   Height : "6-6",
  53.   Weight : 205,
  54.   College : "Lower Marion High Sc" } ];
  55.    var container = document.getElementById("view");
  56.    var labels = [ "Name", "Position", "Height", "Weight", "College" ];
  57.    var table = document.createElement("table");
  58.    var tCaption = table.createCaption();
  59.    tCaption.appendChild( document.createTextNode("NBA :: Allstars Statistics-Table" ));
  60.    var tHead = table.createTHead();
  61.    var addCell = function( row, label ) {
  62.       return row.insertCell( -1 ).appendChild( document.createTextNode( label ));
  63.    };
  64.    var xrow = tHead.insertRow( -1 );
  65.    for ( var i = 0; labels[ i ]; i++ ) {
  66.       addCell( xrow, labels[ i ] );
  67.    } var tBody = document.createElement( "tbody" );
  68.    table.appendChild( tBody );
  69.    for ( i = 0; players[ i ]; i++ ) {
  70.       xrow = tBody.insertRow( -1 );
  71.       for ( var info in players[ i ] ) {
  72.          addCell( xrow, players[ i ][ info ] );
  73.       }
  74.    } container.appendChild( table );
  75.    return;
  76.    } alert( "unsupported features, please update your browser" );
  77.    return false;
  78. }
  79. // ]]>
  80. </script>
  81. </head>
  82. <body id="xhtml-10-transitional">
  83. <div id="view"></div> <!-- id :: view -->
  84. </body>
  85. </html>

hope it helps...
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 954
Reputation: essential will become famous soon enough essential will become famous soon enough 
Solved Threads: 131
Featured Poster
essential's Avatar
essential essential is offline Offline
Posting Shark

Re: Trying to parse through javascript collection object using Prototype

 
0
  #7
Aug 18th, 2009
Gary,

You've forgot the s' over the ( object ) players where it should be:

for ( var player in players ) {
   document.write( players[ "College" ] );
Dev.Opera — FOLLOW THE STANDARDS, BREAK THE RULES...
Reply With Quote Quick reply to this message  
•
•
Join Date: Jul 2009
Posts: 17
Reputation: Chad Gary is an unknown quantity at this point 
Solved Threads: 0
Chad Gary Chad Gary is offline Offline
Newbie Poster

Re: Trying to parse through javascript collection object using Prototype

 
0
  #8
Aug 23rd, 2009
Thanks Posting Shark,

Let's say instead of one object I get two objects back from the server the second object is the local address of the logo of the NBA team which I want to display in a div tag below the table with the players name. How would you go about doing this? I really appreciate all your help?

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. [
  2. {"PlayerName":"Ron Artest","Position":"Forward","Height":"6-7","Weight":"260","College":"St. Johns"},
  3. {"PlayerName":"Kobe Bryant","Position":"Guard","Height":"6-6","Weight":"205","College":"Lower Marion High Sc"}
  4. ][
  5. {"PlayerName":"Ron Artest","Position":"Forward","Height":"6-7","Weight":"260","College":"St. Johns"},
  6. {"PlayerName":"Kobe Bryant","Position":"Guard","Height":"6-6","Weight":"205","College":"Lower Marion High Sc"}
  7. ]
  8. [{"TeamLogo":"C:\\wamp\\wwwNBA\\laLakersLogo.gif"}]



•
•
•
•
Originally Posted by essential View Post
Hi Gary,

here's your code, i've extrcted all of its collections with the used of a table, but if don't like my concept of using table to differentiate the items inside the players collections -- then simply re-apply the same procedure in my original post, using the innerHTML method.

All codes is as follows:

javascript Syntax (Toggle Plain Text) 
  1. <?xml version="1.0" encoding="utf-8" standalone="no"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  3.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html id="xhtml10" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  5. <!-- W3Cs Standard Template : XHTML 1.0 Transitional DTD -->
  6. <head>
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  8. <meta http-equiv="Content-Script-Type" content="text/javascript" />
  9. <title>www.daniweb.com</title>
  10. <style type="text/css">
  11. /* <![CDATA[ */
  12.  
  13. table {
  14.   border-collapse : collapse;
  15.   border : 1px solid #C0C0C0;
  16.   color : #365895;
  17.   text-align : center;
  18.   width : 100%; }
  19. caption {
  20.   width : auto;
  21.   text-align : left;
  22.   margin-bottom : .500em;
  23.   padding-left : .500em; }
  24. td {
  25.   border-top : 1px solid #C0C0C0; 
  26.   border-right : 1px dashed #C0C0C0;
  27.   padding : .350em;
  28.   width : auto;
  29.   vertical-align : middle;
  30.   letter-spacing : 2px; }
  31. thead td {
  32.   background-color : #F0FFFF;
  33.   border-right : 1px dashed #C0C0C0;
  34.   padding : .350em;
  35.   font : bold 80%/1 "Trebuchet MS", Verdana, Arial, sans-serif; }
  36.  
  37. /* ]]> */
  38. </style>
  39. <script type="text/javascript">
  40. // <![CDATA[
  41.  
  42. window.onload = function() {
  43.    if ( document.createElement ) {
  44.    var players = [ 
  45. { PlayerName : "Ron Artest",
  46.   Position : "Forward",
  47.   Height : "6-7",
  48.   Weight : 260,
  49.   College : "St. Johns" },
  50. { PlayerName : "Kobe Bryant",
  51.   Position : "Guard",
  52.   Height : "6-6",
  53.   Weight : 205,
  54.   College : "Lower Marion High Sc" } ];
  55.    var container = document.getElementById("view");
  56.    var labels = [ "Name", "Position", "Height", "Weight", "College" ];
  57.    var table = document.createElement("table");
  58.    var tCaption = table.createCaption();
  59.    tCaption.appendChild( document.createTextNode("NBA :: Allstars Statistics-Table" ));
  60.    var tHead = table.createTHead();
  61.    var addCell = function( row, label ) {
  62.       return row.insertCell( -1 ).appendChild( document.createTextNode( label ));
  63.    };
  64.    var xrow = tHead.insertRow( -1 );
  65.    for ( var i = 0; labels[ i ]; i++ ) {
  66.       addCell( xrow, labels[ i ] );
  67.    } var tBody = document.createElement( "tbody" );
  68.    table.appendChild( tBody );
  69.    for ( i = 0; players[ i ]; i++ ) {
  70.       xrow = tBody.insertRow( -1 );
  71.       for ( var info in players[ i ] ) {
  72.          addCell( xrow, players[ i ][ info ] );
  73.       }
  74.    } container.appendChild( table );
  75.    return;
  76.    } alert( "unsupported features, please update your browser" );
  77.    return false;
  78. }
  79. // ]]>
  80. </script>
  81. </head>
  82. <body id="xhtml-10-transitional">
  83. <div id="view"></div> <!-- id :: view -->
  84. </body>
  85. </html>

hope it helps...
Reply With Quote Quick reply to this message  
•
•
Join Date: Jul 2009
Posts: 17
Reputation: Chad Gary is an unknown quantity at this point 
Solved Threads: 0
Chad Gary Chad Gary is offline Offline
Newbie Poster

Re: Trying to parse through javascript collection object using Prototype

 
0
  #9
Aug 23rd, 2009
Posting Shark,
I made a mistake in my previous post and included three objects instead of two. Below is the correct number of objects
[
{"PlayerName":"Ron Artest","Position":"Forward","Height":"6-7","Weight":"260","College":"St. Johns"},
{"PlayerName":"Kobe Bryant","Position":"Guard","Height":"6-6","Weight":"205","College":"Lower Marion High Sc"}
]
[{"TeamLogo":"C:\\wamp\\wwwNBA\\laLakersLogo.gif"}]

•
•
•
•
Originally Posted by Chad Gary View Post
Thanks,


JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1.  for(var player in players)
  2.         document.write(player["College"]);
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 954
Reputation: essential will become famous soon enough essential will become famous soon enough 
Solved Threads: 131
Featured Poster
essential's Avatar
essential essential is offline Offline
Posting Shark

Re: Trying to parse through javascript collection object using Prototype

 
0
  #10
Aug 24th, 2009
Hi,

it will be alot more easier if you will grouped them as a team, instead of defining another object for the path of images just to display each logo.

In this approch i've used the document.writeln method, and created a table to differentiate each of the item inside the teams object variable.

javascript Syntax (Toggle Plain Text) 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2.    "http://www.w3.org/TR/html4/loose.dtd">
  3. <html lang="en">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6. <meta http-equiv="Content-Script-Type" content="text/javascript">
  7. <title>W3C HTML 4.01 loose DTD</title>
  8. <style type="text/css">
  9. <!--
  10. td {
  11.    border-right : 1px solid #A0A0A0;
  12.    border-top : 1px solid #A0A0A0;
  13.    background-color : #F1F1F1;
  14.    color : #405060; }
  15. th:first-child {
  16.    border-bottom : 1px solid #A0A0A0;
  17.    border-right : 1px solid #A0A0A0;
  18.    background-color : #800090;
  19.    color : yellow;
  20.    width : 25%;
  21. }
  22. table {
  23.    border : 1px solid #A0A0A0;
  24.    border-collapse : collapse;
  25.    text-align : left;
  26.    width : 100%; }
  27.  
  28. // -->
  29. </style>
  30. <script type="text/javascript">
  31. <!--
  32.  
  33. var teams = [ 
  34. { "LA Lakers" : {
  35.    "Team Logo" : "C:\\wamp\\wwwNBA\\laLakersLogo.gif",
  36.    Players : {
  37.       37 : { // Jersey n#
  38.          PlayerName : "Ron Artest",
  39.          Position : "Forward",
  40.          Height : "6-7",
  41.          Weight : "260",
  42.          College : "St. Johns" 
  43.          },
  44.       24 : {
  45.          PlayerName : "Kobe Bryant",
  46.          Position : "Guard",
  47.          Height : "6-6",
  48.          Weight : "205",
  49.          College : "Lower Marion High Sc"
  50.          }
  51.       }
  52.    }
  53. }
  54. // Add More NBA teams below >>>
  55.  ];
  56.  
  57. // -->
  58. </script>
  59. </head>
  60. <body>
  61. <noscript>
  62. <p> This site requires a browser that support <b>JavaScript</b>. </p> 
  63. </noscript>
  64. <div id="nbastats">
  65. <script type="text/javascript">
  66. <!--
  67. ( function() {
  68.    var tLen = teams.length;
  69.    var table = '<table id="tableOne" border="0" cellpadding="5" cellspacing="0" frame="void" rules="none" summary="NBA Statistic Table">\n';
  70.    for ( var x = 0; x < tLen; x++ ) {
  71.       table += "<tr>\n";
  72.       for ( var teamName in teams[ x ] ) {
  73.          table += "<th title=\"" + teamName + "\" colspan=\"3\">Team Name: </th>\n";
  74.          table += "<td colspan=\"3\">" + teamName + "</td>\n";
  75.          table += "</tr>\n";
  76.          table += "<tr>\n";
  77.          for ( var misc in teams[ x ][ teamName ] ) {
  78.             table += "<th colspan=\"3\">" + misc + "</th>\n";         
  79.          } table += "</tr>\n";
  80.          table += "<tr>\n";
  81.          var count = 10;
  82.          var image = new Image();
  83.          image.src = teams[ x ][ teamName ][ "Team Logo" ];
  84.          table += "<td style=\"background-color : #FFFFFF;\" rowspan=\"" + ( count += ( 1 * 10 )) + "\" colspan=\"3\"><img src=\"" + image.src + "\" alt=\"" + image.src + "\"></td>";
  85.          table += "</tr>\n";
  86.          for ( var j in teams[ x ][ teamName ][ misc ] ) {
  87.             for ( var player in teams[ x ][ teamName ][ misc ][ j ] ) {
  88.             table += "<tr>\n";
  89.             table += "<td style=\"text-align : center; background-color : #E0E0E0\">" + player + "</td><td>" + teams[ x ][ teamName ][ misc ][ j ][ player ] + "</td>\n";
  90.             table += "</tr>\n";
  91.             }
  92.          table += "<tr>\n";
  93.          table += "<td>Jersey no.</td><td>#" + j + "</td>\n";
  94.          table += "</tr>\n";
  95.          table += "<tr>\n";
  96.          table += "<td colspan=\"2\" style=\"background-color : #800090; height : 5px;\"> </td>\n";
  97.          table += "</tr>\n";
  98.          } 
  99.       }  
  100.    } table += "</table>";
  101.    document.writeln( table );
  102. } )( /* NBA Teams & Players */ )
  103. // -->
  104. </script>
  105. </div>
  106. </body>
  107. </html>

you can easily expand all procedures inside this function. Just be careful when you edit the lines'.
Last edited by essential; Aug 24th, 2009 at 5:29 am.
Dev.Opera — FOLLOW THE STANDARDS, BREAK THE RULES...
Reply With Quote Quick reply to this message  
Reply
1 2

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum
Thread Tools Search this Thread



acid2 ajax ajaxexample ajaxjspservlets array browser bug captchaformproblem cart checkbox child class close codes createrange() css cursor date debugger decimal dependent design disablefirebug dom dropdown editor element embed engine enter error events explorer ext file firefox focus form forms frameworks getselection google gxt hiddenvalue highlightedword hint html ie7 ie8 iframe images index internet java javascript javascripthelp2020 jquery jsf jsfile jsp jump libcurl listbox maps masterpage math media menu mp4 object onmouseoutdivproblem onmouseover onreadystatechange parent paypal pdf php position post problem programming progressbar prototype redirect runtime safari scale scriptlets scroll search security shopping size software toggle unicode w3c web wysiwyg \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC