locked
JSON

    Question

  • I am trying to use JSON in my Windows 8 app lets say as a test I wanted to get the JSON from here... https://api.twitch.tv/kraken/channels/TrionWorlds.json

    How would I do that in my app using javascript/html5 and parse out specific information?

    I am new to JSON, so please explain any code given so I can learn it.

    Wednesday, March 27, 2013 4:55 PM

Answers

  • Sorry apparently this doesn't apply to any webpages in a webview control, or whatever it's called again...displaying an HTML file included in my project... I was however unable to get your sample to work because of the dependency of jQuery download & everything, I wanted it to be simple & easy to retrieve data & display it...

    I don't want to download libs & everything for it...all I want is some basic information to display on my page from a Twitch stream, on a webpage that's displayed to my users in the app.


    EDIT:So I will mark it as answered, that the solution is ask somewhere else, or maybe not do it at all because you have to rely on libraries & such & unable to do it yourself...
    • Edited by Maya Key Thursday, March 28, 2013 3:01 AM
    • Marked as answer by Maya Key Thursday, March 28, 2013 3:01 AM
    Thursday, March 28, 2013 3:00 AM

All replies

  • You can use WinJS.xhr to retrieve JSON data:

    WinJS.xhr({url:"https://api.twitch.tv/kraken/channels/TrionWorlds.json"}).done(function(dataString){
    var dataJSON = JSON.parse(dataString.responseText);
    //access your JSON data, for example:
    var aUrl = dataJSON.url; });


    • Edited by Ealsur Thursday, March 28, 2013 2:25 AM
    Thursday, March 28, 2013 2:24 AM
  • Thanks for the quick response, how would I do that in general...I got this...

    <!DOCTYPE html>
    <html
    	<head>
    		<script>
    			WinJS.xhr({url:"https://api.twitch.tv/kraken/channels/TrionWorlds.json"}).done(function(dataString)
    				{
    					var dataJSON = JSON.parse(dataString.responseText);
    					TestDiv=dataJSON
    				});
    		</script>
    	</head>
    	<body>
    		<div id="TestDiv">
    			JSON Data should be displayed here.
    		</div>
    	</body>
    </html>

    Is that not how it should be done in general to get a working display of the data on screen with no additional actual parsing?  Actually debugging it it says WinJS is un-defined.  I tried opening in chrome & firefox, the same thing...I tried specifying <script type="text/javascript"> as well, no change...

    I don't usually deal with stuff like this...what should I be doing to get this to work?

    EDIT:I probably messed up and it should be something like TestDiv.innerHTML=dataJSON, but it's erroring before that, so that doesn't really matter right now.

    EDIT 2: Probably should have mentioned I am displaying a page to my user made from HTML included in my project that I am trying to get the JSON on, so basically I need HTML code in general, not store app specific code...it looks like WinJS.xhr is specific to windows store apps, and isn't available on a webpage on the web, or a HTML page displayed in your windows store app.

    • Edited by Maya Key Thursday, March 28, 2013 2:42 AM
    Thursday, March 28, 2013 2:33 AM
  • Michael, this forum is for Windows 8 Store Apps developed in HTML/CSS/JS, not normal web pages.

    WinJS is a namespace of functions that is available when you create a Windows 8 Store App project with Javascript in Visual Studio 2012. You can't use any of it's features, objects or functions if it's not a Windows Store App. If you create a Windows 8 Store App and run the code I pasted it will work.

    To do what you want on a normal webpage (not a Windows 8 Store App) you could use jQuery and call:

    jQuery.getJSON("your_url",null,function(result){
    $("#TestDiv").html(result.url);
    //your result object has each of the attributes that are returned by the web url you are called, open the url on a browser and you will see the JSON object and its atributes
    });

    JSON is a way to describe a javascript object and transfer it, it has a particular notation, {"name_of_attribute1":"value", "name_of_attribute2":"value",...}, so, your web url is giving you a Javascript object serialized on JSON notation format which WinJS or jQuery will convert back to the original Javascript object with it's properties.

    You can refer the full descripcion on JSON.org.


    • Edited by Ealsur Thursday, March 28, 2013 2:53 AM
    Thursday, March 28, 2013 2:49 AM
  • Sorry apparently this doesn't apply to any webpages in a webview control, or whatever it's called again...displaying an HTML file included in my project... I was however unable to get your sample to work because of the dependency of jQuery download & everything, I wanted it to be simple & easy to retrieve data & display it...

    I don't want to download libs & everything for it...all I want is some basic information to display on my page from a Twitch stream, on a webpage that's displayed to my users in the app.


    EDIT:So I will mark it as answered, that the solution is ask somewhere else, or maybe not do it at all because you have to rely on libraries & such & unable to do it yourself...
    • Edited by Maya Key Thursday, March 28, 2013 3:01 AM
    • Marked as answer by Maya Key Thursday, March 28, 2013 3:01 AM
    Thursday, March 28, 2013 3:00 AM
  • When you use a WebView control (I assume you are working on C#), it renders the page using IE engine. In normal Javascript, you can obtain your JSON data using XMLHttpRequest, jQuery just simplifies the process. JSON.parse is a native method supported to parse the result, so you could use XMLHttpRequest to obtain the data and JSON.parse just as I showed on my example.
    Thursday, March 28, 2013 3:09 AM
  • Hi,

    You may also refer to the follow code:

     function CallData() {
            var person = { 'Name': 'Name'};
            WinJS.xhr({
                type: "POST",
                url: "http://www.xxx.com/WebService.asmx/method",
                headers: { "Content-type": "application/json" },
                data: JSON.stringify(person)
            }).then(function complete(request) {
                var resdata = request.responseText;
            }, function error(er) {
                var err = er.statusText;
            });
        }


    Roy
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Thursday, March 28, 2013 3:22 AM