Вложенные вызовы API и сопоставление с одним и тем же возвращаемым объектом ES6 / ReactJs - PullRequest
Новая
       9

Вложенные вызовы API и сопоставление с одним и тем же возвращаемым объектом ES6 / ReactJs

0 голосов
/ 05 июня 2018

Я только начинаю с React и ES6, поэтому извиняюсь, если это немного просто.

В настоящее время я играю с FoursquareAPI.Я использую ES6 fetch для возврата серии объектов (на самом деле это разные объекты в разных частях света), которые затем отображаются, возвращаются и сохраняются в состоянии приложения.Это работает нормально и возвращает то, что я хочу: 

// method to call api
getVenues: (searchTerm) => {
    const fetchVenuesURL = `${urlExplore}${searchTerm}&limit=10&client_id=${clientId}&client_secret=${clientSecret}&v=20180602`;

return fetch(fetchVenuesURL).then( response => {
         return response.json();
    }).then( jsonResponse => {
        if (jsonResponse.response.groups[0].items) {
            return jsonResponse.response.groups[0].items.map(item => (

                // populate venues
                {
                    id: item.venue.id,
                    name: item.venue.name,
                    address : item.venue.location.address,
                    city : item.venue.location.city,
                    country : item.venue.location.country,
                    icon : item.venue.categories[0].icon
                }

            ));                

        } else {
            return [];
        }

    });

// method in App.js to setState

search(term){
    Foursquare.getVenues(term).then(foursquareResponse => { 
       this.setState({venues: foursquareResponse});
    }); 
}

Проблема возникает, когда мне нужно выбрать фотографии, связанные с каждым из «мест», возвращенных исходной выборкой.Они приходят с другой конечной точки.Я не уверен, каков наилучший подход.

Один из способов состоит в том, чтобы иметь два отдельных метода вызова API, а затем каким-то образом заполнить пустое поле для фотографий первого фотографиями из второго источника в App.js.но это кажется неуклюжим.

Мой инстинкт заключается в том, чтобы как-то вкладывать вызовы API, но я не уверен, как это сделать.Я надеюсь сделать что-то вроде того, как-то применить метод к каждой итерации первого сопоставленного объекта, что-то вроде, но не уверен, как связать их вместе, чтобы второе перешло в свойство photo первого:

{
    id: item.venue.id,
    name: item.venue.name,
    address : item.venue.location.address,
    city : item.venue.location.city,
    country : item.venue.location.country,
    icon : item.venue.categories[0].icon
    photos : []
 }

 const fetchPhotosURL = `${urlPhotos}${venueId}/photos?limit=10&client_id=${clientId}&client_secret=${clientSecret}&v=20180602`;

return fetch(fetchPhotosURL).then( response => {
     return response.json();
}).then( jsonResponse => {

    if (jsonResponse.response.photos.items) {
        console.log(jsonResponse.response.photos.items[0].venue)
        return jsonResponse.response.photos.items.map(item => (
        {
            id : item.id,
            created: item.createdAt,
            prefix: item.prefix,
            suffix: item.suffix,
            width: item.width,
            height: item.height,
            venue: item.venue
        }
        ));
    } else {
        return [];
    }
})

Может ли кто-нибудь указать мне правильное направление с этим.Я предполагаю, что это одна из тех вещей, которые не так сложны, если вы сделали это один раз, но я нахожу это трудным.

Заранее спасибо.

...