如何使用 AJAX 和 Axios 从 API 中选择某些数据？
[英]How do I select certain data from API using AJAX and Axios?
问题描述
I want to know what I am doing wrong when selecting a URL (or any data piece) from an API using Axios.
我想知道在使用 Axios 从 API 中选择 URL（或任何数据段）时我做错了什么。 Just as an example, I would like to select the URL: "https://media4.giphy.com/media/yy6hXyy2DsM5W/giphy-downsized.gif?cid=482277c2s3j1s8uell6vhu03111i46npv57g8yqgikgiefr8&rid=giphy-downsized.gif"举个例子，我想选择网址： “https://media4.giphy.com/media/yy6hXyy2DsM5W/giphy-downsized.gif?cid=482277c2s3j1s8uell6vhu03111i46npv57g8yqgikgiefr8&ridgiphy=482277c2s3j1s8uell6vhu03111i46npv57g8yqgikgiefr8&ridgiphy
from the API link: https://api.giphy.com/v1/gifs/search?q=$puppies&api_key=MhAodEJIJxQMxW9XqxKjyXfNYdLoOIym来自 API 链接： https : //api.giphy.com/v1/gifs/search?q=$puppies&api_key=MhAodEJIJxQMxW9XqxKjyXfNYdLoOIym
My HTML and Javascript is included.我的 HTML 和 Javascript 包括在内。 My function is grabbing all the API data, but it seems my res.data[0].images.downsized.url isn't written accurately.我的函数正在获取所有 API 数据，但似乎我的res.data[0].images.downsized.url没有准确写入。 Any help would be much appreciated!任何帮助将非常感激！
async function getGiphs() { const res = await axios.get(`https://api.giphy.com/v1/gifs/search?q=$puppies&api_key=MhAodEJIJxQMxW9XqxKjyXfNYdLoOIym`); console.log(res.data[0].images.downsized.url); }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Giphy Party!</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> </head> <body> <div class="jumbotron"> <h1 class="display-4 mb-3">GIPHY Party!</h1> <div class="form-group"> <form> <input id="search-word" class="form-control mb-3" placeholder="Enter search term"> <button id="search-btn" class="btn btn-primary btn-md mr-2" role="button" type="submit">Search GIPHY <button id="remove-btn" class="btn btn-danger btn-md" role="button">Remove Images </form> </div> <script src="giphyParty.css"></script> <script src="https://code.jquery.com/jquery-3.2.1.js"></script> <script src="https://unpkg.com/axios/dist/axios.js"></script> <script src="giphyParty.js"></script> </body> </html>
2 个解决方案
解决方案1
1 已采纳 2020-09-04 02:04:37
/* i dont know see where and how you'r calling 'getGiphs' method. there is a small correction in accessing the results. */ async function getGiphs() { const res = await axios.get(`https://api.giphy.com/v1/gifs/search?q=$puppies&api_key=MhAodEJIJxQMxW9XqxKjyXfNYdLoOIym`); console.log(res.data.data[0].images.downsized.url); }
解决方案2
1 2020-09-04 02:17:42
您只需要再添加一个“数据”，因为返回的对象也有一个名为“数据”的属性。
console.log(res.data.data[0].images.downsized.url)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.