使用 JavaScript fetch 和 Eventbrite API 显示活动的场地名称

Question

我正在创建一个大学项目来展示利兹发生的事件。到目前为止，我已经能够显示有关该事件的信息，但我还想显示使用不同方法的场地名称。

我已经通过事件信息中找到的场地 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;
    }
}

Answer 1

我认为这应该可行：

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
    })
})

使用 JavaScript fetch 和 Eventbrite API 显示活动的场地名称

Display event's venue name with JavaScript fetch and Eventbrite API

javascript

api

promise

fetch

eventbrite