Organizing retrieved JSON data from YQL

Question

Hello fellow developers,

I recently had given up on a project involving AJAX request due to CORS but I finally found a work around in YQL. I have finally figured out how to retrieve my JSON data. Now I am trying to figure out how I can access this data and organize it in the way that I want. Here is my code currently.

var errormsg = "There was an ERROR I am sorry";
var requestURL = "https://www.tip.it/runescape/json/hiscore_user?old_stats=1&rsn="

$(document).ready(function() {
    $('#retrievestats').click(function() {
        var RSname = document.getElementById('Userinputform').value.toLowerCase();
        getUserData(RSname)
    });
});


function getUserData(RSname, callback) {
    var yql = 'https://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent('select * from html where url="' + requestURL + RSname + '"') + '&format=json&diagnostics=false&callback=?';

    if (!RSname) {
        alert('Please enter a username');
        return false;
    }


    $.getJSON(yql, function(data){
        console.log(data);
    });
}

As you can see, I can successfully view my data in the console of my browser but it looks as if it is all I can do. Is there any way for me to organize/separate the data? Currently the JSON gives me information in such a way

"orig_rsn":"zezima","rsn":"zezima","stats":{"overall":{"level":1280,"exp":12426850},"attack":{"level":71,"exp":815941},"defence":{"level":70,"exp":737635},"strength":{"level":70,"exp":737679},"constitution":{"level":69,"exp":697918},"range":{"level":43,"exp":53916},"prayer":{"level":46,"exp":68845},"magic":{"level":43,"exp":54901},"cooking":{"level":77,"exp":1560984},"woodcutting":{"level":73,"exp":1002436},"fletching":{"level":68,"exp":657325},

I guess what I am asking is how can I take that JSON data, and use it to dynamically replace the values in the table below according to their names

                  <tr id=>
                    <td id=Fish>Fishing</td>
                    <td id=Fishlvl>1</td>
                    <td id=Fishexp>1</td>
                  </tr>
                  <tr id=>
                    <td id=FM>Firemaking</td>
                    <td id=FMlvl>1</td>
                    <td id=FMexp>1</td>
                  </tr>
                  <tr id=>
                    <td id=Craft>Crafting</td>
                    <td id=Craftlvl>1</td>
                    <td id=Craftexp>1</td>
                  </tr>
                  <tr id=>
                    <td id=Smith>Smithing</td>
                    <td id=Smithlvl>1</td>
                    <td id=Smithexp>1</td>
                  </tr>

Answer 1

A simple solution is using jQuery and creating your HTML using template function.

 var data = {
   "orig_rsn":"zezima",
   "rsn":"zezima",
   "stats": {
     "overall": {"level":1280,"exp":12426850},
     "attack":{"level":71,"exp":815941},
     "defence":{"level":70,"exp":737635},
     "strength":{"level":70,"exp":737679},
     "constitution":{"level":69,"exp":697918},
     "range":{"level":43,"exp":53916},
     "prayer":{"level":46,"exp":68845},
     "magic":{"level":43,"exp":54901},
     "cooking":{"level":77,"exp":1560984},
     "woodcutting":{"level":73,"exp":1002436},
     "fletching":{"level":68,"exp":657325}
   }
 }

 $(document).ready(function() {

   var createRow = function(skill, level, exp){
     return   "<tr>" +
              "<td id=" + skill + ">" + skill +"</td>" + 
              "<td id=" + skill + "lvl>" + level + "</td>" +
              "<td id=" + skill +"exp>"+exp+"</td></tr>";
   };

   var createTable = function(data){
       var html = "<table class='solid'><th>Skill</th><th>Level</th>               <th>experience</th>"
       for(var propt in data.stats){
         var skill = data.stats[propt];
         html+=createRow(propt,skill["level"],skill["exp"]);
       }
       html+="</table>"; 
       return html;
   };

    $("#container").html(createTable(data));
 });

Of course, there are other ways using modern JS frameworks. But, if you want to use jQuery, that is it!

Pluker Example