Load data from an external xml file with javascript or jquery

Question

Hi,

I have an xml file that looks like this:

<?xml version="1.0"?>
<sendSound enable="true" autoPlay="true">
    <item name="Gasp for surprise" src="flashsound/gasp.mp3"></item>
    <item name="Giggle" src="flashsound/hehe.mp3"></item>
    <item name="Say hello" src="flashsound/hello.mp3"></item>
</sendSound>

I want to extract the data to get a list like this on the console logs

Gasp for surprise
Giggle
Say hello

how can I do it with javascript or jquery? This is my code so far:

var users = xml.getElementsByTagName("sendSound");
for(var i = 0; i < users.length; i++) {
    var user = users[i];
    var names = user.getElementsByTagName("item");
    for(var j = 0; j < names.length; j++) {
        console.log(names[j].getAttribute("name"));
    }
}

Thank you.

You could do an XMLHttpRequest developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/… — user4616966
– user4616966, Commented Apr 4, 2018 at 22:07
For parsing, take a look here: w3schools.com/xml/xml_parser.asp — user4616966
– user4616966, Commented Apr 4, 2018 at 22:08
Working on an answer right now. Hopefully it will help, if not, I have failed the Stack Overflow gods. — user4616966
– user4616966, Commented Apr 4, 2018 at 22:15
I'm deleting my answer I obviously can't code correctly when I have no way of debugging the darn thing. gl my friend — user4616966
– user4616966, Commented Apr 4, 2018 at 22:39

score 2 · Accepted Answer · 2018-04-04 22:41:29Z

2

This is with jQuery and a little vanilla.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery.parseXML demo</title>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>


<script>
    $.get( "./file.xml", function( data ) {
    var xml = new XMLSerializer().serializeToString(data);
    var xmlDoc = $.parseXML( xml );
    var xml = $( xmlDoc );
    var users = xml.find( "sendSound" );

    for(var i = 0; i < users.length; i++) {
        var user = users[i];
        var names = user.getElementsByTagName("item");
        for(var j = 0; j < names.length; j++) {
            console.log(names[j].getAttribute("name"));
        }
    }
});

</body>
</html>

edited Apr 4, 2018 at 22:41

answered Apr 4, 2018 at 22:21

user6434796

Sign up to request clarification or add additional context in comments.

1 Comment

Cain Nuke Over a year ago

But thats not for getting the data from an external file.

therightstuff · Accepted Answer · 2023-01-28 12:12:50Z

I found this solution for achieving this without dependencies like jQuery, but it needed a bit of tweaking so here's my version:

function XMLtransformation(xslUrl, xmlUrl) {
    const errorMessage = 'Unable to load the content';
    const parser = new DOMParser();

    // attempt to load the XSL file
    const xslRequest = new XMLHttpRequest();
    xslRequest.open('GET', xslUrl, false);  // `false` makes the request synchronous
    xslRequest.send(null);

    if (xslRequest.status < 300) {
        const xslStylesheet = parser.parseFromString(xslRequest.response, "application/xml");
        const xsltProcessor = new XSLTProcessor();
        xsltProcessor.importStylesheet(xslStylesheet);

        const xmlRequest = new XMLHttpRequest();
        xmlRequest.open('GET', xmlUrl, false);
        xmlRequest.send(null);

        if (xmlRequest.status < 300) {
            const htmlDocument = xsltProcessor.transformToDocument(
                parser.parseFromString(xmlRequest.response, "application/xml"),
                document
            );

            return htmlDocument.documentElement.outerHTML;
        } else {
            console.error('xml load failure:');
            console.error(xmlRequest.status, xmlRequest.responseText);
        }
    } else {
        console.error('xsl load failure:');
        console.error(xslRequest.status, xslRequest.responseText);
    }

    return errorMessage;
}

Collectives™ on Stack Overflow

Load data from an external xml file with javascript or jquery

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related