从 YQL 组织检索到的 JSON 数据

Question

各位开发者您好，

我最近因为 CORS 而放弃了一个涉及 AJAX 请求的项目，但我终于在 YQL 中找到了解决方法。我终于想出了如何检索我的 JSON 数据。现在我试图弄清楚如何访问这些数据并以我想要的方式组织它。这是我目前的代码。

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);
    });
}

如您所见，我可以在浏览器的控制台中成功查看我的数据，但看起来我只能这样做了。我有什么方法可以组织/分离数据吗？目前 JSON 以这种方式为我提供信息

"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},

我想我要问的是如何获取该 JSON 数据，并根据它们的名称使用它来动态替换下表中的值

                  <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

一个简单的解决方案是使用 jQuery 并使用模板函数创建 HTML。

 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));
 });

当然，还有其他使用现代 JS 框架的方法。但是，如果你想使用 jQuery，就是这样！

Pluker Example