使用 JavaScript fetch 和 Eventbrite API 显示活动的场地名称
Display event's venue name with JavaScript fetch and Eventbrite API
我正在创建一个大学项目来展示利兹发生的事件。到目前为止,我已经能够显示有关该事件的信息,但我还想显示使用不同方法的场地名称。
我已经通过事件信息中找到的场地 ID 设法获取了场地名称,并且这些名称在控制台中正确显示。我现在希望能够在 ui.js 的 HTML 模板中显示 venueName。我认为这是一个简单的问题,我就是想不通!
eventbrite.js
class EventBrite {
constructor() {
this.auth_token = 'Example';
this.orderby = 'date';
this.city = 'Leeds';
}
//Load Leeds events from API
async loadAPI() {
const initalEvents = await fetch(`https://www.eventbriteapi.com/v3/events/search/?sort_by=${this.orderby}&location.address=${this.city}&token=${this.auth_token}`);
const events = await initalEvents.json();
return {
events
}
}
async loadVenue(venueID) {
const initalVenue = await fetch(`https://www.eventbriteapi.com/v3/venues/${venueID}/?token=${this.auth_token}`);
const venue = await initalVenue.json();
return venue;
}
}
app.js
const eventbrite = new EventBrite();
const ui = new UI();
eventbrite.loadAPI()
.then(events => {
//Check for events
const eventsList = events.events.events;
//Print venue IDs
for(let i = 0, l = eventsList.length; i < l; i++) {
const venueID = eventsList[i].venue_id;
eventbrite.loadVenue(venueID)
.then(venue => {
const venueName = venue.name;
})
}
ui.displayEvents(eventsList);
}
)
ui.js
class UI {
constructor() {
this.init();
}
init() {
this.printCategories();
this.result = document.getElementById('result');
}
//Display events
displayEvents(events) {
//Build template
let HTMLTemplate = '';
events.forEach(eventInfo => {
HTMLTemplate += `
<div class="row">
<div class="column">
<p class="event">${eventInfo.name.text}</p>
<p class="event">${eventInfo.start.local}</p>
</div>
</div>
`;
});
this.result.innerHTML = HTMLTemplate;
}
}
我认为这应该可行:
eventbrite.loadAPI()
.then(async events => {
//Check for events
const eventsList = events.events.events;
//Print venue IDs
for(let i = 0, l = eventsList.length; i < l; i++) {
const venueID = eventsList[i].venue_id;
let venue = await eventbrite.loadVenue(venueID);
eventsList[i].venue = venue.name
}
ui.displayEvents(eventsList);
}
)
但请注意:这段代码是阻塞的。场地一次一次地加载。要同时接受它们,您应该寻找 Promise.all
的解决方案
编辑:Promise all 示例
eventbrite.loadAPI().then(events => {
//Check for events
const eventsList = events.events.events;
let venuesPromises = eventsList.map(x => eventbrite.loadVenue(x.venue_id))
return Promise.all(venuesPromises).then(x => {
//x should contain all venues for the events.
const events_with_venues = 1 //TODO: merge events with venues
return events_with_venues
})
})
我正在创建一个大学项目来展示利兹发生的事件。到目前为止,我已经能够显示有关该事件的信息,但我还想显示使用不同方法的场地名称。
我已经通过事件信息中找到的场地 ID 设法获取了场地名称,并且这些名称在控制台中正确显示。我现在希望能够在 ui.js 的 HTML 模板中显示 venueName。我认为这是一个简单的问题,我就是想不通!
eventbrite.js
class EventBrite {
constructor() {
this.auth_token = 'Example';
this.orderby = 'date';
this.city = 'Leeds';
}
//Load Leeds events from API
async loadAPI() {
const initalEvents = await fetch(`https://www.eventbriteapi.com/v3/events/search/?sort_by=${this.orderby}&location.address=${this.city}&token=${this.auth_token}`);
const events = await initalEvents.json();
return {
events
}
}
async loadVenue(venueID) {
const initalVenue = await fetch(`https://www.eventbriteapi.com/v3/venues/${venueID}/?token=${this.auth_token}`);
const venue = await initalVenue.json();
return venue;
}
}
app.js
const eventbrite = new EventBrite();
const ui = new UI();
eventbrite.loadAPI()
.then(events => {
//Check for events
const eventsList = events.events.events;
//Print venue IDs
for(let i = 0, l = eventsList.length; i < l; i++) {
const venueID = eventsList[i].venue_id;
eventbrite.loadVenue(venueID)
.then(venue => {
const venueName = venue.name;
})
}
ui.displayEvents(eventsList);
}
)
ui.js
class UI {
constructor() {
this.init();
}
init() {
this.printCategories();
this.result = document.getElementById('result');
}
//Display events
displayEvents(events) {
//Build template
let HTMLTemplate = '';
events.forEach(eventInfo => {
HTMLTemplate += `
<div class="row">
<div class="column">
<p class="event">${eventInfo.name.text}</p>
<p class="event">${eventInfo.start.local}</p>
</div>
</div>
`;
});
this.result.innerHTML = HTMLTemplate;
}
}
我认为这应该可行:
eventbrite.loadAPI()
.then(async events => {
//Check for events
const eventsList = events.events.events;
//Print venue IDs
for(let i = 0, l = eventsList.length; i < l; i++) {
const venueID = eventsList[i].venue_id;
let venue = await eventbrite.loadVenue(venueID);
eventsList[i].venue = venue.name
}
ui.displayEvents(eventsList);
}
)
但请注意:这段代码是阻塞的。场地一次一次地加载。要同时接受它们,您应该寻找 Promise.all
编辑:Promise all 示例
eventbrite.loadAPI().then(events => {
//Check for events
const eventsList = events.events.events;
let venuesPromises = eventsList.map(x => eventbrite.loadVenue(x.venue_id))
return Promise.all(venuesPromises).then(x => {
//x should contain all venues for the events.
const events_with_venues = 1 //TODO: merge events with venues
return events_with_venues
})
})