DOM XML: getElementsByTagName(...)[0] is undefined

Question

I am generating an XML file with JavaScript, when I iterate over an array of objects to enter the data in the XML it gives me the error that you see in the title. I am generating ROW nodes in which I want to put certain elements. My problem starts when I try to access X position of an element or when I try to add it to the node.

this.array.forEach((element) => {
    var node = xmlDoc.createElement("ROW");
    var row = xmlDoc.getElementsByTagName("ROW");

    var fecha = xmlDoc.createElement("DATE");
    xmlDoc.getElementsByTagName("DATE")[0].textContent = element.fecha;
    row[0].appendChild(fecha);

    var descripcion1 = xmlDoc.createElement("DESCRIPTION");
    xmlDoc.getElementsByTagName("DESCRIPTION")[0].textContent =
      element.descripcion1;
    row[0].appendChild(descripcion1);

    var descripcion2 = xmlDoc.createElement("DESCRIPTION2");
    xmlDoc.getElementsByTagName("DESCRIPTION2")[0].textContent =
      element.descripcion2;
    row[0].appendChild(descripcion2);

    var nombre = xmlDoc.createElement("NAME");
    xmlDoc.getElementsByTagName("NAME")[0].textContent = element.nombre;
    row[0].appendChild(nombre);

    rowset[0].appendChild(node);
  });

Here I leave you how I have generated the XML.

var xmlDoc = document.implementation.createDocument(null, "filename");

  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function () {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      var xmlDoc = xhttp.responseXML;
    }
    xhttp.open("GET", "filename.xml", true);
    xhttp.send();
  };

  var xmlString = "<ROWSET></ROWSET>";
  var parser = new DOMParser();
  var xmlDoc = parser.parseFromString(xmlString, "text/xml");

  var rowset = xmlDoc.getElementsByTagName("ROWSET");

At first, pull `xhttp.open` and `xhttp.send` lines out from the event handler, the request is never sent. Secondly, take a look at https://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron — Teemu, Mar 29 '21 at 10:20
Notice also, that `rowset` in the last snippet contains a single element. I suppose you've misstructured the example, it doesn't represent your real code. — Teemu, Mar 29 '21 at 10:36
I want a parent element called ROWSET in which to put child elements ROW with their own child elements. I don't want to repeat the ROWSET. @Teemu — garikoitzz, Mar 29 '21 at 10:39

ThW · Answer 1 · 2021-04-02T07:51:00.413

You try to get the new node from the document before appending it.

But you don't need to fetch the created node from the document, you already have it in a variable. Additionally ParentNode.appendChild() returns the appended node so the calls can be nested/chained.

Here is a demo:

// create a document with a "ROWSET" document element node
var xmlDoc = document.implementation.createDocument('', 'ROWSET');
// get the "ROWSET" element node
var rowSet = xmlDoc.documentElement;

// create + append a "ROW", keep it in a variable 
var row = rowSet
  .appendChild(xmlDoc.createElement('ROW'));
// create + append a "DATE", set text content 
row
  .appendChild(xmlDoc.createElement('DATE'))
  .textContent = 'A Date'
// create + append a "DESCRIPTION", create + append text node
row
  .appendChild(xmlDoc.createElement('DESCRIPTION'))
  .appendChild(xmlDoc.createTextNode('some content'));

console.dir((new XMLSerializer()).serializeToString(xmlDoc));

DOM XML: getElementsByTagName(...)[0] is undefined

1 Answers1