Guardian API, JSON 구문 분석 jquery/javascript

Question

Guardian API의 공개 플랫폼에서 JSON 형식의 데이터를 가지고 있으므로이 구문을 jquery에서 구문 분석하고 싶습니다. 현재 HTML div에 결과를 표시하려고했습니다.

다음과 같이 데이터의 형식은 다음과 같습니다 Guardian JSON results가 는 가디언 API 내가 당신은 jsonp 요청을 사용할 필요가

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

을 다음과 함께 작동하도록 노력하고

내 코드입니다

때문에 도메인 간 요청을 차단합니다.

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

귀하의 DOM 세대 자바 스크립트가 엉망의 비트입니다 ... 그러나 코드의 종류를 작성 길을 잃기 쉽다 : dataType: jsonp와 JQuery와 .ajax를 사용합니다. 데이터를 HTML로 변환하는 작업을 처리하기 위해 일종의 마이크로 템플릿 엔진을 사용하는 것이 좋습니다. Mustache.js를 사용하여이 작업을 수행하는 방법의

---

Here'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 exampleUnderscore.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);