CODEWITHSUNDEEP
javascriptjqueryhtmlxml
Cameron Guthrie
Cameron Guthrie

Reputation: 141

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

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.

Upvotes: 0

Views: 195

Answers (1)

Praveen
Praveen

Reputation: 56509

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!

Upvotes: 1

Related Questions