Javascript 组织从YQL检索到的JSON数据

各位开发者好

由于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>

垂钓
1.
1.
生火
1.
1.
制作
1.
1.
锻造
1.
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));
 });

var数据={
“orig_rsn”：“zezima”，
“rsn”：“zezima”，
“统计数据”：{
“总体”：{“级别”：1280，“经验”：12426850}，
“攻击”：{“等级”：71，“经验”：815941}，
“防御”：{“等级”：70，“经验”：737635}，
“力量”：{“等级”：70，“经验”：737679}，
“宪法”：{“级别”：69，“经验”：697918}，
“范围”：{“级别”：43，“经验”：53916}，
“祈祷”：{“等级”：46，“经验”：68845}，
“魔法”：{“等级”：43，“经验”：54901}，
“烹饪”：{“等级”：77，“经验”：1560984}，
“木刻”：{“等级”：73，“实验”：1002436}，
“弗莱奇”：{“等级”：68，“经验”：657325}
}
}
$（文档）.ready（函数（）{
var createRow=功能（技能、级别、经验）{
返回“”+
“+技能+”+
“”+级别+“”+
“+exp+”；
};
var createTable=函数（数据）{
var html=“技能水平体验”
for（data.stats中的var propt）{
var skill=data.stats[propt]；
html+=createRow（propt，skill[“level”]、skill[“exp”]）；
}
html+=“”；
返回html；
};
$（“#容器”）.html（createTable（数据））；
});

当然，使用现代JS框架还有其他方法。但是，如果您想使用jQuery，那就是了

---

我正在做一些研究，看到其他人在谈论现代JS框架。这些框架是什么？仅仅使用它们是否有益？我是否需要改变我已经完成的任何工作来实现它们？另外，我如何将我的JSON数据从我的ajax/yql请求转换成您上面提到的变量？感谢您的函数$.getJSON以JSON格式获取数据。这与我在示例中使用的数据相同。像AngularJS这样的框架简化了这项任务。如果你正在从事一个专业项目，我真的建议你采用一些框架。Ember.js、AngularJS和React.js是最有名的。但是，您可以只用jQuery做一些令人惊奇的事情。非常感谢。一个简单的问题，我是否能够将变量“data”更改为其他变量，例如“stats”，或者数据是我必须使用的关键字“data”不是关键字。您可以选择符合需要的变量名。