JavaScript 객체의 배열 멤버 변수에서 데이터 액세스

Question

Google 피드 API를 사용하여 RSS 피드 데이터를 가져 오는 작업을위한 jQuery 플러그인을 작성하고 있습니다. 이 API를 사용하여 관련 RSS 피드 데이터를 모두 개체에 저장 한 다음 메서드를 통해 조작합니다. 웹 페이지에 RSS 피드를 렌더링해야하는 함수가 있습니다. 불행히도 개별 RSS 피드 항목을 표시하려고하면 오류가 발생합니다.

분명히

var RSSFeed = function(feedTitle, feedUrl, options) { 
/* 
* An object to encapsulate a Google Feed API request. 
*/ 

// Variables 
this.description = ""; 
this.entries = []; 
this.feedUrl = feedUrl; 
this.link = ""; 
this.title = feedTitle; 
this.options = $.extend({ 
    ssl : true, 
    limit : 4, 
    key : null, 
    feedTemplate : '<article class="rss-feed"><h2>{title}</h1><ul>{entries}</ul></article>', 
    entryTemplate : '<li><h3><a href="{link}">{title}</a></h3><p>by: {author} @ {publishedDate}</p><p>{contentSnippet}</p></li>', 
    outputMode : "json" 
}, options || {}); 

this.sendFeedRequest = function() { 
    /* 
    * Makes the AJAX call to the provided requestUrl 
    */ 

    var self = this; 
    $.getJSON(this.encodeRequest(), function(data) { 
     // Save the data in a temporary object 
     var responseDataFeed = data.responseData.feed; 

     // Now load the data into the RSSFeed object 
     self.description = responseDataFeed.description; 
     self.link = responseDataFeed.link; 
     self.entries = responseDataFeed.entries; 
    }); 
}; 

this.display = function(jQuerySelector) { 
    /* 
    * Displays the RSSFeed onto the webpage 
    * Each RSSEntry will be displayed wrapped in the RSSFeed's template HTML 
    * The template markup can be specified in the options 
    */ 

    var self = this; 
    console.log(self); 
    console.log(self.entries); 
}; 
}; 

$.rssObj = function(newTitle, newUrl, options) { 
    return new RSSFeed(newTitle, newUrl, options); 
}; 

// Code to call the jquery plugin, would normally be found in an index.html file 
rss = $.rssObj("Gizmodo", "http://feeds.gawker.com/Gizmodo/full"); 
rss.sendFeedRequest(); 

rss.display($('div#feed')); 

, 내 display() 기능이 아직 완료되지 않지만 좋은 예로서 역할 : 여기 내 관련 코드입니다. 첫 번째 console.log()은 entries 배열을 포함하여 모든 관련 데이터를 콘솔에 씁니다. 그러나 자체적으로 entries 배열을 기록하려고하면 빈 배열이 반환됩니다. 왜 그런지 알기나 해?

Answer 1

AJAX 요청이 완료되기를 기다리지 않고 display()이 호출되는 것이 문제라고 생각합니다. 따라서 이미 entries에 액세스하려고 시도하는 동안 요청이 계속 실행 중이므로 빈 배열이됩니다.

이 문제를 해결하려면 display()으로 콜을 $.getJSON()의 콜백으로 옮길 수 있습니다. 당신은 매개 변수로 필요한 선택기를 추가해야합니다 :

this.sendFeedRequest = function(selector) { 
    var self = this; 
    $.getJSON(this.encodeRequest(), function(data) { 
     var responseDataFeed = data.responseData.feed; 
     ... 
     self.entries = responseDataFeed.entries; 
     self.display(selector); 
    }); 
}; 

---

편집 : 당신이 콜백으로 display()를 이동하지 않으려면

것은, 당신이 뭔가를 시도 할 수 (테스트되지 않음!) :

var RSSFeed = function(feedTitle, feedUrl, options) { 
    ... 
    this.loading = false; 
    this.selector = null; 

    this.sendFeedRequest = function() { 
     var self = this; 
     self.loading = true; 
     $.getJSON(this.encodeRequest(), function(data) { 
      ... 
      self.loading = false; 
      if (self.selector != null) { 
       self.display(self.selector); 
      } 
     }); 
    }; 

    this.display = function(jQuerySelector) { 
     var self = this; 
     if (self.loading) { 
      self.selector = jQuerySelector; 
     } 
     else { 
      ... 
     } 
    }; 
};