Hiding/Showing HTML on load?

Discussion in 'JavaScript' started by SeeingBlue, Jun 8, 2013.

  1. #1
    I don't know if this can be done. I imagine it's pretty simple. I just don't know enough about Javascript to build it correctly.

    I have an Enjin.com site. They allow me to use HTML modules with Javascript enabled. What I am trying to do is display whether a Twitch.tv streamer is broadcasting(Live) or not. Twitch has APIs you can use to check.
    http://api.justin.tv/api/stream/list.json?channel=defatank
    If the channel is live, it will display something like:
    [{"broadcast_part": 1, "featured": false, "channel_subscription": false,...etc.
    Code (markup):
    If they are not live it will simply display
    []
    Code (markup):
    How would I use Javascript & HTML to check the above URL and display whether or not the user is broadcasting?

    Thank you for your help.
     
    SeeingBlue, Jun 8, 2013 IP
  2. aidanriley629

    aidanriley629 Banned

    Messages:
    429
    Likes Received:
    23
    Best Answers:
    3
    Trophy Points:
    175
    #2
    Do you have the link to your Enjin site? I can't see anything from the link you posted. It's redirecting me.
     
    aidanriley629, Jun 8, 2013 IP
  3. SeeingBlue

    SeeingBlue Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #3
    I don't think you will find anything useful on my site. I believe the important details are that I only have HTML & Javascript to do this with.

    Javascript needs to check that API URL, determine whether the content is > or = "[]", then display or hide some text or image.

    None-the-less it's http://greatarchitect.enjin.com
     
    SeeingBlue, Jun 8, 2013 IP
  4. HuggyStudios

    HuggyStudios Well-Known Member

    Messages:
    724
    Likes Received:
    20
    Best Answers:
    26
    Trophy Points:
    165
    #4
    Yes you could achieve this with jQuery $.getJSON method.

    Something like:

    
    $.getJSON('http://api.justin.tv/api/stream/list.json?channel=defatank', function(data) {    // loop json elements    $.each(data, function(key, val) {        // change this to another key if it's not something returned        if(key == 'broadcast_part') {            if(val == 1) {                // channel live                alert('channel live');            }else{                // channel offline                alert('channel offline');            }        }    }); });
     
    
    Code (markup):
    I haven't tested this code but that should be enough to get you started.

    DOCS: http://api.jquery.com/jQuery.getJSON/
     
    HuggyStudios, Jun 9, 2013 IP