prags edited this page Nov 24, 2014 · 4 revisions

Accessing Codalab data remotely

CodaLab provides an API to access various models using REST framework.

Accessing a competition

To access a competition, you need to know the competition ID which can be found on The competition ID can be seen by clicking on one of the competitions. The URL of the competition looks like, and the competition ID here is 1. The competition can be accessed using a “GET” request.

Function to make a GET request which returns JSON data for a competition using java script and Ajax:

    GET<Competition ID>/
        function getJson(url) {
            return JSON.parse($.ajax({
             type: 'GET',
             url: url,
             dataType: 'json',
             global: false,
             async: false,
             success: function (data) {
                return data;
Java script to access the JSON data for a competition and then display it on your own website:
        // get the competition data using GET ajax call
        var competition = getJson("");
        //access the title element to set the competition title
        document.getElementById("title").innerHTML = competition.title;
        //get the logo image of the competition
        document.getElementById("logo").src = competition.image_url;
        //get the description of the competition as a string and remove <p></p> tag
        competition.description = competition.description.replace("<p>","");   
        competition.description = competition.description.replace("</p>",""); 
        //set the description of the competition
        document.getElementById("competition-paragraph").innerHTML = competition.description;
        //link the competition to CodaLab
        document.getElementById("competition").href = "" + + "#learn_the_details";

Accessing a leaderboard

Leaderboard can be accessed for each phase using the following get request which returns a JSON data object.

    GET<Competition ID>/phases/<Phase Number>/leaderboard/data

Java script snippet to create a leaderboard:

     function buildDataTable() {
        var leaderboard = [];  
        //Access the leaderboard of phase 1 of the competition 1.
        var tr;
        //clear the table
        var columnSet = [];
        var headerTr$ = $('<tr/>');
        //Get the header data
        var headers = leaderboard[0].headers;
        //Populate the header in the leaderboardtable                  
        for (var j = 0; j < headers.length; j++) {
        //Populate the scores in the leaderboardtable             
        for (var i = 0; i < leaderboard[0].scores.length; i++) {
                tr = $('<tr/>');
                tr.append("<td>" + leaderboard[0].scores[i][1].username + "</td>");
                values = leaderboard[0].scores[i][1].values;
                for (var j = 0; j < values.length; j++) {
                   tr.append("<td>" + values[j].val + "</td>");                        

HTML body for adding a competition and its leaderboard

        {% load staticfiles %}
         <link rel="stylesheet" href="{{ STATIC_URL }}/css/codalab.css">
         <link rel="stylesheet" href="{{ STATIC_URL }}/css/jquery.dataTables.css">
         <link rel="stylesheet" href="{{ STATIC_URL }}/css/Main.css">
         <link rel="stylesheet" href="{{ STATIC_URL }}/css/foundation-icons.css" />  
         <script type="text/javascript" src="jquery.min.js"></script> 
         <script type="text/javascript" src="jquery.tablesorter.min.js"></script>          
          <div class="row">
            <div class="large-9 columns competitions">
                <h2>Click below to get a list of my competitions</h2><br/>
                <button id="show" class="button" onclick="showDiv()">View Competitions</button>
            <div class="row" id="all-competitions" style="display: none;">             
                <div class="large-9 columns competitions">
                    <a id="competition" href="" target="_blank">
                    <div class="competition-tile">
                      <article class="subContainer">
                        <input id="competitionID" type="hidden" value="7" />
                        <div class="competitionTileLftStrip"></div>
                        <div class="articleImageContainer">
                          <div class="subContainerPadding">
                            <img src="" id="logo">                            
                         <div class="articleTextArea">
                            <div class="subContainerPadding">
                               <div class="articleHeadingContainer">
                                 <h3 id="title"></h3>
                                 <label>Organized by Pragnya</label>
                                <div class="competition-paragraph" id="competition-paragraph">                           
             <div class="large-9 columns competitions">
                  <button id="showLeaderBoard" class="button" onclick="buildDataTable()">View LeaderBoard</button>
                  <div class="leaderboard-result-table">
                     <table class = "resultsTable dataTable" id="leaderboardtable" border="1"></table>
          <table id="leaderboardtable" border="1">