0

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.

Amir
  • 1,328
  • 2
  • 13
  • 27
Cameron Guthrie
  • 141
  • 1
  • 9
  • What is the problem with the current code? – srquinn Dec 09 '13 at 23:18
  • @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

    Cartography!

     – Cameron Guthrie Dec 09 '13 at 23:20
  • you can't fetch xml data from another site using js without using CORS. – dandavis Dec 09 '13 at 23:33
  • Do you have access to the XML doc? Because Cross Origins restricts in fiddle – srquinn Dec 09 '13 at 23:34
  • http://www.html5rocks.com/en/tutorials/cors/ – srquinn Dec 09 '13 at 23:35

1 Answers1

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!

Praveen
  • 55,303
  • 33
  • 133
  • 164
  • It turns out after some digging that I am suffering from CORS, do you know a simple way of circumventing this? – Cameron Guthrie Dec 10 '13 at 08:53
  • @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 http://stackoverflow.com/a/19866904/1671639 – Praveen Dec 10 '13 at 08:55