Eventbrite의 API에서 반환 된 데이터를 구문 분석하고 이벤트 이름과 전체 데이터 응답에서 스크랩 한 모든 img 태그에서 개체를 형성하고 있습니다.
for (var i = 1, l = rawEventbriteData.length; i < l; i++){
var eventObject = {
name: rawEventbriteData[i].event.title,
images: []
};
var jsdom = require('jsdom');
var arrayOfImgs = [];
jsdom.env({
html: rawEventbriteData[i].event.description,
scripts: ["http://code.jquery.com/jquery.js"],
done: function(errors, window) {
window.$('img').each(function(){
var imgSrc = window.$(this).attr('src');
console.log(imgSrc);
eventObject.images.push(imgSrc);
});
}
});
}
결과를 로그 아웃합니다.
the events are [ { name: 'Sense 5K - Austin Pre-Registration', images: [] },
{ name: 'Tech Snack - Fostering Student Research', images: [] },
{ name: 'Coffee,Dessert and Chat', images: [] },
{ name: 'Texas Table Tennis!', images: [] },
{ name: '#3and3 w/ @FortyCreek_John', images: [] },
{ name: 'BUSINESS COACHING | CONVERSE-OVER-COFFEE (Austin)',
images: [] },
{ name: 'Tiny House in Austin, Texas', images: [] },
{ name: 'Fastest House Tour in America', images: [] },
{ name: 'Texas NORML\'s Monthly Open Meeting, Dreadneck Wednesday and Smokin\' Stand-Up',
images: [] },
{ name: 'Amazing Scavenger Hunt Adventure-Austin', images: [] } ]
https://evbdn.eventbrite.com/s3-s3/eventlogos/90039995/about.png
https://evbdn.eventbrite.com/s3-s3/eventlogos/90039995/bluedawntour1.jpg
그리고 각 이벤트 객체에 예상대로 name 속성이 있지만 이미지 배열은 비어 있음을 알 수 있습니다. 이미지 소스는 터미널 출력 (jsdom 함수 내에서 호출 됨) 끝에서 로깅을 끝내지 만 이러한 URL은 필요할 때 사용할 수 없습니다.
나는 현재와 같은 이름을 가진 eventObjects와 현재 제 시간에 돌아 오지 않는 이미지 배열로 끝내고 싶습니다. 이를 해결하기위한 좋은 접근 방법은 무엇입니까?
이것은 고전적인 폐쇄 문제입니다. done핸들러 로 전달하는 함수 에는 변수에 대한 지속적인 참조 가 있으므로 eventObject(루프에 한정되지 않고 하나만 있음) 마지막 항목 만 채워집니다. (이것은 일반적으로 원하는 것이지만 여기에서는 그렇지 않습니다. 케이스.)
다른 것 (일반적으로 인수)을 닫는 빌더 함수로이 문제를 해결할 수 있습니다.
for (var i = 1, l = rawEventbriteData.length; i < l; i++){
var eventObject = {
name: rawEventbriteData[i].event.title,
images: []
};
var jsdom = require('jsdom');
var arrayOfImgs = [];
jsdom.env({
html: rawEventbriteData[i].event.description,
scripts: ["http://code.jquery.com/jquery.js"],
done: buildDoneHandler(eventObject)
});
}
function buildDoneHandler(evtobj) {
return function(errors, window) {
window.$('img').each(function(){
var imgSrc = window.$(this).attr('src');
console.log(imgSrc);
evtobj.images.push(imgSrc);
});
};
}
에 의해 반환 된 functon은.보다 buildDoneHandlercloses 및 evtobj(우리가 제공하는 인수 buildDoneHanlder)를 사용합니다 eventObject. 인수는에 대한 각 호출에 고유 buildDoneHandler하므로 올바른 이벤트 객체를 업데이트합니다.
Function#bind다른 인수가있을 때 혼란 스러울 수 bind있고 루프에서 함수를 생성 하는 것은 낭비이지만 (보통 중요하지 않음) ES5로도 수행 할 수 있습니다 .
for (var i = 1, l = rawEventbriteData.length; i < l; i++){
var eventObject = {
name: rawEventbriteData[i].event.title,
images: []
};
var jsdom = require('jsdom');
var arrayOfImgs = [];
jsdom.env({
html: rawEventbriteData[i].event.description,
scripts: ["http://code.jquery.com/jquery.js"],
done: function(evtobj, errors, window) {
window.$('img').each(function(){
var imgSrc = window.$(this).attr('src');
console.log(imgSrc);
evtobj.images.push(imgSrc);
});
}.bind(null, eventObject)
});
}
Function#bind호출 될 때 특정 this값 및 인수 목록의 시작 부분에 제공 한 추가 인수를 사용 하여 원래 함수를 호출하는 함수를 반환 합니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다