衛報API，JSON解析jquery/javascript

Question

所以我從衛報API的開放平臺JSON格式的數據我想解析這個在jquery中，我當前堅持嘗試顯示結果到我的HTML div。

數據的格式如下：Guardian JSON results

我的代碼，我試圖用是爲如下工作

function processFootballData(footballData){ 
    footyStuff = footballData; 
    var thisContainer = document.getElementById("results"); 
    var listTmp = document.createElement("ul"); 
    var tmpList = ""; 
    for(var i=0; (i<footyStuff.results[0].length) && (i<100); i++) { 
      if(tmpList.length <= 0) { 
       tmpList = footyStuff.results[0][ i ]; 
      } 
      else { 
       tmpList = tmpList + "," + footyStuff.results[0][ i ]; 
     } 
    } 

    var footballURL = "http://content.guardianapis.com/search?q=football&format=json&api-key=ky5zy8mds5r25syu36t9kmzj"; 
    $.getJSON(footballURL, 
      function(thisData) { 
      var data = thisData; 

      for(var key in data) { 
        var thisSublist = document.createElement("ul"); 
        thisSublist.setAttribute('style', "border-bottom: 1px solid #000; width: 80%;"); 
        var thisItem = document.createElement("li"); 
        var footyResults = data[key].results[0]; 

        if(data.hasOwnProperty(key)) { 
         var duyList = document.createElement("li"); 
         duyList.setAttribute('style', "padding-bottom: 10px;margin-top:-15px;margin-left:53px;font-size:12px;"); 
         duyFooty = document.createTextNode(footyResults); 
         duyList.appendChild(duyFooty); 
         thisItem.appendChild(duyList); 
        } 

        thisItem.appendChild(thisSublist); 
       } 
       listTmp.appendChild(thisItem); 
     } 
     thisContainer.appendChild(listTmp); 
}); 

} 

Answer 1

您需要使用jsonp要求，因爲衛API是阻止跨域請求。使用JQuery的.ajax與dataType: jsonp：

$.ajax({ 
    url: footballURL, 
    dataType: 'jsonp', 
    success: function(thisData) { 
     var data = thisData; 
     // etc ... 
    } 
}); 

你的DOM代JavaScript是一個有點亂......但它很容易迷路寫那種代碼。我強烈建議使用某種微模板引擎來處理數據到HTML的轉換。

---

如何做到這一點使用Mustache.jsHere's an example。

// create HTML template with data tags 
var template = "<ul>{{#results}}<li><ul><li><a href='{{webUrl}}'>{{webTitle}}</a></li></ul></li>{{/results}}"; 

// render output 
var output = Mustache.render(template, thisData.response); 

// add to the DOM 
$("#results").html(output); 

---

Here's the same example使用Underscore.js。同樣的想法，但不同的實現，讓你寫的模板標記：

<script type='text/template' id='article-template'> 
    <% _.each(results, function(article) { %> 
    <ul> 
     <li style="border-bottom: 1px solid #000; width: 80%;"> 
      <a href='<%= article.webUrl %>'><%= article.webTitle %></a> 
     </li> 
    </ul> 
    <% }); %> 
</script> 

和腳本來呈現：

var template = _.template($("#article-template").html()); 
var output = template(thisData.response); 
$("#results").html(output);