Question

There is an ASP page on work intranet that returns data from numerous sensors. The data is presented in table format with several rows and columns.

I thought it would be cool if I could display a few of the outputs on our department website.

I would like to use ajax to open the ASP page and get a few data points from the resulting table.

Opening up the page with AJAX was easy enough, but I’m not sure what to do with it after that.

The table is formatted like so:

<table>
  <tr>
    <td>Data ID 1</td>
    <td>Description</td>
    <td>Data</td>
  </tr>
  <tr>
    <td>Data ID 2</td>
    <td>Description</td>
    <td>Data</td>
  </tr>
</table>

The first cell in each row is a unique ID, then the 5th column in the same row has the value I want.

function loadXMLDoc()
{
    var xmlhttp;

    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    } else {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }

    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById("testDiv").innerHTML=xmlhttp.responseText;
        }
    }

    xmlhttp.open("GET","http://plantdata/showData.asp",true);
    xmlhttp.send();
}

How can I grab the data by the unique ID?

Answer 1

xmlhttp.onreadystatechange=function() {
  if (xmlhttp.readyState==4 && xmlhttp.status==200) {
    var target = document.getElementById("testDiv");
    target.innerHTML = xmlhttp.responseText;
    extractIDs(target);
  }
}

function extractIDs(container) {
  var trs = container.getElementsByTagName("TR");

  for (var i=0; i<trs.length; i++) {
    var tds = trs[i].getElementsByTagName("TD"),
        txt = tds[0].textContent || tds[0].innerText;  // innerText for IE

    alert("row " + (i+1) + ": " + txt);
  } 
};