Question

我将Darksky-API用于天气，将Giphy-API用于gif。我的应用程序应该以天气为主题搜索gif。

示例：在下雨天时，应在说明中搜索带有“雨天”的Giphy。

现在，我使用weather-API中的innerHTML搜索gif，但我的giphy-api仅在天气完全加载后才可以搜索。否则，将没有搜索项，也无法搜索gif。

我希望有人能帮助我，我已经呆了几天了。

``

    <div id="horloge">
        <div id="scherm">
                <div id="container"></div>
    <h2>The weather is</h2>

    <h1></h1>
    <div id="weather">
    </div>

</div>
    </div>


        class Weather{
        constructor(API_KEY){
            this.API_KEY = API_KEY;
            this.initialize();
        }

        initialize(){
            this.getMyLocation();
            //console.log(navigator);
        }

        getMyLocation(){

            navigator.geolocation.getCurrentPosition(position => { //function(position)

            console.log(position);

            let lat = position.coords.latitude;
            let lng = position.coords.longitude;
            this.getWeather(lat,lng);

        }, err => {
            console.log("error");
        });
        }

        getWeather(lat,lng){

            let url = `https://cors-anywhere.herokuapp.com/https://api.darksky.net/forecast/${this.API_KEY}/${lat},${lng}?units=si`;
            fetch(url)
            .then(response =>{
                return response.json();
            })
            .then(json=>{
                console.log(json);
                let temp = document.getElementById('weather');
                temp.innerHTML = json.currently.summary;
                document.getElementById('weather').append(temp);
                return this.temp;

            }) 
            let newapp = new Giphy('yxRKm3nflyaTUlEIMhRfPMK4FmqdqIun');    
        }
    }
    let app = new Weather('fb03a92b4a767e8e67a5662226ddb892');//API KEY

    /// foto's--------------------------------

    class Giphy{

        constructor(API_KEY_GIPHY){
            this.API_KEY_GIPHY = API_KEY_GIPHY;
            this.initialize();
        }

        initialize(){
            this.getGiphy();
        }

        getGiphy(){

        let search = document.getElementById('weer').innerHTML;


        let urlGiphy =`http://api.giphy.com/v1/gifs/search?q=${search}&api_key=${this.API_KEY_GIPHY}&limit=1&lang=en`;

        fetch(urlGiphy)

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

        .then(json=>{
        console.log(json);

        //zet het item in een div
        let giphy = document.createElement("div");

                //krijg de eerste afbeelding terug uit de array
                let id = json.data[0]["id"];

                //test
                console.log("zoekterm is"+ search);

                giphy.innerHTML = `<img src=https://media0.giphy.com/media/${id}/giphy-preview.webp height="100">`;
                document.querySelector("#container").appendChild(giphy);

        });

    }

        }

https://codepen.io/abuijzen/pen/RONRPV

如何根据天气摘要来搜索地理标志？

0 个答案: