首先，我对使用 API 完全陌生。英语不是我的母语。我在网上进行了搜索，但未能准确找到我正在寻找的内容，或者至少我对阅读的内容理解不够，无法理解如何改变它并将其应用到我的情况中。
我正在使用 Omdb API 和 Giphy API，制作一个愚蠢的页面。我正在使用 JavaScript 和 HTML。
最后我希望页面显示用户搜索电影+主题gif的搜索结果。
到目前为止，我已经从两个 API 获得了结果。这一切都很好。我不知道如何从这些结果中获取，例如，只有电影标题和 .gif 文件。到目前为止，我尝试拆分返回的结果都失败了。有什么建议么？下面是我的 JavaScript 代码。
var form = document.getElementById('search-form');
form.addEventListener("submit", search);
function search(event) {
event.preventDefault();
document.getElementById("present_result").innerHTML = "";
if(this.elements.query.value === '') {
alert("Enter search word!");
} else {
var rawInputData = this.elements.query.value;
var fixedInputData = rawInputData.split(" ");
var inputData = encodeQueryData(fixedInputData);
var inputDataGif = encodeQueryDataGif(fixedInputData);
function encodeQueryData(data) {
let ret = [];
for (let d in data)
ret.push(encodeURIComponent(data[d]));
return ret.join('%20');
}
function encodeQueryDataGif(data) {
let ret = [];
for (let d in data)
ret.push(encodeURIComponent(data[d]));
return ret.join('+');
}
var omdbAPI = new XMLHttpRequest();
var gifAPI = new XMLHttpRequest();
var omdbURL = "http://www.omdbapi.com/?s=" + inputData + "&type=movie";
var gifURL = "http://api.giphy.com/v1/gifs/search?q=" + inputDataGif + "&limit=1&api_key=dc6zaTOxFJmzC";
omdbAPI.addEventListener("load", function() {
if (this.responseText === '{"Response":"False","Error":"Movie not found!"}')
{
alert("No result.");
} else {
var result = JSON.parse(this.responseText);
console.log(result);
result = JSON.stringify(result);
document.getElementById("present_result").innerHTML = result;
}
});
gifAPI.addEventListener("load", function() {
if (this.responseText === '{"Response":"False","Error":"Not found!"}')
{
alert("No Result.");
} else {
var result = JSON.parse(this.responseText);
console.log(result);
result = JSON.stringify(result);
document.getElementById("present_gif").innerHTML = result;
}
});
omdbAPI.open("get", omdbURL, true);
omdbAPI.send();
gifAPI.open("get", gifURL, true);
gifAPI.send();
}
}
在 HTML 下方。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Mashup test</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!-- Form -->
<form action="" method="get" id="search-form" class="search-form">
Movie: <input type="text" name="query">
<button type="submit" id="submit">Search</button>
</form>
<!-- Result -->
<div id="present_result">
</div>
<div id="present_gif">
</div>
<script src="scripts.js"></script>
</body>
</html>
这是来自 OMDb 的示例结果:
{
"Search": [{
"Title": "Titanic",
"Year": "1997",
"imdbID": "tt0120338",
"Type": "movie",
"Poster": "https://images-na.ssl-images-amazon.com/images/M/MV5BZDNiMjE0NDgtZWRhNC00YTlhLTk2ZjItZTQzNTU2NjAzNWNkXkEyXkFqcGdeQXVyNjUwNzk3NDc@._V1_SX300.jpg"
}, {
"Title": "Titanic II",
"Year": "2010",
"imdbID": "tt1640571",
"Type": "movie",
"Poster": "https://images-na.ssl-images-amazon.com/images/M/MV5BMTMxMjQ1MjA5Ml5BMl5BanBnXkFtZTcwNjIzNjg1Mw@@._V1_SX300.jpg"
}, {
"Title": "Titanic: The Legend Goes On...",
"Year": "2000",
"imdbID": "tt0330994",
"Type": "movie",
"Poster": "https://images-na.ssl-images-amazon.com/images/M/MV5BMTg5MjcxODAwMV5BMl5BanBnXkFtZTcwMTk4OTMwMg@@._V1_SX300.jpg"
}, {
"Title": "Titanic",
"Year": "1953",
"imdbID": "tt0046435",
"Type": "movie",
"Poster": "https://images-na.ssl-images-amazon.com/images/M/MV5BMTU3NTUyMTc3Nl5BMl5BanBnXkFtZTgwOTA2MDE3MTE@._V1_SX300.jpg"
}, {
"Title": "Raise the Titanic",
"Year": "1980",
"imdbID": "tt0081400",
"Type": "movie",
"Poster": "https://images-na.ssl-images-amazon.com/images/M/MV5BMTY5MTQwNzMxNV5BMl5BanBnXkFtZTcwMzkwOTMyMQ@@._V1_SX300.jpg"
}, {
"Title": "The Legend of the Titanic",
"Year": "1999",
"imdbID": "tt1623780",
"Type": "movie",
"Poster": "https://images-na.ssl-images-amazon.com/images/M/MV5BMjMxNDU5MTk1MV5BMl5BanBnXkFtZTgwMDk5NDUyMTE@._V1_SX300.jpg"
}, {
"Title": "The Chambermaid on the Titanic",
"Year": "1997",
"imdbID": "tt0129923",
"Type": "movie",
"Poster": "https://images-na.ssl-images-amazon.com/images/M/MV5BMWUzYjgyNDEtNTAyMi00M2JjLTlhMzMtMDJmOGM1ZmYzNzY4XkEyXkFqcGdeQXVyMTA0MjU0Ng@@._V1_SX300.jpg"
}, {
"Title": "In Search of the Titanic",
"Year": "2004",
"imdbID": "tt1719665",
"Type": "movie",
"Poster": "https://images-na.ssl-images-amazon.com/images/M/MV5BMTAzNjY0NDA2NzdeQTJeQWpwZ15BbWU4MDIwMzc1MzEx._V1_SX300.jpg"
}, {
"Title": "Titanic",
"Year": "1943",
"imdbID": "tt0036443",
"Type": "movie",
"Poster": "https://images-na.ssl-images-amazon.com/images/M/MV5BMTU2Njg4MDgxN15BMl5BanBnXkFtZTcwNzE4MjYyMQ@@._V1_SX300.jpg"
}, {
"Title": "S.O.S. Titanic",
"Year": "1979",
"imdbID": "tt0079836",
"Type": "movie",
"Poster": "https://images-na.ssl-images-amazon.com/images/M/MV5BMTMwOTU5MDU0OV5BMl5BanBnXkFtZTcwMDc4OTYyMQ@@._V1_SX300.jpg"
}],
"totalResults": "170",
"Response": "True"
}
来自 Giphy 的示例结果:
{
"data": [{
"type": "gif",
"id": "pWDH6fkHgGHza",
"slug": "titanic-leonardo-dicaprio-pWDH6fkHgGHza",
"url": "http://giphy.com/gifs/titanic-leonardo-dicaprio-pWDH6fkHgGHza",
"bitly_gif_url": "http://gph.is/Z15kA0",
"bitly_url": "http://gph.is/Z15kA0",
"embed_url": "http://giphy.com/embed/pWDH6fkHgGHza",
"username": "",
"source": "http://tomhiddles.tumblr.com/post/37231367662",
"rating": "g",
"content_url": "",
"source_tld": "tomhiddles.tumblr.com",
"source_post_url": "http://tomhiddles.tumblr.com/post/37231367662",
"is_indexable": 0,
"import_datetime": "2013-03-24 01:54:54",
"trending_datetime": "1970-01-01 00:00:00",
"images": {
"fixed_height": {
"url": "http://media0.giphy.com/media/pWDH6fkHgGHza/200.gif",
"width": "513",
"height": "200",
"size": "271598",
"mp4": "http://media0.giphy.com/media/pWDH6fkHgGHza/200.mp4",
"mp4_size": "19808",
"webp": "http://media0.giphy.com/media/pWDH6fkHgGHza/200.webp",
"webp_size": "392604"
},
"fixed_height_still": {
"url": "http://media0.giphy.com/media/pWDH6fkHgGHza/200_s.gif",
"width": "513",
"height": "200"
},
"fixed_height_downsampled": {
"url": "http://media0.giphy.com/media/pWDH6fkHgGHza/200_d.gif",
"width": "513",
"height": "200",
"size": "530508",
"webp": "http://media0.giphy.com/media/pWDH6fkHgGHza/200_d.webp",
"webp_size": "196204"
},
"fixed_width": {
"url": "http://media0.giphy.com/media/pWDH6fkHgGHza/200w.gif",
"width": "200",
"height": "78",
"size": "65057",
"mp4": "http://media0.giphy.com/media/pWDH6fkHgGHza/200w.mp4",
"mp4_size": "24950",
"webp": "http://media0.giphy.com/media/pWDH6fkHgGHza/200w.webp",
"webp_size": "74208"
},
"fixed_width_still": {
"url": "http://media0.giphy.com/media/pWDH6fkHgGHza/200w_s.gif",
"width": "200",
"height": "78"
},
"fixed_width_downsampled": {
"url": "http://media0.giphy.com/media/pWDH6fkHgGHza/200w_d.gif",
"width": "200",
"height": "78",
"size": "100970",
"webp": "http://media0.giphy.com/media/pWDH6fkHgGHza/200w_d.webp",
"webp_size": "37622"
},
"fixed_height_small": {
"url": "http://media0.giphy.com/media/pWDH6fkHgGHza/100.gif",
"width": "256",
"height": "100",
"size": "271598",
"mp4": "http://media0.giphy.com/media/pWDH6fkHgGHza/100.mp4",
"mp4_size": "170265",
"webp": "http://media0.giphy.com/media/pWDH6fkHgGHza/100.webp",
"webp_size": "98852"
},
"fixed_height_small_still": {
"url": "http://media0.giphy.com/media/pWDH6fkHgGHza/100_s.gif",
"width": "256",
"height": "100"
},
"fixed_width_small": {
"url": "http://media0.giphy.com/media/pWDH6fkHgGHza/100w.gif",
"width": "100",
"height": "39",
"size": "65057",
"mp4": "http://media0.giphy.com/media/pWDH6fkHgGHza/100w.mp4",
"mp4_size": "45670",
"webp": "http://media0.giphy.com/media/pWDH6fkHgGHza/100w.webp",
"webp_size": "23380"
},
"fixed_width_small_still": {
"url": "http://media0.giphy.com/media/pWDH6fkHgGHza/100w_s.gif",
"width": "100",
"height": "39"
},
"downsized": {
"url": "http://media0.giphy.com/media/pWDH6fkHgGHza/giphy.gif",
"width": "500",
"height": "195",
"size": "1006467"
},
"downsized_still": {
"url": "http://media0.giphy.com/media/pWDH6fkHgGHza/giphy_s.gif",
"width": "500",
"height": "195"
},
"downsized_large": {
"url": "http://media0.giphy.com/media/pWDH6fkHgGHza/giphy.gif",
"width": "500",
"height": "195",
"size": "1006467"
},
"downsized_medium": {
"url": "http://media0.giphy.com/media/pWDH6fkHgGHza/giphy.gif",
"width": "500",
"height": "195",
"size": "1006467"
},
"original": {
"url": "http://media0.giphy.com/media/pWDH6fkHgGHza/giphy.gif",
"width": "500",
"height": "195",
"size": "1006467",
"frames": "12",
"mp4": "http://media0.giphy.com/media/pWDH6fkHgGHza/giphy.mp4",
"mp4_size": "84279",
"webp": "http://media0.giphy.com/media/pWDH6fkHgGHza/giphy.webp",
"webp_size": "378130"
},
"original_still": {
"url": "http://media0.giphy.com/media/pWDH6fkHgGHza/giphy_s.gif",
"width": "500",
"height": "195"
},
"looping": {
"mp4": "http://media.giphy.com/media/pWDH6fkHgGHza/giphy-loop.mp4"
},
"preview": {
"mp4": "http://media3.giphy.com/media/pWDH6fkHgGHza/giphy-preview.mp4",
"mp4_size": "44332",
"width": "326",
"height": "126"
},
"downsized_small": {
"mp4": "http://media3.giphy.com/media/pWDH6fkHgGHza/giphy-downsized-small.mp4",
"mp4_size": "116662"
}
}
}],
"meta": {
"status": 200,
"msg": "OK",
"response_id": "5887622069432538bfa2a521"
},
"pagination": {
"total_count": 11258,
"count": 1,
"offset": 0
}
}
最佳答案
这两个 API 都会返回一个 JSON 对象。
一个json对象一般是这样构造的:
{
"property1": "value1",
"property2": "value2"
"property_array": ["arrayValue1", "arrayValue2"],
"property_object": {
"propertyA": "valueA",
"attributeB": "valueB"
}
}
所以让我们使用 OMDb(例如):
要访问结果，您需要访问“搜索”属性:
var entries = result.Search;
然后，您需要“循环”搜索对象(也是一个对象)的每个属性:
为此，您可以使用 for...in 循环:
for(var entry_key in entries) {
// control that property is own by the object (not prototype)
if(entries.hasOwnProperty(entry_key)) {
// do whatever you want with the entry
// To access the entry, use this notation:
var entry = entries[entry_key];
// to stay with OMDb example, this should be:
var movie_title = entry.Title;
}
}
var results = {
"Search": [{
"Title": "Titanic",
"Year": "1997",
"imdbID": "tt0120338",
"Type": "movie",
"Poster": "https://images-na.ssl-images-amazon.com/images/M/MV5BZDNiMjE0NDgtZWRhNC00YTlhLTk2ZjItZTQzNTU2NjAzNWNkXkEyXkFqcGdeQXVyNjUwNzk3NDc@._V1_SX300.jpg"
}, {
"Title": "Titanic II",
"Year": "2010",
"imdbID": "tt1640571",
"Type": "movie",
"Poster": "https://images-na.ssl-images-amazon.com/images/M/MV5BMTMxMjQ1MjA5Ml5BMl5BanBnXkFtZTcwNjIzNjg1Mw@@._V1_SX300.jpg"
}, {
"Title": "Titanic: The Legend Goes On...",
"Year": "2000",
"imdbID": "tt0330994",
"Type": "movie",
"Poster": "https://images-na.ssl-images-amazon.com/images/M/MV5BMTg5MjcxODAwMV5BMl5BanBnXkFtZTcwMTk4OTMwMg@@._V1_SX300.jpg"
}, {
"Title": "Titanic",
"Year": "1953",
"imdbID": "tt0046435",
"Type": "movie",
"Poster": "https://images-na.ssl-images-amazon.com/images/M/MV5BMTU3NTUyMTc3Nl5BMl5BanBnXkFtZTgwOTA2MDE3MTE@._V1_SX300.jpg"
}, {
"Title": "Raise the Titanic",
"Year": "1980",
"imdbID": "tt0081400",
"Type": "movie",
"Poster": "https://images-na.ssl-images-amazon.com/images/M/MV5BMTY5MTQwNzMxNV5BMl5BanBnXkFtZTcwMzkwOTMyMQ@@._V1_SX300.jpg"
}, {
"Title": "The Legend of the Titanic",
"Year": "1999",
"imdbID": "tt1623780",
"Type": "movie",
"Poster": "https://images-na.ssl-images-amazon.com/images/M/MV5BMjMxNDU5MTk1MV5BMl5BanBnXkFtZTgwMDk5NDUyMTE@._V1_SX300.jpg"
}, {
"Title": "The Chambermaid on the Titanic",
"Year": "1997",
"imdbID": "tt0129923",
"Type": "movie",
"Poster": "https://images-na.ssl-images-amazon.com/images/M/MV5BMWUzYjgyNDEtNTAyMi00M2JjLTlhMzMtMDJmOGM1ZmYzNzY4XkEyXkFqcGdeQXVyMTA0MjU0Ng@@._V1_SX300.jpg"
}, {
"Title": "In Search of the Titanic",
"Year": "2004",
"imdbID": "tt1719665",
"Type": "movie",
"Poster": "https://images-na.ssl-images-amazon.com/images/M/MV5BMTAzNjY0NDA2NzdeQTJeQWpwZ15BbWU4MDIwMzc1MzEx._V1_SX300.jpg"
}, {
"Title": "Titanic",
"Year": "1943",
"imdbID": "tt0036443",
"Type": "movie",
"Poster": "https://images-na.ssl-images-amazon.com/images/M/MV5BMTU2Njg4MDgxN15BMl5BanBnXkFtZTcwNzE4MjYyMQ@@._V1_SX300.jpg"
}, {
"Title": "S.O.S. Titanic",
"Year": "1979",
"imdbID": "tt0079836",
"Type": "movie",
"Poster": "https://images-na.ssl-images-amazon.com/images/M/MV5BMTMwOTU5MDU0OV5BMl5BanBnXkFtZTcwMDc4OTYyMQ@@._V1_SX300.jpg"
}],
"totalResults": "170",
"Response": "True"
};
var movies_list = document.getElementById('movies-list');
var entries = results.Search;
for(var entry_key in entries) {
// control that property is own by the object (not prototype)
if(entries.hasOwnProperty(entry_key)) {
// do whatever you want with the entry
// To access the entry, use this notation:
var entry = entries[entry_key];
// to stay with OMDb example, this should be:
var movie_line = '<p><strong>Title:</strong> '
+ entry.Title + ' (year: ' + entry.Year + ')</p>';
movies_list.innerHTML += movie_line;
}
}<div id="movies-list">
</div>关于javascript - 使用 JavaScript 和 HTML 显示 API 结果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41829546/