How do I extract data from xml and post to a div using jquery/javascript

Question

I am trying to get the title for a twitch.tv stream from an xml file using either jQuery or JavaScript and then post that title to a div (as a section header). The title is found in the <status> section of the xml file.

Below the code I currently have which doesn't seem to be working:

$(document).ready(function(){
    $.ajax({
            type: "GET",
            url: "http://www.twitch.tv/meta/koibu.xml",
            dataType: "xml",

            success: function(xml) {
                    var xmlDoc = $.parseXML(xml),
                            $xml = $(xmlDoc);
                    $(xml).find('meta status').each(function(){
                            $('#block').append("<h2>" + $(this).text() + "</h2>");
                    });
            }
    });
});

Here is a jsfiddle -with my broken script in- to play with.

Edit: solved it using a json call instead of reading xml

        $(document).ready(function(){
            var names = ["koibu"];

            var obj = jQuery.parseJSON('{"name": {"life": "{life}","logo": "{logo}","status": "{status}","preview": "{preview}","url": "{url}"}}');

            grabJSON();

            function grabJSON() {
                setTimeout(grabJSON,1000);
                for (index = 0; index < names.length; ++index) {

                    $.getJSON("https://api.twitch.tv/kraken/channels/" + names[index] + "/?callback=?", function (json) {
                        $('#lefttitle').empty(),
                        $('#lefttitle').append("<h2>" + json.status + "</h2>");

                    });
                }
            }
        });

This also allows me to set up a nice little array to grab more data from multiple channels if I want to extend it in future.

@jibsales I'm attempting to append a header with the text from the status section of the xml file to the '#block' div, however this script doesn't work and I have no idea why. edit: for instance the current title of the stream is 'Cartography!'. The desired effect is for the #block to be displaying <h2>Cartography!</h2> — Cameron Guthrie
– Cameron Guthrie, Commented Dec 9, 2013 at 23:20
you can't fetch xml data from another site using js without using CORS. — dandavis
– dandavis, Commented Dec 9, 2013 at 23:33
Do you have access to the XML doc? Because Cross Origins restricts in fiddle — srquinn
– srquinn, Commented Dec 9, 2013 at 23:34

Praveen · Accepted Answer · 2013-12-10 05:44:41Z

1

If you're not suffering from CORS, then the actual problem is below

$(xml).find('status').each(function(){
    $('#block').append("<h2>" + $(this).text() + "</h2>");
});

xml variable represents the unparsed XML.

It has to like

$xml = $(xmlDoc);
$xml.find('status').each(function(){
    $('#block').append("<h2>" + $(this).text() + "</h2>");
});

I managed to get your XML file, and the status tag contains Monday Mafia!

answered Dec 10, 2013 at 5:44

Praveen

56.7k35 gold badges137 silver badges169 bronze badges

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

2 Comments

Cameron Guthrie Over a year ago

It turns out after some digging that I am suffering from CORS, do you know a simple way of circumventing this?

Praveen Over a year ago

@CameronGuthrie Simple way!! if the datatype is a JSON, then changing the dataType to jsonp will solve CORS. But in your case it is not possible. SOLUTION: Only way to host both the html and xml files in same server. I too had a same problem, check my question stackoverflow.com/a/19866904/1671639

Collectives™ on Stack Overflow

How do I extract data from xml and post to a div using jquery/javascript

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related