Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New Coder
    Join Date
    Sep 2012
    Location
    Houston, TX
    Posts
    22
    Thanks
    2
    Thanked 0 Times in 0 Posts

    JSON Parser question - repeating variables

    So i'm trying to parse the results of a JSON response from the Twitch.tv API. I could probably do it with a single stream but im listing three streams. To see the JSON response you can access it here

    http://api.twitch.tv/kraken/streams?game=DayZ&limit=3

    I guess im confused on how to parse all the information seperatly when each stream list two "name" fields with slightly different info and as far as i can tell there is no distinction between each streams info as it pertains to the fields.

    Ultimately i'm trying to get the following information on each stream into variables to pass back to the HTML on the page listing the streams

    Name:
    Viewers:
    URL:
    status:
    preview:

    If i just parse for "name" how to i pull multiple "name" fields from the proper channels... i guess i might not have a solid concept of how to parse complex data like this

  • #2
    New Coder
    Join Date
    Sep 2012
    Location
    Houston, TX
    Posts
    22
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Well i think i just figured out a part of it...

    it looks like where each streams info starts is an object and even tho there is no descriptor i think the objects would get numbered anyways...

    First streams object being 0, seconds being 1, and thirds being 2

    if that is the case it leaves me wondering how to code to get the right name field as there appears to be 2 nested under the object... and im not concerned with the one under "teams"

    here is the JSON response formatted for your convenience

    Code:
    {
    
        "_links":{
            "self":"https://api.twitch.tv/kraken/streams?game=DayZ&limit=3&offset=0",
            "featured":"https://api.twitch.tv/kraken/streams/featured",
            "followed":"https://api.twitch.tv/kraken/streams/followed",
            "next":"https://api.twitch.tv/kraken/streams?game=DayZ&limit=3&offset=3",
            "summary":"https://api.twitch.tv/kraken/streams/summary"
        },
        "streams":[
            {
                "game":"DayZ",
                "name":"live_user_rezt_",
                "viewers":320,
                "_id":3918821472,
                "_links":{
                    "self":"https://api.twitch.tv/kraken/streams/rezt_"
                },
                "broadcaster":"fme",
                "channel":{
                    "name":"rezt_",
                    "game":"DayZ",
                    "created_at":"2011-12-07T12:49:59Z",
                    "teams":[
                    ],
                    "banner":"http://static-cdn.jtvnw.net/jtv_user_pictures/rezt_-channel_header_image-65aabd52732b66d9-640x125.png",
                    "updated_at":"2012-10-04T18:27:34Z",
                    "background":"http://static-cdn.jtvnw.net/jtv_user_pictures/rezt_-channel_background_image-a3b434d34e93fd20.png",
                    "logo":"http://static-cdn.jtvnw.net/jtv_user_pictures/rezt_-profile_image-158a640158ea8b9b-300x300.jpeg",
                    "_links":{
                        "stream_key":"https://api.twitch.tv/kraken/channels/rezt_/stream_key",
                        "self":"https://api.twitch.tv/kraken/channels/rezt_",
                        "chat":"https://api.twitch.tv/kraken/chat/rezt_",
                        "commercial":"https://api.twitch.tv/kraken/channels/rezt_/commercial",
                        "videos":"https://api.twitch.tv/kraken/channels/rezt_/videos",
                        "features":"https://api.twitch.tv/kraken/channels/rezt_/features"
                    },
                    "_id":26624800,
                    "url":"http://www.twitch.tv/rezt_",
                    "mature":null,
                    "video_banner":"http://static-cdn.jtvnw.net/jtv_user_pictures/rezt_-channel_offline_image-05fa99c922e82d28-640x360.png",
                    "display_name":"Rezt_",
                    "status":"[720p] DayZ w/ (\"Chinese Guy\") | CSI Kernarus, MC Server ^_^ | Giveaway @ 6K FARROWERS! | NEW HIGHLIGHT! Investigate :3 |"
                },
                "preview":"http://static-cdn.jtvnw.net/previews/live_user_rezt_-630x473.jpg",
                "partner":true
            },
            {
                "game":"DayZ",
                "name":"live_user_sanyex",
                "viewers":28,
                "_id":3920045680,
                "_links":{
                    "self":"https://api.twitch.tv/kraken/streams/sanyex"
                },
                "broadcaster":"fme",
                "channel":{
                    "name":"sanyex",
                    "game":"DayZ",
                    "created_at":"2010-02-05T17:41:16Z",
                    "teams":[
                        {
                            "name":"d3sanc",
                            "created_at":"2012-03-21T01:50:32Z",
                            "background":"http://static-cdn.jtvnw.net/jtv_user_pictures/team-d3sanc-background_image-cfdd6ff2d6647276.png",
                            "updated_at":"2012-10-03T01:48:26Z",
                            "banner":"http://static-cdn.jtvnw.net/jtv_user_pictures/team-d3sanc-banner_image-5d9f16af23f52673-640x125.png",
                            "_id":224,
                            "_links":{
                                "self":"https://api.twitch.tv/kraken/teams/d3sanc"
                            },
                            "logo":"http://static-cdn.jtvnw.net/jtv_user_pictures/team-d3sanc-team_logo_image-bc2d34ac97a571d6-300x300.png",
                            "info":"test\n",
                            "display_name":"D3Sanc"
                        },
                        {
                            "name":"dldas",
                            "created_at":"2012-03-21T18:20:29Z",
                            "background":"http://static-cdn.jtvnw.net/jtv_user_pictures/team-dldas-background_image-c35d5f20b6be5ee0.jpeg",
                            "updated_at":"2012-10-03T01:48:25Z",
                            "banner":"http://static-cdn.jtvnw.net/jtv_user_pictures/team-dldas-banner_image-78ff51dd2bed73d2-640x125.png",
                            "_id":226,
                            "_links":{
                                "self":"https://api.twitch.tv/kraken/teams/dldas"
                            },
                            "logo":"http://static-cdn.jtvnw.net/jtv_user_pictures/team-dldas-team_logo_image-52a9ee3770cc11b9-300x300.png",
                            "info":"Die Cr\u00e8me de la Cr\u00e8me der deutschen Streaming-Scene trifft sich hier zusammen, um das ERSTE deutsche Streaming-Team zu gr\u00fcnden. \n\n\n\n\n\n\n\n\n\n",
                            "display_name":"Die Liga der aussergew\u00f6hnlichen Streamer"
                        },
                        {
                            "name":"manapot",
                            "created_at":"2012-08-07T23:21:07Z",
                            "background":"http://static-cdn.jtvnw.net/jtv_user_pictures/team-manapot-background_image-3bb0b51c00a358e2.png",
                            "updated_at":"2012-10-03T01:48:27Z",
                            "banner":null,
                            "_id":376,
                            "_links":{
                                "self":"https://api.twitch.tv/kraken/teams/manapot"
                            },
                            "logo":"http://static-cdn.jtvnw.net/jtv_user_pictures/team-manapot-team_logo_image-4ce2165280ad20b0-300x300.png",
                            "info":"\n",
                            "display_name":"The ManaPot Network"
                        },
                        {
                            "name":"tgn",
                            "created_at":"2011-12-23T06:30:14Z",
                            "background":"http://static-cdn.jtvnw.net/jtv_user_pictures/team-tgn-background_image-1d969c0af8187732.jpeg",
                            "updated_at":"2012-10-03T01:48:25Z",
                            "banner":"http://static-cdn.jtvnw.net/jtv_user_pictures/team-tgn-banner_image-f221dbf018f33148-640x125.png",
                            "_id":134,
                            "_links":{
                                "self":"https://api.twitch.tv/kraken/teams/tgn"
                            },
                            "logo":"http://static-cdn.jtvnw.net/jtv_user_pictures/team-tgn-team_logo_image-b710eca274634d81-300x300.png",
                            "info":"Building a career path for YouTubers! See http://tgn.tv\n\n",
                            "display_name":"TGN"
                        },
                        {
                            "name":"gi",
                            "created_at":"2012-07-16T15:53:26Z",
                            "background":"http://static-cdn.jtvnw.net/jtv_user_pictures/team-gi-background_image-9e1dfc81ac653b82.jpeg",
                            "updated_at":"2012-10-03T01:48:25Z",
                            "banner":"http://static-cdn.jtvnw.net/jtv_user_pictures/team-gi-banner_image-609a3917489aef3b-640x125.jpeg",
                            "_id":355,
                            "_links":{
                                "self":"https://api.twitch.tv/kraken/teams/gi"
                            },
                            "logo":"http://static-cdn.jtvnw.net/jtv_user_pictures/team-gi-team_logo_image-0387d80f4142904a-300x300.jpeg",
                            "info":"\n",
                            "display_name":"Gaming Insight"
                        }
                    ],
                    "banner":"http://static-cdn.jtvnw.net/jtv_user_pictures/sanyex-channel_header_image-7ed8e0bde3c9ed4c-640x125.png",
                    "updated_at":"2012-10-04T16:56:11Z",
                    "background":"http://static-cdn.jtvnw.net/jtv_user_pictures/sanyex-channel_background_image-d449baa32813fa27.jpeg",
                    "logo":"http://static-cdn.jtvnw.net/jtv_user_pictures/sanyex-profile_image-cffc40b33554d1f7-300x300.jpeg",
                    "_links":{
                        "stream_key":"https://api.twitch.tv/kraken/channels/sanyex/stream_key",
                        "self":"https://api.twitch.tv/kraken/channels/sanyex",
                        "chat":"https://api.twitch.tv/kraken/chat/sanyex",
                        "commercial":"https://api.twitch.tv/kraken/channels/sanyex/commercial",
                        "videos":"https://api.twitch.tv/kraken/channels/sanyex/videos",
                        "features":"https://api.twitch.tv/kraken/channels/sanyex/features"
                    },
                    "_id":10391017,
                    "url":"http://www.twitch.tv/sanyex",
                    "mature":true,
                    "video_banner":null,
                    "display_name":"SanYex",
                    "status":"\uff24\uff41\uff59\uff3a \uff4f\uff57\uff4e \uff33\uff45\uff52\uff56\uff45\uff52 - \uff33\uff41\uff4e\uff59\uff45\uff58 - \uff4d\uff49\uff54 \uff35\uff4e\uff42\uff45\uff417"
                },
                "preview":"http://static-cdn.jtvnw.net/previews/live_user_sanyex-630x473.jpg",
                "partner":true
            },
            {
                "game":"DayZ",
                "name":"live_user_myssor",
                "viewers":27,
                "_id":3919764624,
                "_links":{
                    "self":"https://api.twitch.tv/kraken/streams/myssor"
                },
                "broadcaster":"fme",
                "channel":{
                    "name":"myssor",
                    "game":"DayZ",
                    "created_at":"2011-12-13T23:13:18Z",
                    "teams":[
                    ],
                    "banner":"http://static-cdn.jtvnw.net/jtv_user_pictures/myssor-channel_header_image-e9820f27c0f86b3c-640x125.jpeg",
                    "updated_at":"2012-10-04T18:40:28Z",
                    "background":"http://static-cdn.jtvnw.net/jtv_user_pictures/myssor-channel_background_image-5272614719ee9cd4.jpeg",
                    "logo":"http://static-cdn.jtvnw.net/jtv_user_pictures/myssor-profile_image-6c7cbd5691120db1-300x300.jpeg",
                    "_links":{
                        "stream_key":"https://api.twitch.tv/kraken/channels/myssor/stream_key",
                        "self":"https://api.twitch.tv/kraken/channels/myssor",
                        "chat":"https://api.twitch.tv/kraken/chat/myssor",
                        "commercial":"https://api.twitch.tv/kraken/channels/myssor/commercial",
                        "videos":"https://api.twitch.tv/kraken/channels/myssor/videos",
                        "features":"https://api.twitch.tv/kraken/channels/myssor/features"
                    },
                    "_id":26772081,
                    "url":"http://www.twitch.tv/myssor",
                    "mature":true,
                    "video_banner":null,
                    "display_name":"Myssor",
                    "status":"DayZ Helicopter Lessons | Gearing up ! Give Away @500 followers [431/500] Come in for a chat!"
                },
                "preview":"http://static-cdn.jtvnw.net/previews/live_user_myssor-630x473.jpg",
                "partner":false
            }
        ]
    
    }

    *edit: I noticed the second "name" field is nested under the "channel" field.... is there something to referencing the object# + "channel" as well that would enable me to get that perticular "name"... im hoping im kind on the right path
    Last edited by erebus; 10-04-2012 at 09:11 PM.

  • #3
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,930
    Thanks
    56
    Thanked 550 Times in 547 Posts
    the json response is all objects within objects - you just have to figure out which objects you want to access. For me, it looks something like this...

    Code:
    <head>
    <style>
    img{
    height:200px;
    width:200px;
    }
    </style>
    </head>
    <body>
    <div id="results"></div>
    <script type="text/javascript">
    function showGame(o){
    var thediv=document.getElementById("results")
    var base=o.query.results.json.streams;
    for (var i = 0; i < base.length; i++) {
    thediv.innerHTML+="Name: "+base[i].channel.name+"<br>";
    thediv.innerHTML+="Viewers: "+base[i].viewers+"<br>";
    thediv.innerHTML+="URL: "+base[i].channel.url+"<br>";
    thediv.innerHTML+="Status: "+base[i].channel.status+"<br>";
    thediv.innerHTML+="Preview: <img src='"+base[i].preview+"'/><br>";
    thediv.innerHTML+="<br>"
    	}
    }	
    
    var myurl=encodeURIComponent("https://api.twitch.tv/kraken/streams?game=DayZ&limit=3")
    
    scr=document.createElement("script");
    scr.type="text/javascript"
    scr.src='http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20json%20where%20url%3D%22'+myurl+'%2F%22&format=json&callback=showGame';
    document.body.appendChild(scr);
    
    </script>
    </body>
    [EDIT]: just noticed you wanted the other name field. have updated the code above to grab that one.
    Last edited by xelawho; 10-04-2012 at 09:53 PM. Reason: updated code

  • #4
    New Coder
    Join Date
    Sep 2012
    Location
    Houston, TX
    Posts
    22
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    the json response is all objects within objects - you just have to figure out which objects you want to access. For me, it looks something like this...

    Code:
    <head>
    <style>
    img{
    height:200px;
    width:200px;
    }
    </style>
    </head>
    <body>
    <div id="results"></div>
    <script type="text/javascript">
    function showGame(o){
    var thediv=document.getElementById("results")
    var base=o.query.results.json.streams;
    for (var i = 0; i < base.length; i++) {
    thediv.innerHTML+="Name: "+base[i].channel.name+"<br>";
    thediv.innerHTML+="Viewers: "+base[i].viewers+"<br>";
    thediv.innerHTML+="URL: "+base[i].channel.url+"<br>";
    thediv.innerHTML+="Status: "+base[i].channel.status+"<br>";
    thediv.innerHTML+="Preview: <img src='"+base[i].preview+"'/><br>";
    thediv.innerHTML+="<br>"
    	}
    }	
    
    var myurl=encodeURIComponent("https://api.twitch.tv/kraken/streams?game=DayZ&limit=3")
    
    scr=document.createElement("script");
    scr.type="text/javascript"
    scr.src='http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20json%20where%20url%3D%22'+myurl+'%2F%22&format=json&callback=showGame';
    document.body.appendChild(scr);
    
    </script>
    </body>
    [EDIT]: just noticed you wanted the other name field. have updated the code above to grab that one.
    Excellent... that makes perfect sense... i can understand almost all of that minus this peice....

    Code:
    scr.src='http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20json%20where%20url%3D%22'+myurl+'%2F%22&format=json&callback=showGame';
    document.body.appendChild(scr);
    what exactly is that doing?

  • #5
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,930
    Thanks
    56
    Thanked 550 Times in 547 Posts
    that's just a thing that uses the yahoo yql to get the json data into the page. If you are using an API they probably have their own method.

  • #6
    New Coder
    Join Date
    Sep 2012
    Location
    Houston, TX
    Posts
    22
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Looking at the way you wrote your script i'm wondering if that is possible best practice to implement it onto my page...

    I have a div with alot of formatting and other html and i had filler images, and ipsum text for the design process. Now i want to replace with the images and text im extracting from this JSON query....

    If i use something likethis for instance

    Code:
    document.getElementById("streamlogo1").src=base[0].channel.logo;
    Then there is a moment where the images are defualt and then change to the proper image....

    Would the best practice way of implementing the JSON links and images be to use the document.write in the same mannor you did and just include the formatting HTML into the document.write allowing JS to essentially write that portion of the site including all HTML aspects

    or is there another way that's considered best practice?

    * correction: you utilized the thediv.innerHTML which since this code all exists inside a div would be applicable.. would this be best practice? cause i would have to include more embeded <div> into the html the thediv.innerHTML was genertaing to maintain formatiing
    Last edited by erebus; 10-05-2012 at 04:36 PM.

  • #7
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,930
    Thanks
    56
    Thanked 550 Times in 547 Posts
    best practice, from what I understand, is to have the js do as little as possible and the html and css do as much as possible.

    you set up the structure with a skeleton html, do all of your styling in css and let the js "fill in" the bits that you have no control over - basically the text, links and image paths from your JSON.

    note that document.write and innerHTML are two very different methods and the former is pretty much frowned on for all but very specialised circumstances.

    it's also worth noting, maybe, that things don't have to exist yet for them to be styled by css once they do come into existence - in my code for example the css specifies image dimensions, but the images are "created" later.

    if you have div id's with incrementing numbers, you might look at how you can populate them more dynamically, for example:

    Code:
    document.getElementById("streamlogo"+i+1).src=base[i].channel.logo;
    hopefully that answers your question, although I was a little unsure about what you were asking. If you'd like to post your code (or a portion of it) maybe it will become clearer.

  • #8
    New Coder
    Join Date
    Sep 2012
    Location
    Houston, TX
    Posts
    22
    Thanks
    2
    Thanked 0 Times in 0 Posts
    if it could help... sure

    Code:
    <div class="image-articles articles">
                <div class="cl">&nbsp;</div>
                <div class="article">
                  <div class="cl">&nbsp;</div>
                  <div class="image"> <a href="http://dayzlive.com/"><img src="images/erebus.gif" id="streamlogo1" alt="" /></a> </div>
                  <div class="cnt">
                    <h4 id="streamname1"><a href="http://dayzlive.com/">#1 Stream</a></h4>
                    <p id="streaminfo1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum molestie </p>
                  </div>
                  <div class="cl">&nbsp;</div>
                </div>
                <div class="article">
                  <div class="cl">&nbsp;</div>
                  <div class="image"> <a href="http://dayzlive.com/"><img src="images/freckelzicon.jpg" id="streamlogo2" alt="" /></a> </div>
                  <div class="cnt">
                    <h4 id="streamname2"><a href="http://dayzlive.com/">#2 Stream</a></h4>
                    <p id="streaminfo2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum molestie </p>
                  </div>
                  <div class="cl">&nbsp;</div>
                </div>
                <div class="article">
                  <div class="cl">&nbsp;</div>
                  <div class="image"> <a href="http://dayzlive.com/"><img src="images/sacriel.jpeg" id="streamlogo3" alt="" /></a> </div>
                  <div class="cnt">
                    <h4 id="streamname3"><a href="http://dayzlive.com/">#3 Stream</a></h4>
                    <p id="streaminfo3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum molestie </p>
                  </div>
                  <div class="cl">&nbsp;</div>
                </div>
    This is the existing code... the things marked with ID's streamlogo1,2, and 3 are to be replaced with the logo variable...

    the streamname1,2 and 3 to be replaced with the channel.name variable

    and i also like to insert the viewers into the begining of the ipsum text..

    i tried just replaceing the elements but there is a delay where you see the old info for a moment and then it gets replaced... which is not acceptable.. here is that code by the way...

    Code:
    <script type="text/javascript">
    function showGame(o){
    var thediv=document.getElementById("results")
    var base=o.query.results.json.streams;
    for (var i = 0; i < base.length; i++) {
    document.getElementById("streamlogo1").src=base[0].channel.logo;
    document.getElementById("streamlogo2").src=base[1].channel.logo;
    document.getElementById("streamlogo3").src=base[2].channel.logo;
    
    document.getElementById("streamname1").innerHTML=base[0].channel.name;
    document.getElementById("streamname2").innerHTML=base[1].channel.name;
    document.getElementById("streamname3").innerHTML=base[2].channel.name;
    
    document.getElementById("streaminfo1").innerHTML="<b>Viewers: "+base[0].viewers+"</b><br><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum molestie urna...</p>";
    document.getElementById("streaminfo2").innerHTML="<b>Viewers: "+base[1].viewers+"</b><br><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum molestie urna</p>";
    document.getElementById("streaminfo3").innerHTML="<b>Viewers: "+base[2].viewers+"</b><br><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum molestie urna</p>";
    	}
    }	
    
    var myurl=encodeURIComponent("https://api.twitch.tv/kraken/streams?game=DayZ&limit=3")
    
    scr=document.createElement("script");
    scr.type="text/javascript"
    scr.src='http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20json%20where%20url%3D%22'+myurl+'%2F%22&format=json&callback=showGame';
    document.body.appendChild(scr);
    </script>

  • #9
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,930
    Thanks
    56
    Thanked 550 Times in 547 Posts
    here's what I was talking about filling them out more dynamically:
    Code:
    function showGame(o){
    var thediv=document.getElementById("results")
    var base=o.query.results.json.streams;
    for (var i = 0; i < base.length; i++) {
    document.getElementById("streamlogo"+(i+1)).src=base[i].channel.logo;
    document.getElementById("streamname"+(i+1)).innerHTML=base[i].channel.name;
    document.getElementById("streaminfo"+(i+1)).innerHTML="<b>Viewers: "+base[i].viewers+"</b><br><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum molestie urna...</p>";
    	}
    }
    as for the existing content being shown first, there's nothing much you can do about that. that content gets overwritten after the script has made a request for the info and the sending page has sent it back. If you don't want that content to show on page load, why do you have it coded there?

    I don't understand the bit about inserting the viewers into the beginning of the ipsum text. Do you mean the text that appears on page load? in that case you would change that line to:
    Code:
    document.getElementById("streaminfo"+(i+1)).innerHTML="<b>Viewers: "+base[i].viewers+"</b> "+document.getElementById("streaminfo"+(i+1)).innerHTML;

  • #10
    New Coder
    Join Date
    Sep 2012
    Location
    Houston, TX
    Posts
    22
    Thanks
    2
    Thanked 0 Times in 0 Posts
    the add viewers part was already added in the script i attached so its already integrated...

    I like the dynamic way of doing the script... if for no other reason then for the fact that i will continue to work even if i want a list that is longer then three... infact there is no reason that it wouldent work for any number of returns from the JSON request...

    And yes... i guess i could leave the, to be inserted, portions blank so the only thing to load on the page will be the inserted content... which would alleviate the changing of content and appear to be more of a fraction of a second loading time...

    Id like to take a moment to really thank you for your assistance, as im sure you may have guessed i'm very new to javascript. However, despite you providing a peice of code that ill most likely use directly... minus utilizing the API way to pull the info as opposed to the yahoo way... i still managed to learn a considerable amount in our exchange about what i should and shouldn't be looking for when trying to achieve things of this nature. Not to mention ill have to write slightly different versions of the same thing for two other sections of the page that now have a stunning example and reference for...

    I dont see a reputation addon for this forum, pls let me know if there is one... either way thank you!

    Final question and ill consider the thread solved... does the onload event happens after the HTML and therefore all the ID's are created correct? would that be how you would personally trigger the function?

    *edit: Found the reputation button.. + 1 rep!

    *edit: nevermind, in asking the question i looked again and realized how he function is already being called... lol
    Last edited by erebus; 10-05-2012 at 06:42 PM.

  • #11
    New Coder
    Join Date
    Sep 2012
    Location
    Houston, TX
    Posts
    22
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Interesting side note...

    and im not sure if its due to the fact that the load time decreased by not having to preload the content and then replace it... but by removed the content that was coded there and leaving the fields blank to be filled by the script... the delay is almost gone and the section appears to load instantly... by not just taking the final step of removing the stock content once i had the actual content i created a delay that wouldent have existed anyways... if that makes sense...

  • #12
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,930
    Thanks
    56
    Thanked 550 Times in 547 Posts
    a lot depends on response times. Possibly once you start using the API you will notice a difference from the time it takes yahoo to retrieve the info as well. If it's better or worse or variable depends on a lot of things out of your control. You could consider having one of those whirly "loading" things if you don't want your users to be put off by a blank screen.

    if you are interested in making it really dynamic, you might consider creating the html on the fly, so that you can load in as many games as you like and not have to worry about adding extra html to accommodate...

    Code:
    <body>
    
    <div id="results"></div>
    
    <script type="text/javascript">
    function showGame(o){
    var thediv=document.getElementById("results")
    var base=o.query.results.json.streams;
    for (var i = 0; i < base.length; i++) {
    var div1=document.createElement("div");
    div1.className="article";
    var div2=document.createElement("div");
    div2.className="cl";
    div1.appendChild(div2);
    var div3=document.createElement("div");
    div3.className="image";
    var link=document.createElement("a");
    link.href="http://dayzlive.com/";
    var pic=document.createElement("img");
    pic.src=base[i].channel.logo;
    link.appendChild(pic);
    div3.appendChild(link);
    div1.appendChild(div3)
    var div4=document.createElement("div");
    div4.className="cnt";
    var h4=document.createElement("H4");
    h4.innerHTML=base[i].channel.name;
    div4.appendChild(h4);
    var p1=document.createElement("p");
    p1.innerHTML="<b>Viewers: "+base[i].viewers+"</b> "
    div4.appendChild(p1);
    div1.appendChild(div4);
    var div5=document.createElement("div");
    div5.className="cl";
    div1.appendChild(div5);
    thediv.appendChild(div1)
    
    	}
    }	
    
    var myurl=encodeURIComponent("https://api.twitch.tv/kraken/streams?game=DayZ&limit=3")
    
    scr=document.createElement("script");
    scr.type="text/javascript"
    scr.src='http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20json%20where%20url%3D%22'+myurl+'%2F%22&format=json&callback=showGame';
    document.body.appendChild(scr);
    </script>			
    			
    </body>

  • #13
    New Coder
    Join Date
    Sep 2012
    Location
    Houston, TX
    Posts
    22
    Thanks
    2
    Thanked 0 Times in 0 Posts
    thanks, ill study that code for a future application i can foresee already. As for this instance it literly always going to be for that JSON request and always displaying the 3 results only... so the last function works like a charmer...

    Ill toss this one here before making a thread on what could be a very simple answer... not to mention you seem sharp and id love your opinion on it in particular. I only have space for about 77 characters of the status.. then i would like to cut off the status and append it with ... or something indicating there is additional text that was cut off... i modified the code to do this... It appears to work but im curios if this would be your implentation as well...

    Code:
    function showGame(o)
    {
       var thediv = document.getElementById("results")
       var base = o.query.results.json.streams;
       for (var i = 0; i < base.length; i ++ )
       {
          document.getElementById("streamlogo" + (i + 1)).src = base[i].channel.logo;
          document.getElementById("streamname" + (i + 1)).innerHTML = base[i].channel.name;
          var status = base[i].channel.status
          if (status.length > 77)
          {
          var statusubstr = status.substr(0,76)
          document.getElementById("streaminfo" + (i + 1)).innerHTML = "<b>Viewers: " + base[i].viewers + "</b><br><p>" + statusubstr + "... </p>";
          }
          else
          {
          document.getElementById("streaminfo" + (i + 1)).innerHTML = "<b>Viewers: " + base[i].viewers + "</b><br><p>" + status + " </p>";
          }
       }
    }
    However, how do you accommodate for ['s and various other characters that don't take up that much space and some characters that do take up allot of space to best fit as much as you can into the area? or is this a concern?
    Last edited by erebus; 10-05-2012 at 08:03 PM.

  • #14
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,930
    Thanks
    56
    Thanked 550 Times in 547 Posts
    I don't know if it is a concern - that would be up to you I guess. This definitely seems like a topic for a new thread, but I would be happy with the way you are doing things. The only other possibility would be to actually measure the space taken up and decide how many pixels you want to dedicate. The example below gives 400px to the text before cutting it off and adding the dots. If you want to change that you have to do it in the "content" css and the checkLength function... it seems like more trouble than it's worth, but it was an interesting little exercise...

    Code:
    <head>
    <style>
    #test{
    position:absolute;
    visibility:hidden;
    }
    
    .content{
    width: 400px;
    display:inline-block;
    overflow:hidden;
    white-space:nowrap;
    }
    </style>
    </head>
    <body>
    
    <span id="test"></span>
    <span class="content" id="span1"></span></br>
    <span class="content" id="span2"></span>
    <script type="text/javascript">
    
    
    function checkLength(el){
    var thespan=document.getElementById("test")
    thespan.innerHTML=el.innerHTML;
    if(thespan.clientWidth>400){
    var dots=document.createElement("span");
    dots.innerHTML="...";
    el.parentNode.insertBefore( dots, el.nextSibling );
    }
    }
    var str="an incredibly long piece of text that just seems to go on and on and on and doesn't really have to be this long but that's the way it came out anyway";
    var target=document.getElementById("span1")
    target.innerHTML=str;
    checkLength(target)
    
    var str2="quite a short string";
    var target=document.getElementById("span2")
    target.innerHTML=str2;
    checkLength(target)
    </script>			
    			
    </body>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •