Convert XML data to HTML Data

Question

This is the XML Data

<xml>
  <0>
    <id>e1</id>
    <Product name>vivo Y11s 4G Smartphone, 32GB, 6.51 HD Display Phantom Black</Product name>
    <Price>197</Price>
    <Wireless carrier>Unlocked for All Carriers</Wireless carrier>
    <Brand>VIVO</Brand>
    <Color>Black</Color>
    <Memory>3 GB</Memory>
    <Screen size>6.51 Inches</Screen size>
    <Operating system/>
  </0>
  <1>
    <id>e3</id>
    <Product name>Nokia 2720 Flip 4G Official Australian Version 2019 Unlocked Basic Mobile Phone with Social Apps, Emergency Button, 28 Days Battery Standby and Google Assistant, Ocean Black, 2.8 inches</Product name>
    <Price>114</Price>
    <Wireless carrier>Unlocked for All Carriers</Wireless carrier>
    <Brand>Nokia</Brand>
    <Color>Ocean Black</Color>
    <Memory>4 GB</Memory>
    <Screen size/>
    <Operating system>KaiOS</Operating system>
  </1>
</xml>

JavaScript:

$("#electronic1Book").click(function(){
    $.ajax({
        type: "GET",
        url:"./API/electronic1API.php?range=0-200&search=",
        success: function(xml) {

            $tableData = "<tr>";
            $(xml).find("0,1,2,3").each(function() {
                console.log(xml);
                var id = $(this).find("id").text();
                var ProductName = $(this).find("Product name").text();
                var Price = $(this).find("Price").text();
                var WirelessCarrier = $(this).find("Wireless carrier").text();
                var Brand = $(this).find("Brand").text();
                var Color = $(this).find("Color").text();
                var Memory = $(this).find("Memory").text();
                var ScreenSize = $(this).find("Screen size").text();
                var OperatingSystem = $(this).find("Operating system").text();
                $tableData += "<tr><td>" + id + "</td>";
                $tableData += "<td>" + ProductName + "</td>";
                $tableData += "<td>" + Price + "</td>";
                $tableData += "<td>" + WirelessCarrier + "</td>";
                $tableData += "<td>" + Brand + "</td>";
                $tableData += "<td>" + Color + "</td>";
                $tableData += "<td>" + Memory + "</td>";
                $tableData += "<td>" + ScreenSize + "</td>";
                $tableData += "<td>" + OperatingSystem + "</td></tr>";
                console.log($tableData);
            });
            $("#electronic1-table").append($tableData);
        }
        });

    })

I was trying to convert the XML code above into a HTML table but the code is not working

Please be more descriptive than "the code is not working". What isn't happening that should? What is happening that shouldn't? Do you get console errors, if so what are they? — Jon P, Jan 18 '23 at 21:58
The XML is invalid. Element names must start with a letter or underscore (unlike HTML, where the rules are different). See https://stackoverflow.com/a/65535106/215552 for example. — Heretic Monkey, Jan 18 '23 at 22:07

score -2 · Answer 1 · answered Jan 18 '23 at 22:10

Try this:

// parse the XML string
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(xmlString, "text/xml");

// get the root element of the XML document
var root = xmlDoc.documentElement;

// create the HTML table
var table = document.createElement("table");

// go over each child node of the root element
for (var i = 0; i < root.childNodes.length; i++) {
    var child = root.childNodes[i];

    // check if the child node is an element
    if (child.nodeType === 1) {
        // create a new row for the table
        var row = document.createElement("tr");

        // go over each child element of the child node
        for (var j = 0; j < child.childNodes.length; j++) {
            var grandChild = child.childNodes[j];

            // check if the grandchild node is an element
            if (grandChild.nodeType === 1) {
                // create a new cell for the row
                var cell = document.createElement("td");

                // set the cell's text to the grandchild's text content
                cell.innerHTML = grandChild.textContent;

                // append the cell to the row
                row.appendChild(cell);
            }
        }

        // append the row to the table
        table.appendChild(row);
    }
}
You can then append the table to a desired HTML element by using .appendChild(table)

Please note that this code snippet is a basic example, and you may need to modify it to fit your specific use case.

Convert XML data to HTML Data

1 Answers1