Link to home
Start Free TrialLog in
Avatar of Tom Powers
Tom Powers

asked on

Show data from xml file in two seperate tables one table for one team and one table for 2nd team

I'm trying to display 6 players from a xml file 3 players for the first and 3 players for the second table. the first table is one team 3 players that are the team leaders in Passing, Rushing and Receiving. The Logos and First and Last name donot show correctly on the two tables http://199.233.14.112/aspdata/nfl2/Leaderslocal.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Sports Network</title>
<style type="text/css">
.IMAGEALIGN {
	text-align: center;
	vertical-align: middle;
}
.imagealign2 {
	text-align: center;
	vertical-align: top;
}
.tbcolor {
	background-image: url(http://199.233.14.112/aspdata/nfl2/Greywall.png);
}
.tophigh {
	text-align: center;
	vertical-align: top;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var xmlPath = '.'; // '/xml/nfl/scores/real';
  var xmlGameID = 'AB-3171'; // game id only, _counter.xml will be added in the ajax call
  var counterXml = 42;
 // var counterXml = 0;

  // TODO: check these, especially the first one!
  var arrIDs = {
    "Rushing_Stats": {
      id: "Rusher" || "Rusher2",
      start: "Rush",
      attrs: {
      "ATT": "Attempts",
      "YDS": "Yards",
      "AVG": "Average",
      "TD": "Touchdowns"
      }
    },
    "Passing_Stats": {
      id: "Passer" || "Passer2" ,
      start: "Pass",
      attrs: {
        "ATT": "Attempts",
        "COMP": "Completions",
        "YDS": "Yards",
        "TD": "Touchdowns",
        "INT": "Interceptions"
      }
    },
    "Pass_Receiving_Stats": {
      id: "Receiver" || "Receiver2",
      start: "Receiving",
      attrs: {
        "REC": "Receptions",
        "YDS": "Yards",
        "AVG": "Average",
        "TD": "Touchdowns"
      }
    }
  };

  var sPlayerImagePath = 'http://images.sportsnetwork.com/nfl/atthegridiron/players/';
  var sBlankImage = 'Blank.png'; // check extension, include path if needed

 function loadData()
{
  $.ajax(
  {
    type: "GET",
    url: xmlPath + "/" + xmlGameID + '_' + counterXml + ".xml",
    dataType: "xml",
    success: function (data)
    {
      var d = $(data);
      var Play = d.find('Play');
	  var Team = d.find('Team');
      var TeamOffID = $(Play).attr('OffID');
      var CurrentLeaders = d.find('CurrentLeaders');
      var Passing = $(CurrentLeaders).find('Passing[TeamID="' + TeamOffID + '"]');
      var Rushing = $(CurrentLeaders).find('Rushing[TeamID="' + TeamOffID + '"]');
      var Receiving = $(CurrentLeaders).find('Receiving[TeamID="' + TeamOffID + '"]');
      var PlayerID = Passing.attr('PlayerID');
      var PlayerID1 = Rushing.attr('PlayerID');
      var PlayerID2 = Receiving.attr('PlayerID');
	 if ($(Team).attr('OffID') == TeamOffID) {
		   $('#teamlogo1').attr('src', 'http://199.233.14.112/aspdata/nfl2/' + $(Team).attr('ID') + ".png");
                                $('#teamlogo2').attr('src', 'http://199.233.14.112/aspdata/nfl2/' + $(Team).attr('ID') + ".png");
                                $('#teamlogo3').attr('src', 'http://199.233.14.112/aspdata/nfl2/' + $(Team).attr('ID') + ".png");
	  }
	  
	  
      $('#imgRush').attr('src', (PlayerID1 > 0 ? sPlayerImagePath + PlayerID1 + ".jpg" : sBlankImage));
      $('#imgPass').attr('src', (PlayerID  > 0 ? sPlayerImagePath + PlayerID  + ".jpg" : sBlankImage));
      $('#imgWR')  .attr('src', (PlayerID2 > 0 ? sPlayerImagePath + PlayerID2 + ".jpg" : sBlankImage));
      var Individual_Statistics = d.find('Individual_Statistics[IS_TeamID="' + TeamOffID + '"]');
      $(Individual_Statistics).children().each(function(i, AllStats){
        if (arrIDs[AllStats.nodeName])
        {
          var idselector = arrIDs[AllStats.nodeName].id;
          var nodeStart = arrIDs[AllStats.nodeName].start; // AllStats.nodeName.substr(0, AllStats.nodeName.length - 5); // need the part before Stats
          var PlayerIDforThisListing = (nodeStart == "Rush" ? PlayerID1 : (nodeStart == "Receiving" ? PlayerID2 : PlayerID));
          $(AllStats).find(nodeStart + '_Listing').each(function(i2, Pass_Listing){
            if ($(Pass_Listing).find(nodeStart + '_PlayerID').text() == PlayerIDforThisListing)
            {
              var Firstname = $(Pass_Listing).find(nodeStart + '_Firstname').text();
              var Lastname = $(Pass_Listing).find(nodeStart + '_Lastname').text();
              $('#'+idselector).html(Firstname + ' ' + Lastname);
              switch (nodeStart)
              {
                case "Rush":
                  $("#lratt") .html( $(Pass_Listing).find(nodeStart + '_' + arrIDs[AllStats.nodeName].attrs["ATT"] ).text() );
                  $("#lryds") .html( $(Pass_Listing).find(nodeStart + '_' + arrIDs[AllStats.nodeName].attrs["YDS"] ).text() );
                  $("#lravg") .html( $(Pass_Listing).find(nodeStart + '_' + arrIDs[AllStats.nodeName].attrs["AVG"] ).text() );
                  $("#gTDS")  .html( $(Pass_Listing).find(nodeStart + '_' + arrIDs[AllStats.nodeName].attrs["TD"]  ).text() );
                  break;
 
                case "Pass":
                  $("#lpatt") .html( $(Pass_Listing).find(nodeStart + '_' + arrIDs[AllStats.nodeName].attrs["ATT"] ).text() );
                  $("#lpComp").html( $(Pass_Listing).find(nodeStart + '_' + arrIDs[AllStats.nodeName].attrs["COMP"]).text() );
                  $("#lpYDS") .html( $(Pass_Listing).find(nodeStart + '_' + arrIDs[AllStats.nodeName].attrs["YDS"] ).text() );
                  $("#lpTD")  .html( $(Pass_Listing).find(nodeStart + '_' + arrIDs[AllStats.nodeName].attrs["TD"]  ).text() );
                  $("#LPINT") .html( $(Pass_Listing).find(nodeStart + '_' + arrIDs[AllStats.nodeName].attrs["INT"] ).text() );
                  break;
 
                case "Receiving":
                  $("#lrrec") .html( $(Pass_Listing).find(nodeStart + '_' + arrIDs[AllStats.nodeName].attrs["REC"] ).text() );
                  $("#lrryds").html( $(Pass_Listing).find(nodeStart + '_' + arrIDs[AllStats.nodeName].attrs["YDS"] ).text() );
                  $("#lrrAVG").html( $(Pass_Listing).find(nodeStart + '_' + arrIDs[AllStats.nodeName].attrs["AVG"] ).text() );
                  $("#lrrtd") .html( $(Pass_Listing).find(nodeStart + '_' + arrIDs[AllStats.nodeName].attrs["TD"]  ).text() );
                  break;
              }
            }
          }); // each xxx_Listing
        }
      }); // each xxx_Stats
     // ++counterXml;
    }
  }); //ajax
}
 function loadDataDef()
{
  $.ajax(
  {
    type: "GET",
    url: xmlPath + "/" + xmlGameID + '_' + counterXml + ".xml",
    dataType: "xml",
    success: function (data)
    {
      var d = $(data);
      var Play = d.find('Play');
	  var Team = d.find('Team');
      var TeamDefID = $(Play).attr('DefID');
      var CurrentLeaders = d.find('CurrentLeaders');
      var Passing = $(CurrentLeaders).find('Passing[TeamID="' + TeamDefID + '"]');
      var Rushing = $(CurrentLeaders).find('Rushing[TeamID="' + TeamDefID + '"]');
      var Receiving = $(CurrentLeaders).find('Receiving[TeamID="' + TeamDefID + '"]');
      var PlayerID3 = Passing.attr('PlayerID');
      var PlayerID4 = Rushing.attr('PlayerID');
      var PlayerID5 = Receiving.attr('PlayerID');
	 
		 
		  
			 
	  if ($(Team).attr('DefID') == TeamDefID) {
		   $('#teamlogo4').attr('src', 'http://199.233.14.112/aspdata/nfl2/' + $(Team).attr('ID') + ".png");
                                $('#teamlogo5').attr('src', 'http://199.233.14.112/aspdata/nfl2/' + $(Team).attr('ID') + ".png");
                                $('#teamlogo6').attr('src', 'http://199.233.14.112/aspdata/nfl2/' + $(Team).attr('ID') + ".png");
	  }
	  
      $('#imgRush2').attr('src', (PlayerID4 > 0 ? sPlayerImagePath + PlayerID4 + ".jpg" : sBlankImage));
      $('#imgPass2').attr('src', (PlayerID3  > 0 ? sPlayerImagePath + PlayerID3  + ".jpg" : sBlankImage));
      $('#imgWR2')  .attr('src', (PlayerID5 > 0 ? sPlayerImagePath + PlayerID5 + ".jpg" : sBlankImage));
      var Individual_Statistics = d.find('Individual_Statistics[IS_TeamID="' + TeamDefID + '"]');
      $(Individual_Statistics).children().each(function(i, AllStats){
        if (arrIDs[AllStats.nodeName])
        {
          var idselector = arrIDs[AllStats.nodeName].id;
          var nodeStart = arrIDs[AllStats.nodeName].start; // AllStats.nodeName.substr(0, AllStats.nodeName.length - 5); // need the part before Stats
          var PlayerIDforThisListing = (nodeStart == "Rush" ? PlayerID4 : (nodeStart == "Receiving" ? PlayerID5 : PlayerID3));
          $(AllStats).find(nodeStart + '_Listing').each(function(i2, Pass_Listing){
            if ($(Pass_Listing).find(nodeStart + '_PlayerID').text() == PlayerIDforThisListing)
            {
              var Firstname = $(Pass_Listing).find(nodeStart + '_Firstname').text();
              var Lastname = $(Pass_Listing).find(nodeStart + '_Lastname').text();
              $('#'+idselector).html(Firstname + ' ' + Lastname);
              switch (nodeStart)
              {
                case "Rush":
                  $("#lratt2") .html( $(Pass_Listing).find(nodeStart + '_' + arrIDs[AllStats.nodeName].attrs["ATT"] ).text() );
                  $("#lryds2") .html( $(Pass_Listing).find(nodeStart + '_' + arrIDs[AllStats.nodeName].attrs["YDS"] ).text() );
                  $("#lravg2") .html( $(Pass_Listing).find(nodeStart + '_' + arrIDs[AllStats.nodeName].attrs["AVG"] ).text() );
                  $("#gTDS2")  .html( $(Pass_Listing).find(nodeStart + '_' + arrIDs[AllStats.nodeName].attrs["TD"]  ).text() );
                  break;
 
                case "Pass":
                  $("#lpatt2") .html( $(Pass_Listing).find(nodeStart + '_' + arrIDs[AllStats.nodeName].attrs["ATT"] ).text() );
                  $("#lpComp2").html( $(Pass_Listing).find(nodeStart + '_' + arrIDs[AllStats.nodeName].attrs["COMP"]).text() );
                  $("#lpYDS2") .html( $(Pass_Listing).find(nodeStart + '_' + arrIDs[AllStats.nodeName].attrs["YDS"] ).text() );
                  $("#lpTD2")  .html( $(Pass_Listing).find(nodeStart + '_' + arrIDs[AllStats.nodeName].attrs["TD"]  ).text() );
                  $("#LPINT2") .html( $(Pass_Listing).find(nodeStart + '_' + arrIDs[AllStats.nodeName].attrs["INT"] ).text() );
                  break;
 
                case "Receiving":
                  $("#lrrec2") .html( $(Pass_Listing).find(nodeStart + '_' + arrIDs[AllStats.nodeName].attrs["REC"] ).text() );
                  $("#lrryds2").html( $(Pass_Listing).find(nodeStart + '_' + arrIDs[AllStats.nodeName].attrs["YDS"] ).text() );
                  $("#lrrAVG2").html( $(Pass_Listing).find(nodeStart + '_' + arrIDs[AllStats.nodeName].attrs["AVG"] ).text() );
                  $("#lrrtd2") .html( $(Pass_Listing).find(nodeStart + '_' + arrIDs[AllStats.nodeName].attrs["TD"]  ).text() );
                  break;
              }
			
		  
            }
          }); // each xxx_Listing
        }
      }); // each xxx_Stats
    // ++counterXml;
   
    }
     
	   
  }); //ajax
}
</script>

</head>

<body>
<table width="800" height="121" border="1" class="tbcolor">
  <tr>
    <td width="75" rowspan="4" class="tophigh"><p><img src="Blank1.gif" alt="" name="imgRush" width="53" height="68" id="imgRush"><span class="imagealign2"><img src="061.png" name="teamlogo1" width="43" height="36" id="teamlogo1"></span></p></td>
    <td colspan="4"><div align="center">Leading Rusher</div></td>
    <td width="77" rowspan="4" class="imagealign2"><img src="Blank1.gif" name="imgPass" width="53" height="68" id="imgPass"><span class="tophigh"><img src="061.png" alt="" name="teamlogo2" width="43" height="36" id="teamlogo2"></span></td>
    <td colspan="5"><div align="center">Leading Passer</div></td>
    <td width="83" rowspan="4" class="imagealign2"><img src="Blank1.gif" name="imgWR" width="53" height="68" id="imgWR"><span class="tophigh"><img src="061.png" alt="" name="teamlogo3" width="43" height="36" id="teamlogo3"></span></td>
    <td colspan="4"><div align="center">Leading Receiver</div></td>
  </tr>
  <tr>
    <td height="23" colspan="4" id="Rusher"><div align="center" id="Rusher">Rusher</div></td>
    <td colspan="5" id="Passer"><div align="center" id="Passer">Passer</div></td>
    <td colspan="4" id="Receiver"><div align="center" id="Receiver">Receiver</div></td>
  </tr>
  <tr>
    <td width="42" height="26"><div align="center">ATT</div></td>
    <td width="38"><div align="center">YDS</div></td>
    <td width="37"><div align="center">AVG </div></td>
    <td width="32"><div align="center">TD</div></td>
    <td width="39"><div align="center">ATT</div></td>
    <td width="46"><div align="center">COMP</div></td>
    <td width="35"><div align="center">YDS</div></td>
    <td width="38"><div align="center">TD</div></td>
    <td width="42"><div align="center">INT</div></td>
    <td width="37"><div align="center">REC</div></td>
    <td width="40"><div align="center">YDS</div></td>
    <td width="36"><div align="center">AVG</div></td>
    <td width="37"><div align="center">TD</div></td>
  </tr>
  <tr>
    <td height="23"><div align="center" class="imagealign2" id="lratt">lratt</div></td>
    <td><div align="center" class="imagealign2" id="lryds">lryds</div></td>
    <td><div align="center" class="imagealign2" id="lravg">lravg</div></td>
    <td><div align="center" class="imagealign2" id="gTDS">lgTDS</div></td>
    <td><div align="center" class="imagealign2" id="lpatt">lpatt</div></td>
    <td><div align="center" class="imagealign2" id="lpComp">lpComp</div></td>
    <td><div align="center" class="imagealign2" id="lpYDS">lpYDS</div></td>
    <td><div align="center" class="imagealign2" id="lpTD">lpTD</div></td>
    <td><div align="center" class="imagealign2" id="LPINT">LPINT</div></td>
    <td><div align="center" id="lrrec">lrrec</div></td>
    <td><div align="center" id="lrryds">lryds</div></td>
    <td><div align="center" id="lrrAVG">lrAVG</div></td>
    <td><div align="center" id="lrrtd">lrtd</div></td>
  </tr>
</table>
<table width="800" height="100" border="1" class="tbcolor">
  <tr>
    <td width="75" rowspan="4" class="tophigh"><img src="Blank1.gif" alt="Dude" name="imgRush2" width="53" height="68" id="imgRush2"><img src="061.png" alt="" name="teamlogo4" width="43" height="36" id="teamlogo4"></td>
    <td colspan="4"><div align="center">Leading Rusher</div></td>
    <td width="77" rowspan="4" class="imagealign2"><img src="Blank1.gif" alt="Dude" name="imgPass2" width="53" height="68" id="imgPass2"><span class="tophigh"><img src="061.png" alt="" name="teamlogo5" width="43" height="36" id="teamlogo5"></span></td>
    <td colspan="5"><div align="center">Leading Passer</div></td>
    <td width="83" rowspan="4" class="imagealign2"><img src="Blank1.gif" alt="Dude" name="imgWR2" width="53" height="68" id="imgWR2"><span class="tophigh"><img src="061.png" alt="" name="teamlogo6" width="43" height="36" id="teamlogo6"></span></td>
    <td colspan="4"><div align="center">Leading Receiver</div></td>
  </tr>
  <tr>
    <td height="23" colspan="4" id="Rusher2"><div align="center" id="Rusher2">Rusher</div></td>
    <td colspan="5" id="Passer2"><div align="center" id="Passer2">Passer</div></td>
    <td colspan="4" id="Receiver2"><div align="center" id="Receiver2">Receiver</div></td>
  </tr>
  <tr>
    <td width="42" height="26"><div align="center">ATT</div></td>
    <td width="38"><div align="center">YDS</div></td>
    <td width="37"><div align="center">AVG </div></td>
    <td width="32"><div align="center">TD</div></td>
    <td width="39"><div align="center">ATT</div></td>
    <td width="46"><div align="center">COMP</div></td>
    <td width="35"><div align="center">YDS</div></td>
    <td width="38"><div align="center">TD</div></td>
    <td width="42"><div align="center">INT</div></td>
    <td width="37"><div align="center">REC</div></td>
    <td width="40"><div align="center">YDS</div></td>
    <td width="36"><div align="center">AVG</div></td>
    <td width="37"><div align="center">TD</div></td>
  </tr>
  <tr>
    <td height="29"><div align="center" class="imagealign2" id="lratt2">lratt</div></td>
    <td><div align="center" class="imagealign2" id="lryds2">lryds</div></td>
    <td><div align="center" class="imagealign2" id="lravg2">lravg</div></td>
    <td><div align="center" class="imagealign2" id="gTDS2">lgTDS</div></td>
    <td><div align="center" class="imagealign2" id="lpatt2">lpatt</div></td>
    <td><div align="center" class="imagealign2" id="lpComp2">lpComp</div></td>
    <td><div align="center" class="imagealign2" id="lpYDS2">lpYDS</div></td>
    <td><div align="center" class="imagealign2" id="lpTD2">lpTD</div></td>
    <td><div align="center" class="imagealign2" id="LPINT2">LPINT</div></td>
    <td><div align="center" id="lrrec2">lrrec</div></td>
    <td><div align="center" id="lrryds2">lryds</div></td>
    <td><div align="center" id="lrrAVG2">lrAVG</div></td>
    <td><div align="center" id="lrrtd2">lrtd</div></td>
  </tr>
</table>
<p>&nbsp; </p>
<p>&nbsp; </p>
<script>
var myVar=setInterval(function(){myTimer()},1000);

function myTimer()
{

loadData();
loadDataDef();
}
  </script>
</body>
</html>

Open in new window

i WOULD LIKE one table Green BAY Players AND 2ND Table Eagles Players or the tables can switch cause I'm using xml attrib OffID AND DefID. OffID represents team on Offense
and DefID represents team on Defense.As Long as each table is the one team and correct info and logo from the other table.Team Logos need to switch and First and Lastnames that's really it.User generated image Here is code

Thanks EE I'll hardcode game id in Html to make it easier I have to put these files in a zip cause If I don't I get the xml file gets changed from_ to a dash.
Stuff.zip
ASKER CERTIFIED SOLUTION
Avatar of Robert Schutt
Robert Schutt
Flag of Netherlands image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Robert Schutt
Robert Schutt
Flag of Netherlands image
One thing I just saw in your code on line 33:
id: "Rusher" || "Rusher2",

Open in new window

I don't think that will work the way you may expect it to, something like try the second node if the first doesn't exist? That will have to be coded in the loop, because now it's just a string and the second part will be ignored. The || used like that will only use the second part if the first part is null/undefined (or 0, false, empty string maybe) if I'm not mistaken.
Avatar of Tom Powers
Tom Powers

ASKER

Again this guy makes it happen in javascript AND Jquery using PFM.
Rob is like Chip Kelly. I didn't think Rob's code would work in this case but flawless again PFM.
Thanks Rob