组委会检索JSON数据从YQL

Question

你好的开发伙伴们，

最近，我已经放弃了包括AJAX请求一个项目，由于CORS，但我终于找到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