Load xml file content into div using jquery

Question

How to load the xml file content to a div.

Here is my HTML in which I need to load XML content

<div class="editorial" id="news-container">
</div>

XML Data

<contentprogramming>
    <category name = "My t" id = "1">
        <logo>http://123.png</logo>        
        <channel name="res" id= "1" type="ecommerce">            
            <logo>http://11.png</logo>           
            <items>              
                <item id="1">
                    <image>http://11.jpg</image>
                    <title>Memory Card MSMT2G</title>
                    <details>$6.99</details>
                    <linkurl>http://www.test.com/Sony</linkurl>
                </item>
                <item id="2">
                    <image>http://i2.jpg</image>
                    <title>Apple iPad </title>
                    <details>$579.95</details>
                    <linkurl>http://www.test.com/Apple</linkurl>
                </item> 
            </items>
        </channel>
    </category>
</contentprogramming>

And xml file name is something.xml

I tried several ways but it didn't work :(

I tried the below method but didn't work.

$('something.xml').find('name').each(function() { 
    $("#news-container").append($(this).text() + "<br />");
});

I think this can help you,http://stackoverflow.com/questions/13534945/use-jquery-to-load-xml-file-edit-it-then-save-to-server-again-with-php — dreamweiver
– dreamweiver, Commented May 7, 2013 at 10:53

palaѕн · Accepted Answer · 2013-05-07 11:42:10Z

20

Try this:

// Load the xml file using ajax 
$.ajax({
    type: "GET",
    url: "something.xml",
    dataType: "xml",
    success: function (xml) {

        // Parse the xml file and get data
        var xmlDoc = $.parseXML(xml),
            $xml = $(xmlDoc);
        $xml.find('category[name="My t"] logo').each(function () {
            $("#news-container").append($(this).text() + "<br />");
        });
    }
});

Reference: 1. jQuery.ajax() 2. parseXML()

edited May 7, 2013 at 11:42

answered May 7, 2013 at 10:56

palaѕн

74.2k17 gold badges122 silver badges140 bronze badges

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

5 Comments

Sowmya Over a year ago

Please check the updated question. I have added XML data to be added. pls can u try with that data? Thanks

palaѕн Over a year ago

Can't find the name tag in your sample xml. Please check once!

Sowmya Over a year ago

name="Myt" This is the one

Josh Weston Over a year ago

As per this discussion, the XML should already be parsed when retrieved from server, so you shouldn't need to call $.parseXML(xml) again in the success callback.

Aleksey F. Over a year ago

How does it work for a dynamically generated XML document on the client side, e.g. when a page loads? And what happens when such an XML document has an associated XSLT?

dino.keco · Accepted Answer · 2013-05-07 10:55:06Z

3

You need to escape HTML special chars. Use this function before setting text into div.

function htmlSpecialChars(unsafe) {
    return unsafe
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;");
}

answered May 7, 2013 at 10:55

dino.keco

1,4011 gold badge12 silver badges18 bronze badges

Comments

Ahmed Alnahas · Accepted Answer · 2013-05-07 10:55:23Z

2

-- you must call xml file first

    $.ajax({
       url: '/something.xml',
       type: "GET",
       dataType: "xml",
       success: function (result) {
            $(result).find('name').each(function () {
                $("#news-container").append($(this).text() + "<br />");
             }
           }
       });

answered May 7, 2013 at 10:55

Ahmed Alnahas

2631 silver badge4 bronze badges

Comments

jstaab · Accepted Answer · 2015-02-28 15:31:17Z

If you have a local file you want to read like I do, you can do the following:

<input type="file" id="file" accept="text/xml">
<script type="text/javascript">
document.getElementById('file').addEventListener('change', function (evt) {
    if (!evt.target.files){
        return;
    }

    var file = evt.target.files ? evt.target.files[0] : null,
        reader = new FileReader();

    reader.onload = function (evt) {
        console.log(evt.target.result);
    };

    reader.readAsText(file);
});
</script>

This requires the user to select the file, but it does get you the contents of the file. It uses the HTML5 FileReader API.

Rohan Kumar · Accepted Answer · 2013-05-07 12:32:20Z

Try this:

var xml='<contentprogramming><category name = "My t" id = "1"><logo>http://123.png</logo><channel name="res" id= "1" type="ecommerce"><logo>http://11.png</logo> <items><item id="1"><image>http://11.jpg</image><title>Memory Card MSMT2G</title><details>$6.99</details><linkurl>http://www.test.com/Sony</linkurl></item><item id="2"><image>http://i2.jpg</image><title>Apple iPad </title><details>$579.95</details><linkurl>http://www.test.com/Apple</linkurl></item> </items></channel></category></contentprogramming>';
xmlDoc = $.parseXML( xml ),
$xml = $( xmlDoc ),
$xml.find( "category[name='My t'] logo" ).each(function () {
    $("#news-container").append($(this).text() + "<br />");
}

Please check the updated question. I have added XML data to be added. pls can u try with that data? Thanks

Collectives™ on Stack Overflow

Load xml file content into div using jquery

5 Answers 5

5 Comments

Comments

Comments

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

Comments

Comments

Comments

2 Comments

Linked

Related