Trying to parse through javascript collection object using Prototype

Question

Chad Gary 0 Newbie Poster

15 Years Ago

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.

var teams = {

"team1:" {
                      "QB": "Alexander Hamilton",
                      "RB": "John Jay",
                      "WR": "James Madison"
                  },

"team2:    {
                       "QB": "George Washington",
                       "RB": "John Adams",
                      "WR": "John Hancock"

                  }
};

javascript

3 Contributors
12 Replies
203 Views
1 Month Discussion Span
Latest Post 15 Years Ago Latest Post by Chad Gary

essential 84 Posting Shark

15 Years Ago

You could try this:

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="#css21" media="screen"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html id="xhtml10S" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://www.w3.org/2005/10/profile">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Window-target" content="_top" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Free Live Help!</title>
<style id="css21" type="text/css" media="screen">
/* <![CDATA[ */

/* ]]> */
</style> 
<script id="javascript1.5" type="text/javascript">
// <![CDATA[
var Teams = function() { };

Teams.prototype = {
team1 : { 
QB : "Alexander Hamilton",
RB : "John Jay",
WR : "James Madison" },

team2 : {
QB : "George Washington",
RB : "John Adams",
WR : "John Hancock" }
};

var teams = new Teams();
window.onload = function() {

var div = (( document.getElementById ) ? document.getElementById("main") : document.all.main );
   for ( var team in teams ) {
   div.innerHTML += "<h3>" + team + "</h3>\n<p>";
      for ( var member in teams[ team ] ) {
      div.innerHTML += "Type : <span style=\"color : green\">" + member + "</span> - <span style=\"color : blue\">" + teams[ team ][ member ] + "</span><br />";
      } div.innerHTML += "</p>";
   }
}
// ]]>
</script>
</head>
<body>
<div id="main"></div>
</body>
</html>

sysel 0 Light Poster

15 Years Ago

Not realy sure, about what are you in doubt. Read more about the object definition and try this example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script>
var teams = {

             "team1": {
                       "QB": "Alexander Hamilton",
                       "RB": "John Jay",
                       "WR": "James Madison"
                      },

             team2: {                             // key need not to be quoted
                       "QB": "George Washington",
                        RB : "John Adams",
                       "WR": "John Hancock"

                      }
};
</script>
</head>
<body>
The use of object teams: <br>
<script>
document.write(teams.team1.RB);document.write("<br>");
document.write(teams["team2"].WR);document.write("<br>");
document.write(teams['team1']["QB"]);document.write("<br>");
document.write("<br>");
for (var index in teams.team1)
{ document.write(index+"  "+teams.team1[index]);document.write("<br>");
}
document.write("<br>");
for (var teamix in teams)
{ for (var index in teams[teamix])
  { document.write(teamix+" / "+index+" is: "+teams[teamix][index]);document.write("<br>");
  } document.write("<br>");
}
</script>
</body>
</html>

essential 84 Posting Shark

15 Years Ago

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:

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html id="xhtml10" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<!-- W3Cs Standard Template : XHTML 1.0 Transitional DTD -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>www.daniweb.com</title>
<style type="text/css">
/* <![CDATA[ */

table {
  border-collapse : collapse;
  border : 1px solid #C0C0C0;
  color : #365895;
  text-align : center;
  width : 100%; }
caption {
  width : auto;
  text-align : left;
  margin-bottom : .500em;
  padding-left : .500em; }
td {
  border-top : 1px solid #C0C0C0; 
  border-right : 1px dashed #C0C0C0;
  padding : .350em;
  width : auto;
  vertical-align : middle;
  letter-spacing : 2px; }
thead td {
  background-color : #F0FFFF;
  border-right : 1px dashed #C0C0C0;
  padding : .350em;
  font : bold 80%/1 "Trebuchet MS", Verdana, Arial, sans-serif; }

/* ]]> */
</style>
<script type="text/javascript">
// <![CDATA[

