我正在尝试使用Giphy.API创建搜索引擎,但是一旦进入第三步和JSON.parse,它就会在Json [0]处给我意外的令牌字符。我认为它正在尝试解析我输入的内容而不是api数据。任何帮助表示赞赏。
/ * 1.抓取输入* /
document.querySelector(".js-go").addEventListener('click',function(){
var input = document.querySelector("input").value;
pushToDOM(input);
});
document.querySelector(".js-userinput").addEventListener('keyup',function(e){
var input = document.querySelector("input").value;
if(e.which=== 13) {
pushToDOM(input);
}
});
/ 2。做API数据/
function pushToDOM(input){
var search = input ;
console.log(search);
var api= "http://api.giphy.com/v1/gifs/search?"
var apikey= "&api_key=dc6zaTOxFJmzC"
var query = "&q="+ search
var url = api+apikey+query
console.log(url);
// AJAX请求
var GiphyAJAXCall = new XMLHttpRequest();
GiphyAJAXCall.open( 'GET', url );
GiphyAJAXCall.send();
GiphyAJAXCall.addEventListener('load',function(e){
var data = e.target.response;
pushToDOM(data);
})};
/ 3。显示gif /
function pushToDOM(input){
var response = JSON.parse(input)
//console.log(response)}
var imgURLs = response.data;
var container = document.querySelector(".js-container")
container.innerHTML = data};
imgURLs.forEach(function(image){
var src = image.images.fixed_height.url;
console.log(src)
container.innerHTML += "<img src=\"" + src + "\" class= \"container-image\">";
})}
最佳答案
来自giphy api的纯文本响应返回了一堆空白,并且在JSON的任何一侧都有换行符。您需要删除初始的空格和换行符,然后使用.trim()
从响应末尾清除此空格,然后才能解析它。尝试类似:
var data = e.target.response.replace(/^\s+\{/, '{').trim();
pushToDOM(data);
正则表达式解释:
^
表示字符串的开头\s
表示任何空白字符[\r\n\t\f\v ]
+
限定词匹配一次和无限次\{
表示文字字符{
因为我们已经在正则表达式中捕获了匹配项,所以只用文字字符
{
替换了匹配项,然后使用javascript本机.trim()
方法去除尾随空格如果让您感觉更好,则问题出在API方面,而不是代码中:)
JSFIDDLE
关于javascript - JSON.parse的问题,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/41475952/