我在哪里可以在jQuery的AJAX請求中放入.filter方法

Question

我正在使用“ GET”請求從此API檢索信息

“ GET”請求很好，但是有些對象沒有圖像縮略圖作為我的來源，我想過濾掉它們，但似乎不知道將方法放在哪里，這是我的代碼

$(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

通過使用過濾掉falsy縮略圖列表中的項目（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>