时间戳

首页 > 解决方案 > 如何使用 travel advisor api 加载酒店的图像和描述

javascript - 如何使用 travel advisor api 加载酒店的图像和描述

问题描述

let cities=['Delhi', 'Goa', 'Hyderabad', 'Kolkata', 'Chennai', 'Agra', 'Jaipur', 'Bengaluru'];
let cities_data=[];
for(let i=0; i<cities.length; i++) {
    var xhttp = new XMLHttpRequest();
    xhttp.open("GET", `https://travel-advisor.p.rapidapi.com/locations/search?query=${cities[i]}`, true);
    xhttp.setRequestHeader("x-rapidapi-key", "39cb6e4388mshab83d1703c8651dp1b3aa8jsnc2cb8092bfbe");
    xhttp.setRequestHeader("x-rapidapi-host", "travel-advisor.p.rapidapi.com");
    xhttp.send();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            cities_data.push(JSON.parse(this.response).data[0].result_object.photo.images.large.url);
        }
    }
    
}
console.log(cities_data);

我必须将图像加载到我的 html 页面

<div class="cityImage" >
            <div class="image"><a href="list.html"><img class="city_img" src="https://media-cdn.tripadvisor.com/media/photo-s/15/33/fe/a2/new-delhi.jpg"><div class="cityName">Delhi</div></a></div>
            <div class="image"><img class="city_img" src="https://media-cdn.tripadvisor.com/media/photo-s/15/33/fc/f0/goa.jpg"><div class="cityName">Goa</div></div>
            <div class="image"><img class="city_img" src="https://media-cdn.tripadvisor.com/media/photo-s/0f/98/f7/df/charminar.jpg"><div class="cityName">Hyderabad</div></div>
            <div class="image"><img class="city_img" src="https://media-cdn.tripadvisor.com/media/photo-s/15/33/fe/ac/kolkata-calcutta.jpg"><div class="cityName">Kolkata</div></div><br>
            <div class="image"><a href="list.html"><img class="city_img" src="https://media-cdn.tripadvisor.com/media/photo-s/15/4d/46/b8/chennai-madras.jpg"><div class="cityName">Chennai</div></a></div>
            <div class="image"><img class="city_img" src="https://media-cdn.tripadvisor.com/media/photo-s/15/33/fc/fc/agra.jpg"><div class="cityName">Agra</div></div>
            <div class="image"><img class="city_img" src="https://media-cdn.tripadvisor.com/media/photo-s/10/a3/3b/8a/screenshot-2017-09-12.jpg"><div class="cityName">Jaipur</div></div>
            <div class="image"><img class="city_img" src="https://media-cdn.tripadvisor.com/media/photo-s/0c/d2/2f/7a/palace-from-the-outside.jpg"><div class="cityName">Bengaluru</div></div><br>
        </div>

需要用 javascript 文件中的 travel advisor api 图像替换所有这些图像

标签： javascript

解决方案

const {data:{results}} = apiResponse

现在您将获得结果，结果是一个 obj 数组，现在只需遍历结果并获得detailsV2和image属性，解构 detailsV2 属性{names,geocode,contact} = detailsV2并访问 3 对象，您可以在其中找到所需的详细信息，现在只需访问 Image 属性解构图像 {photo: {photoSize}} = image并访问photoSize属性photoSize是一个对象数组，其中每个对象都是不同大小的图像访问photoSize中的 URL 属性，现在只需选择您需要的图像大小并使用它。

我希望我能很好地理解你的问题。

推荐阅读