Question

我正在使用＆＃34; GET＆＃34;请求从此API

中检索信息

＆＃34; GET＆＃34;请求没问题，但有些对象没有图像缩略图作为我的来源，我想过滤掉它们，但似乎无法知道在哪里放置该方法，这是我的代码

$(document).ready(function(){
  $('button').on('click', function(event){
    event.preventDefault();
    $('#result').empty();
    var userInput = $('input').val()
      $.ajax({
        method:"GET",
        url:"https://www.reddit.com/r/" + userInput + ".json?jsonp",
        success:success
      })
  })
  function success(response){
    var result ="";
    var zero = "0"
    $.each(response, function(index, value){
        var list = response.data.children
        $.each(list.slice(1).slice(0, 12), function(index,value){
            var thumbnail = value.data.thumbnail
            result += "<li>" + "<img src='" + thumbnail + "'/>"
            $('#result').html(result)
        })
    })
  }
})

另外，如果你知道如何构造我的代码，那么我只需要制作一个$ .each循环，这也会有所帮助！

非常感谢，

詹姆斯

Answer 1

使用filter

过滤掉列表中带有虚假缩略图的项目（null或undefined等）

var list = response.data.children.filter(function(item) {
   return item.data.thumbnail;
});

$.each(list, function(index,value){
   var thumbnail = value.data.thumbnail;
   $('#result').html(result)
})

Answer 2

Promises将帮助您获得更结构化的代码， Array.prototype.reduce将帮助您避免不必要的迭代。

function loadRedditData(keyword) {
  return jQuery
    .get(`https:\/\/www.reddit.com\/r\/${keyword}.json`, {jsonp: ''})
    .then(res => res.data.children.slice(1, 12))
    .then(data => (
      data.reduce((html, item) => {
        let card = `<h5>${item.data.name}</h5>`;
        
        if(item.data.thumbnail) {
          card = `<img src="${item.data.thumbnail}" />`;
        }
        
        return html.concat(`<div class="card">${card}</div>`);
      }, '')
    ))
    .then(html => jQuery('#result').html(html))
  ;
}

$(document).ready(function() {
  $('button').click(function() {
    return loadRedditData(jQuery('input').val() || 'Ecmascript 6');
  });

})

#result {
  border: 1px solid cyan;
  margin: 5px;
  padding: 5px;
  min-height: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Load Your Data</button>
<input value="javascript" />
<hr />
<section id="result"></section>

我在哪里可以使用jQuery将.filter方法放在我的AJAX请求中

2 个答案: