why does my xml request not work properly? Cannot read object of null?

Question

I'm trying to load data into a table element from an xml file, for some reason, it is throwing an error when I call xmldoc.getElementsByTagName saying that it is null Here is my xml doc

<?xml version="1.0" encoding="UTF-8"?>
<table>
<row><td>0</td><td>0</td><td>0</td><td>1</td><td>1</td><td>2</td><td>9</td><td>1</td><td>0</td></row>
<row><td>1</td><td>1</td><td>0</td><td>1</td><td>9</td><td>1</td><td>0</td><td>0</td><td>0</td></row>
<row><td>9</td><td>1</td><td>0</td><td>1</td><td>1</td><td>1</td><td>0</td><td>0</td><td>0</td></row>
<row><td>0</td><td>0</td><td>0</td><td>1</td><td>1</td><td>2</td><td>9</td><td>1</td><td>0</td></row>
<row><td>1</td><td>1</td><td>0</td><td>1</td><td>9</td><td>1</td><td>0</td><td>0</td><td>0</td></row>
<row><td>9</td><td>1</td><td>0</td><td>1</td><td>1</td><td>1</td><td>0</td><td>0</td><td>0</td></row>
</table>

And here is my Javascript function

function getMineField() {
    var request = new XMLHttpRequest();
    request.open("GET", "field.xml", false);
    request.send(null);

// THE FOLLOWING CHECK CAN BE COMMENTED OUT WHEN USED 
// WITH A LOCAL FILE (DEPENDING ON YOUR BROWSER).  SAFARI ON A
// MAC RETURNS A STATUS OF ZERO WHEN USING XMLHttpRequest WITH
// A LOCAL FILE.

var main = document.getElementById("main");
var xmldoc = request.responseXML;
// THE FOLLOWING CODE USES THE SAME XML STRUCTURE (AND A FEW OF THE
// SAME VARIABLE NAMES) AS Example 21-7 IN JavaScript: The Definitive Guide
// BY DAVID FLANAGAN, BUT THIS EXAMPLE IS A LOT SIMPLER.
var xmlrows = xmldoc.getElementsByTagName("row");
var row = xmlrows.length;
for (var r = 0; r < row; r++) {
   var xmlrow = xmlrows[r];
    var tr = document.createElement('tr')
    for (var c = 0; c < row; c++)
        {
           //html += "Name: " + xmlrow.getAttribute("name");
            var td = document.createElement("td")
           // NOTE THAT getElementsByTagName RETURNS A LIST 
            var tdata = xmlrow.getElementsByTagName("td")[c];
            console.log(tdata)
            td.innerHTML=tdata.firstChild.data;
            tr.appendChild(td);
        }
    main.appendChild = xmlrow;
}
}

If javascript is required to understand the question, then that needs to be a tag, not `xml` alone. — Charles Duffy, Nov 29 '16 at 00:54
Beyond that -- might you consider modifying your code so folks can actually run it? This is what Stack Snippets are for, for instance -- allowing JavaScript problems to be demonstrated in the visitor's browser. See http://stackoverflow.com/help/mcve for a general introduction to what we look for in code samples here -- minimal, yes, but also complete enough that someone else can run it and verify the problem. — Charles Duffy, Nov 29 '16 at 00:59

score 1 · Answer 1 · edited May 23 '17 at 12:01

XMLHttpRequest() is an asynchronous call. In your code you are not waiting for the response but you are trying to use the request straight away. The request will be null until a response is returned.

This is how you should approach it:

function getMineField() {
    var request = new XMLHttpRequest();

    //here we define what to do with the response once returned:
    request .onreadystatechange = function() {
        if (request .readyState == 4) {
            //read the xml here:
            var xmldoc = request.responseXML;
            // THE FOLLOWING CODE USES THE SAME XML STRUCTURE (AND A FEW OF THE
            // SAME VARIABLE NAMES) AS Example 21-7 IN JavaScript: The Definitive Guide
            // BY DAVID FLANAGAN, BUT THIS EXAMPLE IS A LOT SIMPLER.
            var xmlrows = xmldoc.getElementsByTagName("row");
            var row = xmlrows.length;
            for (var r = 0; r < row; r++) {
               var xmlrow = xmlrows[r];
                var tr = document.createElement('tr')
                for (var c = 0; c < row; c++)
                    {
                       //html += "Name: " + xmlrow.getAttribute("name");
                        var td = document.createElement("td")
                       // NOTE THAT getElementsByTagName RETURNS A LIST 
                        var tdata = xmlrow.getElementsByTagName("td")[c];
                        console.log(tdata)
                        td.innerHTML=tdata.firstChild.data;
                        tr.appendChild(td);
                    }
                main.appendChild = xmlrow;
            }

        }
    }



    // THE FOLLOWING CHECK CAN BE COMMENTED OUT WHEN USED 
    // WITH A LOCAL FILE (DEPENDING ON YOUR BROWSER).  SAFARI ON A
    // MAC RETURNS A STATUS OF ZERO WHEN USING XMLHttpRequest WITH
    // A LOCAL FILE.

    var main = document.getElementById("main");
    //perform the request, once there is a result it will invoke the method above onreadystatechange
    request.open("GET", "field.xml", false);
    request.send(null);
}

This is untested, but it should give you an idea. More information in the answers here or documentation here

This doesn't quite work, I still have the same problem. the problem is on these lines var xmldoc = request.responseXML; var xmlrows = xmldoc.getElementsByTagName("row"); — Dean, Nov 29 '16 at 01:31

score 0 · Answer 2 · answered Nov 29 '16 at 17:55

0

The problem was when I appended the xml row to my main variable, what I should have done is appended the element I made named "tr"

answered Nov 29 '16 at 17:55

Dean

57
1
12

why does my xml request not work properly? Cannot read object of null?

2 Answers2