Use JQuery to get data from JSON file

Question

Overflow!

I'm currently working on a little application I have to finish for school monday. I didn't have a lot of time to make something big. So I decided, why not retrieve information of Steam's Web Api and get the stats of players.

The url to the steam api: http://api.steampowered.com/ISteamUserStats/GetUserStatsForGame/v0002/?appid=730&key=DA697BB2D106697D5F8AC7E7A2BFAC52&steamid=76561198263871727

The last parameter &steamid= represents the id of the player. Now I have found out how to get the steamid into a variable, but when trying to add the id to the rest of the url (http://api.steampowered.com/ISteamUserStats/GetUserStatsForGame/v0002/?appid=730&key=DA697BB2D106697D5F8AC7E7A2BFAC52&steamid=id should be here and fetching the data with the Ajax.getJson method.. It just doesn't work.. I'm for very experienced with JSON btw.. Can someone help me out with this?

My Web Page:

<!DOCTYPE html>
<html lang="en">
    <head>
        <!--Meta Information-->
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!--JQuery Mobile-->
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
        <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

        <!--FontAwesome-->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

        <!--Custom Styles-->
        <link href="css/style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div data-role="page" id="index">
            <div data-role="header">
                <h1>CS:GO Stats</h1>    
            </div>
            <div data-role="main" class="ui-content">
                <div class="search">
                    <label for="search">Enter SteamID:</label>
                    <input type="search" name="search" id="inputSearch" />
                    <input type="submit" id="butSearch" data-inline="true" value="Search SteamID">
                </div>
                <div id="result">

                </div>
            </div>    
        </div>
        <!--getSteamUserId function-->
        <script src="js/getSteamUserId.js"></script>
    </body>
</html>

My Javascript Code:

$(document).ready(function() {

    $('#butSearch').click(function(event) {
        var input = $('#inputSearch').val();

        $.getJSON( "http://api.steampowered.com/ISteamUserStats/GetUserStatsForGame/v0002/?appid=730&key=DA697BB2D106697D5F8AC7E7A2BFAC52&steamid=" + input, function( data ) {
            var items = [];
            $.each( data, function( key, val ) {
                items.push( "<li id='" + key + "'>" + val + "</li>" );
            });

            $( "<ul/>", {
                "class": "my-new-list",
                html: items.join( "" )
            }).appendTo( "#result" );
        });
    })

})

Now what I want is to get the stats data from the JSON file into my web page. Would anyone know how to do this? I can also see the JSON is not only a flat JSON file.. Like it has different layers (if that's a good explenation)..

Thanks in advance!

@charlietfl It's defined here: $('#butSearch').click(function(event) { var input = $('#inputSearch').val(); — Peurr
my bad...totally missed that. So what is currently happening? Have you inspected the actual request in browser dev tools network? Any CORS warnings in console? — charlietfl
do you have any errors? Unfortunately I don't know how to tell jsfiddle to load http (not secure) content :/ jsfiddle.net/63yowb62 — Wikunia
google that CORS warning error for better understanding of what it means. Can try accessing api using jsonp if api supports it, otherwise will need to use a proxy on your server — charlietfl

puemos puemos · Accepted Answer · 2016-01-16T14:03:17

Work with jsonP like here:

$.ajax({
  url: url,
  dataType: 'JSONP',
  type: 'GET',
  jsonp: 'jsonp',
  success: handler

});

Working example here

Use JQuery to get data from JSON file

2 Answers