Question

我正在尝试使用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\">";
        })}

Answer 1

纯文本中giphy api的响应带来了一堆空白和JSON两侧的换行符。您需要删除初始空格和换行符，然后使用.trim()在响应结束之前清除此空白，然后再进行解析。尝试类似的事情：

var data = e.target.response.replace(/^\s+\{/, '{').trim();
pushToDOM(data);

正则表达式解释说：

^表示字符串的开头
\s表示任何空格字符[\r\n\t\f\v ]
+限定符匹配一次和无限次
\{表示文字字符{

将匹配替换为文字字符{，因为我们已在正则表达式中捕获它，然后使用javascript native .trim()方法删除尾随空格

如果它让你感觉更好，问题出在API方面，而不是代码中：）

<强> JSFIDDLE

JSON.parse的问题

1 个答案: