我正在尝试使用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/

10-11 22:28
查看更多