window.onload = function() {
   if ( document.createElement ) {
   var players = [ 
{ 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" } ];
   var container = document.getElementById("view");
   var labels = [ "Name", "Position", "Height", "Weight", "College" ];
   var table = document.createElement("table");
   var tCaption = table.createCaption();
   tCaption.appendChild( document.createTextNode("NBA :: Allstars Statistics-Table" ));
   var tHead = table.createTHead();
   var addCell = function( row, label ) {
      return row.insertCell( -1 ).appendChild( document.createTextNode( label ));
   };
   var xrow = tHead.insertRow( -1 );
   for ( var i = 0; labels[ i ]; i++ ) {
      addCell( xrow, labels[ i ] );
   } var tBody = document.createElement( "tbody" );
   table.appendChild( tBody );
   for ( i = 0; players[ i ]; i++ ) {
      xrow = tBody.insertRow( -1 );
      for ( var info in players[ i ] ) {
         addCell( xrow, players[ i ][ info ] );
      }
   } container.appendChild( table );
   return;
   } alert( "unsupported features, please update your browser" );
   return false;
}
// ]]>
</script>
</head>
<body id="xhtml-10-transitional">
<div id="view"></div> <!-- id :: view -->
</body>
</html>

hope it helps...

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Chad Gary 0 Newbie Poster · Answer 1 · 2009-08-17T07:33:09+00:00

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?

[
{"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"}
]

You could try this:

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="#css21" media="screen"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html id="xhtml10S" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://www.w3.org/2005/10/profile">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Window-target" content="_top" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Free Live Help!</title>
<style id="css21" type="text/css" media="screen">
/* <![CDATA[ */

/* ]]> */
</style> 
<script id="javascript1.5" type="text/javascript">
// <![CDATA[
var Teams = function() { };

Teams.prototype = {
team1 : { 
QB : "Alexander Hamilton",
RB : "John Jay",
WR : "James Madison" },

team2 : {
QB : "George Washington",
RB : "John Adams",
WR : "John Hancock" }
};

var teams = new Teams();
window.onload = function() {

var div = (( document.getElementById ) ? document.getElementById("main") : document.all.main );
   for ( var team in teams ) {
   div.innerHTML += "<h3>" + team + "</h3>\n<p>";
      for ( var member in teams[ team ] ) {
      div.innerHTML += "Type : <span style=\"color : green\">" + member + "</span> - <span style=\"color : blue\">" + teams[ team ][ member ] + "</span><br />";
      } div.innerHTML += "</p>";
   }
}
// ]]>
</script>
</head>
<body>
<div id="main"></div>
</body>
</html>

Chad Gary 0 Newbie Poster · Answer 2 · 2009-08-18T20:04:23+00:00

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.

for(var player in players)
        document.write(player["College"]);

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:

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html id="xhtml10" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<!-- W3Cs Standard Template : XHTML 1.0 Transitional DTD -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>www.daniweb.com</title>
<style type="text/css">
/* <![CDATA[ */

table {
  border-collapse : collapse;
  border : 1px solid #C0C0C0;
  color : #365895;
  text-align : center;
  width : 100%; }
caption {
  width : auto;
  text-align : left;
  margin-bottom : .500em;
  padding-left : .500em; }
td {
  border-top : 1px solid #C0C0C0; 
  border-right : 1px dashed #C0C0C0;
  padding : .350em;
  width : auto;
  vertical-align : middle;
  letter-spacing : 2px; }
thead td {
  background-color : #F0FFFF;
  border-right : 1px dashed #C0C0C0;
  padding : .350em;
  font : bold 80%/1 "Trebuchet MS", Verdana, Arial, sans-serif; }

/* ]]> */
</style>
<script type="text/javascript">
// <![CDATA[

window.onload = function() {
   if ( document.createElement ) {
   var players = [ 
{ 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" } ];
   var container = document.getElementById("view");
   var labels = [ "Name", "Position", "Height", "Weight", "College" ];
   var table = document.createElement("table");
   var tCaption = table.createCaption();
   tCaption.appendChild( document.createTextNode("NBA :: Allstars Statistics-Table" ));
   var tHead = table.createTHead();
   var addCell = function( row, label ) {
      return row.insertCell( -1 ).appendChild( document.createTextNode( label ));
   };
   var xrow = tHead.insertRow( -1 );
   for ( var i = 0; labels[ i ]; i++ ) {
      addCell( xrow, labels[ i ] );
   } var tBody = document.createElement( "tbody" );
   table.appendChild( tBody );
   for ( i = 0; players[ i ]; i++ ) {
      xrow = tBody.insertRow( -1 );
      for ( var info in players[ i ] ) {
         addCell( xrow, players[ i ][ info ] );
      }
   } container.appendChild( table );
   return;
   } alert( "unsupported features, please update your browser" );
   return false;
}
// ]]>
</script>
</head>
<body id="xhtml-10-transitional">
<div id="view"></div> <!-- id :: view -->
</body>
</html>

hope it helps...

essential 84 Posting Shark Featured Poster · Answer 3 · 2009-08-18T20:44:23+00:00

Gary,

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

for ( var player in players ) {
   document.write( players[ "College" ] );

Chad Gary 0 Newbie Poster · Answer 4 · 2009-08-24T02:40:26+00:00

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?

[
{"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"}
][
{"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"}]

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:

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html id="xhtml10" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<!-- W3Cs Standard Template : XHTML 1.0 Transitional DTD -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>www.daniweb.com</title>
<style type="text/css">
/* <![CDATA[ */

table {
  border-collapse : collapse;
  border : 1px solid #C0C0C0;
  color : #365895;
  text-align : center;
  width : 100%; }
caption {
  width : auto;
  text-align : left;
  margin-bottom : .500em;
  padding-left : .500em; }
td {
  border-top : 1px solid #C0C0C0; 
  border-right : 1px dashed #C0C0C0;
  padding : .350em;
  width : auto;
  vertical-align : middle;
  letter-spacing : 2px; }
thead td {
  background-color : #F0FFFF;
  border-right : 1px dashed #C0C0C0;
  padding : .350em;
  font : bold 80%/1 "Trebuchet MS", Verdana, Arial, sans-serif; }

/* ]]> */
</style>
<script type="text/javascript">
// <![CDATA[

window.onload = function() {
   if ( document.createElement ) {
   var players = [ 
{ 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" } ];
   var container = document.getElementById("view");
   var labels = [ "Name", "Position", "Height", "Weight", "College" ];
   var table = document.createElement("table");
   var tCaption = table.createCaption();
   tCaption.appendChild( document.createTextNode("NBA :: Allstars Statistics-Table" ));
   var tHead = table.createTHead();
   var addCell = function( row, label ) {
      return row.insertCell( -1 ).appendChild( document.createTextNode( label ));
   };
   var xrow = tHead.insertRow( -1 );
   for ( var i = 0; labels[ i ]; i++ ) {
      addCell( xrow, labels[ i ] );
   } var tBody = document.createElement( "tbody" );
   table.appendChild( tBody );
   for ( i = 0; players[ i ]; i++ ) {
      xrow = tBody.insertRow( -1 );
      for ( var info in players[ i ] ) {
         addCell( xrow, players[ i ][ info ] );
      }
   } container.appendChild( table );
   return;
   } alert( "unsupported features, please update your browser" );
   return false;
}
// ]]>
</script>
</head>
<body id="xhtml-10-transitional">
<div id="view"></div> <!-- id :: view -->
</body>
</html>

hope it helps...

Chad Gary 0 Newbie Poster · Answer 5 · 2009-08-24T02:46:53+00:00

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"}]

Thanks,

for(var player in players)
        document.write(player["College"]);

essential 84 Posting Shark Featured Poster · Answer 6 · 2009-08-24T14:23:16+00:00

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.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>W3C HTML 4.01 loose DTD</title>
<style type="text/css">
<!--
td {
   border-right : 1px solid #A0A0A0;
   border-top : 1px solid #A0A0A0;
   background-color : #F1F1F1;
   color : #405060; }
th:first-child {
   border-bottom : 1px solid #A0A0A0;
   border-right : 1px solid #A0A0A0;
   background-color : #800090;
   color : yellow;
   width : 25%;
}
table {
   border : 1px solid #A0A0A0;
   border-collapse : collapse;
   text-align : left;
   width : 100%; }

// -->
</style>
<script type="text/javascript">
<!--

var teams = [ 
{ "LA Lakers" : {
   "Team Logo" : "C:\\wamp\\wwwNBA\\laLakersLogo.gif",
   Players : {
      37 : { // Jersey n#
         PlayerName : "Ron Artest",
         Position : "Forward",
         Height : "6-7",
         Weight : "260",
         College : "St. Johns" 
         },
      24 : {
         PlayerName : "Kobe Bryant",
         Position : "Guard",
         Height : "6-6",
         Weight : "205",
         College : "Lower Marion High Sc"
         }
      }
   }
}
// Add More NBA teams below >>>
 ];

// -->
</script>
</head>
<body>
<noscript>
<p> This site requires a browser that support <b>JavaScript</b>. </p> 
</noscript>
<div id="nbastats">
<script type="text/javascript">
<!--
( function() {
   var tLen = teams.length;
   var table = '<table id="tableOne" border="0" cellpadding="5" cellspacing="0" frame="void" rules="none" summary="NBA Statistic Table">\n';
   for ( var x = 0; x < tLen; x++ ) {
      table += "<tr>\n";
      for ( var teamName in teams[ x ] ) {
         table += "<th title=\"" + teamName + "\" colspan=\"3\">Team Name: </th>\n";
         table += "<td colspan=\"3\">" + teamName + "</td>\n";
         table += "</tr>\n";
         table += "<tr>\n";
         for ( var misc in teams[ x ][ teamName ] ) {
            table += "<th colspan=\"3\">" + misc + "</th>\n";         
         } table += "</tr>\n";
         table += "<tr>\n";
         var count = 10;
         var image = new Image();
         image.src = teams[ x ][ teamName ][ "Team Logo" ];
         table += "<td style=\"background-color : #FFFFFF;\" rowspan=\"" + ( count += ( 1 * 10 )) + "\" colspan=\"3\"><img src=\"" + image.src + "\" alt=\"" + image.src + "\"></td>";
         table += "</tr>\n";
         for ( var j in teams[ x ][ teamName ][ misc ] ) {
            for ( var player in teams[ x ][ teamName ][ misc ][ j ] ) {
            table += "<tr>\n";
            table += "<td style=\"text-align : center; background-color : #E0E0E0\">" + player + "</td><td>" + teams[ x ][ teamName ][ misc ][ j ][ player ] + "</td>\n";
            table += "</tr>\n";
            }
         table += "<tr>\n";
         table += "<td>Jersey no.</td><td>#" + j + "</td>\n";
         table += "</tr>\n";
         table += "<tr>\n";
         table += "<td colspan=\"2\" style=\"background-color : #800090; height : 5px;\"> </td>\n";
         table += "</tr>\n";
         } 
      }  
   } table += "</table>";
   document.writeln( table );
} )( /* NBA Teams & Players */ )
// -->
</script>
</div>
</body>
</html>

you can easily expand all procedures inside this function. Just be careful when you edit the lines'.

Chad Gary 0 Newbie Poster · Answer 7 · 2009-08-24T23:37:40+00:00

Thanks Postong Shark,

My biggest issue was trying to get a nice nested object structure back from the server after running a couple of queiries. I was able to get somthing similar to what you provided me, but I'm getting the brackets ( ] ) on the server side. Will this effect anyhting? Will I still be able to parse through the results using your code, or will I have to make some adjustments? Can you breifly explain the difference between brackets and curly braces as it relates to js objects?

This is what I'm getting back from the server:

{"LA Lakers":
    [[ {
         "Team Logo":"C:\\wamp\\wwwNBA\\laLakersLogo.gif"
       },
          [{
             "Players":[{
                         "37":{
                               "PlayerName":"Ron Artest",
                               "Position":"Forward","Height":"6-7 l",
                               "Weight":"260",
                               "College":"St. Johns"
                              },

                         "24":{
                                "PlayerName":"Kobe Bryant",
                                "Position":"Guard","
                                 Height":"6-6 l",
                                 "Weight":"205",
                                 "College":"Lower Marion High Sc"
                              }
                       }]
         }]
   ]]
}

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.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>W3C HTML 4.01 loose DTD</title>
<style type="text/css">
<!--
td {
   border-right : 1px solid #A0A0A0;
   border-top : 1px solid #A0A0A0;
   background-color : #F1F1F1;
   color : #405060; }
th:first-child {
   border-bottom : 1px solid #A0A0A0;
   border-right : 1px solid #A0A0A0;
   background-color : #800090;
   color : yellow;
   width : 25%;
}
table {
   border : 1px solid #A0A0A0;
   border-collapse : collapse;
   text-align : left;
   width : 100%; }

// -->
</style>
<script type="text/javascript">
<!--

var teams = [ 
{ "LA Lakers" : {
   "Team Logo" : "C:\\wamp\\wwwNBA\\laLakersLogo.gif",
   Players : {
      37 : { // Jersey n#
         PlayerName : "Ron Artest",
         Position : "Forward",
         Height : "6-7",
         Weight : "260",
         College : "St. Johns" 
         },
      24 : {
         PlayerName : "Kobe Bryant",
         Position : "Guard",
         Height : "6-6",
         Weight : "205",
         College : "Lower Marion High Sc"
         }
      }
   }
}
// Add More NBA teams below >>>
 ];

// -->
</script>
</head>
<body>
<noscript>
<p> This site requires a browser that support <b>JavaScript</b>. </p> 
</noscript>
<div id="nbastats">
<script type="text/javascript">
<!--
( function() {
   var tLen = teams.length;
   var table = '<table id="tableOne" border="0" cellpadding="5" cellspacing="0" frame="void" rules="none" summary="NBA Statistic Table">\n';
   for ( var x = 0; x < tLen; x++ ) {
      table += "<tr>\n";
      for ( var teamName in teams[ x ] ) {
         table += "<th title=\"" + teamName + "\" colspan=\"3\">Team Name: </th>\n";
         table += "<td colspan=\"3\">" + teamName + "</td>\n";
         table += "</tr>\n";
         table += "<tr>\n";
         for ( var misc in teams[ x ][ teamName ] ) {
            table += "<th colspan=\"3\">" + misc + "</th>\n";         
         } table += "</tr>\n";
         table += "<tr>\n";
         var count = 10;
         var image = new Image();
         image.src = teams[ x ][ teamName ][ "Team Logo" ];
         table += "<td style=\"background-color : #FFFFFF;\" rowspan=\"" + ( count += ( 1 * 10 )) + "\" colspan=\"3\"><img src=\"" + image.src + "\" alt=\"" + image.src + "\"></td>";
         table += "</tr>\n";
         for ( var j in teams[ x ][ teamName ][ misc ] ) {
            for ( var player in teams[ x ][ teamName ][ misc ][ j ] ) {
            table += "<tr>\n";
            table += "<td style=\"text-align : center; background-color : #E0E0E0\">" + player + "</td><td>" + teams[ x ][ teamName ][ misc ][ j ][ player ] + "</td>\n";
            table += "</tr>\n";
            }
         table += "<tr>\n";
         table += "<td>Jersey no.</td><td>#" + j + "</td>\n";
         table += "</tr>\n";
         table += "<tr>\n";
         table += "<td colspan=\"2\" style=\"background-color : #800090; height : 5px;\"> </td>\n";
         table += "</tr>\n";
         } 
      }  
   } table += "</table>";
   document.writeln( table );
} )( /* NBA Teams & Players */ )
// -->
</script>
</div>
</body>
</html>

you can easily expand all procedures inside this function. Just be careful when you edit the lines'.

Chad Gary 0 Newbie Poster · Answer 8 · 2009-08-25T04:14:21+00:00

Posting Shark,
You can ignore my last post. I was able to get rid of the brackets all together and return the following from the server.

var teams = {
		"LA Lakers":
                    {
                      "Team Logo":"C:\\wamp\\wwwNBA\\laLakersLogo.gif",
                        "0":
                           {
                            "Players":
                              {
                                "36":
                                    {
                                     "PlayerName":"Ron Artest",
                                     "Position":"Forward",
                                     "Height":"6-7 l",
                                     "Weight":"260","College":
                                     "St. Johns"
                                     },
                                 "24":
                                     {
                                      "PlayerName":"Kobe Bryant",
                                      "Position":"Guard","Height":
                                      "6-6 l","Weight":"205",
                                      "College":"Lower Marion High Sc"
                                      }
                              }
                     }
             } 
};

The only thing with this is that var tLen = teams.length is undefined. Do you know why? Can I still use the parsing js code that you provided me or will things change a little?

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.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>W3C HTML 4.01 loose DTD</title>
<style type="text/css">
<!--
td {
   border-right : 1px solid #A0A0A0;
   border-top : 1px solid #A0A0A0;
   background-color : #F1F1F1;
   color : #405060; }
th:first-child {
   border-bottom : 1px solid #A0A0A0;
   border-right : 1px solid #A0A0A0;
   background-color : #800090;
   color : yellow;
   width : 25%;
}
table {
   border : 1px solid #A0A0A0;
   border-collapse : collapse;
   text-align : left;
   width : 100%; }

// -->
</style>
<script type="text/javascript">
<!--

var teams = [ 
{ "LA Lakers" : {
   "Team Logo" : "C:\\wamp\\wwwNBA\\laLakersLogo.gif",
   Players : {
      37 : { // Jersey n#
         PlayerName : "Ron Artest",
         Position : "Forward",
         Height : "6-7",
         Weight : "260",
         College : "St. Johns" 
         },
      24 : {
         PlayerName : "Kobe Bryant",
         Position : "Guard",
         Height : "6-6",
         Weight : "205",
         College : "Lower Marion High Sc"
         }
      }
   }
}
// Add More NBA teams below >>>
 ];

// -->
</script>
</head>
<body>
<noscript>
<p> This site requires a browser that support <b>JavaScript</b>. </p> 
</noscript>
<div id="nbastats">
<script type="text/javascript">
<!--
( function() {
   var tLen = teams.length;
   var table = '<table id="tableOne" border="0" cellpadding="5" cellspacing="0" frame="void" rules="none" summary="NBA Statistic Table">\n';
   for ( var x = 0; x < tLen; x++ ) {
      table += "<tr>\n";
      for ( var teamName in teams[ x ] ) {
         table += "<th title=\"" + teamName + "\" colspan=\"3\">Team Name: </th>\n";
         table += "<td colspan=\"3\">" + teamName + "</td>\n";
         table += "</tr>\n";
         table += "<tr>\n";
         for ( var misc in teams[ x ][ teamName ] ) {
            table += "<th colspan=\"3\">" + misc + "</th>\n";         
         } table += "</tr>\n";
         table += "<tr>\n";
         var count = 10;
         var image = new Image();
         image.src = teams[ x ][ teamName ][ "Team Logo" ];
         table += "<td style=\"background-color : #FFFFFF;\" rowspan=\"" + ( count += ( 1 * 10 )) + "\" colspan=\"3\"><img src=\"" + image.src + "\" alt=\"" + image.src + "\"></td>";
         table += "</tr>\n";
         for ( var j in teams[ x ][ teamName ][ misc ] ) {
            for ( var player in teams[ x ][ teamName ][ misc ][ j ] ) {
            table += "<tr>\n";
            table += "<td style=\"text-align : center; background-color : #E0E0E0\">" + player + "</td><td>" + teams[ x ][ teamName ][ misc ][ j ][ player ] + "</td>\n";
            table += "</tr>\n";
            }
         table += "<tr>\n";
         table += "<td>Jersey no.</td><td>#" + j + "</td>\n";
         table += "</tr>\n";
         table += "<tr>\n";
         table += "<td colspan=\"2\" style=\"background-color : #800090; height : 5px;\"> </td>\n";
         table += "</tr>\n";
         } 
      }  
   } table += "</table>";
   document.writeln( table );
} )( /* NBA Teams & Players */ )
// -->
</script>
</div>
</body>
</html>

you can easily expand all procedures inside this function. Just be careful when you edit the lines'.

Chad Gary 0 Newbie Poster · Answer 9 · 2009-08-25T08:35:43+00:00

Posting Shark,

You can ignore my quotes up to this point. I finally got the desired results of my js onested object. The onnly difference between what you sent me and what is below is the array brackets, which means I won't be able to do a teams.length, but I think I can figure it out. Thanks for all your help!!!

{"LA Lakers":{
   "Team Logo":"C:\\wamp\\wwwNBA\\laLakersLogo.gif",
     "Players":{
       "36":{
            "PlayerName":"Ron Artest",
            "Position":"Forward",
            "Height":"6-7 l",
            "Weight":"260",
            "College":"St. Johns"
            },
        "24":{
             "PlayerName":"Kobe Bryant",
             "Position":"Guard",
             "Height":"6-6 l",
             "Weight":"205",
             "College":"Lower Marion High Sc"
             }
         }
     }
}

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.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>W3C HTML 4.01 loose DTD</title>
<style type="text/css">
<!--
td {
   border-right : 1px solid #A0A0A0;
   border-top : 1px solid #A0A0A0;
   background-color : #F1F1F1;
   color : #405060; }
th:first-child {
   border-bottom : 1px solid #A0A0A0;
   border-right : 1px solid #A0A0A0;
   background-color : #800090;
   color : yellow;
   width : 25%;
}
table {
   border : 1px solid #A0A0A0;
   border-collapse : collapse;
   text-align : left;
   width : 100%; }

// -->
</style>
<script type="text/javascript">
<!--

var teams = [ 
{ "LA Lakers" : {
   "Team Logo" : "C:\\wamp\\wwwNBA\\laLakersLogo.gif",
   Players : {
      37 : { // Jersey n#
         PlayerName : "Ron Artest",
         Position : "Forward",
         Height : "6-7",
         Weight : "260",
         College : "St. Johns" 
         },
      24 : {
         PlayerName : "Kobe Bryant",
         Position : "Guard",
         Height : "6-6",
         Weight : "205",
         College : "Lower Marion High Sc"
         }
      }
   }
}
// Add More NBA teams below >>>
 ];

// -->
</script>
</head>
<body>
<noscript>
<p> This site requires a browser that support <b>JavaScript</b>. </p> 
</noscript>
<div id="nbastats">
<script type="text/javascript">
<!--
( function() {
   var tLen = teams.length;
   var table = '<table id="tableOne" border="0" cellpadding="5" cellspacing="0" frame="void" rules="none" summary="NBA Statistic Table">\n';
   for ( var x = 0; x < tLen; x++ ) {
      table += "<tr>\n";
      for ( var teamName in teams[ x ] ) {
         table += "<th title=\"" + teamName + "\" colspan=\"3\">Team Name: </th>\n";
         table += "<td colspan=\"3\">" + teamName + "</td>\n";
         table += "</tr>\n";
         table += "<tr>\n";
         for ( var misc in teams[ x ][ teamName ] ) {
            table += "<th colspan=\"3\">" + misc + "</th>\n";         
         } table += "</tr>\n";
         table += "<tr>\n";
         var count = 10;
         var image = new Image();
         image.src = teams[ x ][ teamName ][ "Team Logo" ];
         table += "<td style=\"background-color : #FFFFFF;\" rowspan=\"" + ( count += ( 1 * 10 )) + "\" colspan=\"3\"><img src=\"" + image.src + "\" alt=\"" + image.src + "\"></td>";
         table += "</tr>\n";
         for ( var j in teams[ x ][ teamName ][ misc ] ) {
            for ( var player in teams[ x ][ teamName ][ misc ][ j ] ) {
            table += "<tr>\n";
            table += "<td style=\"text-align : center; background-color : #E0E0E0\">" + player + "</td><td>" + teams[ x ][ teamName ][ misc ][ j ][ player ] + "</td>\n";
            table += "</tr>\n";
            }
         table += "<tr>\n";
         table += "<td>Jersey no.</td><td>#" + j + "</td>\n";
         table += "</tr>\n";
         table += "<tr>\n";
         table += "<td colspan=\"2\" style=\"background-color : #800090; height : 5px;\"> </td>\n";
         table += "</tr>\n";
         } 
      }  
   } table += "</table>";
   document.writeln( table );
} )( /* NBA Teams & Players */ )
// -->
</script>
</div>
</body>
</html>

you can easily expand all procedures inside this function. Just be careful when you edit the lines'.