随机化 Dribbble API 调用结果答案

【问题标题】：Randomise Dribbble API call results随机化 Dribbble API 调用结果
【发布时间】：2015-12-08 20:37:17
【问题描述】：

我目前正在实施Jribbble 以将我的 Dribbble 投篮纳入我的新作品集。我已经将它设置为能够提取我分配给一个桶的所有镜头 - 太棒了！

我想做的一个额外的事情是能够随机化返回的结果，以确保我的工作的良好传播是可见的。

当前代码是：

$.jribbble.setToken('3f99156fa1530d27432a9df8eb315e861d6b2fb4f59acaa210da8962e1427cf2');

            $.jribbble.buckets(333465).shots({per_page: 12}).then(function(res) {
                var html = [];

                res.forEach(function(shot) {
                    html.push('<li class="shots--shot">');
                    html.push('<a href="' + shot.html_url + '" target="_blank">');
                    html.push('<img src="' + shot.images.normal + '">');
                    html.push('</a></li>');
                });

                $('.shots').html(html.join(''));
            });

有人知道我该怎么做吗？

我还尝试在调用结果后随机化结果：

window.onload = function() {
  var ul = document.querySelector('.shots');
  for (var i = ul.children.length; i >= 0; i--) {
    ul.appendChild(ul.children[Math.random() * i | 0]);
  }
};

但我只得到这个错误：

Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

非常感谢任何帮助！

【问题讨论】：

如何洗牌你在回调中得到的数组res？所以在迭代结果之前。见stackoverflow.com/questions/2450954/…
@MartinSchneider 听起来不错，但我有点不知道如何将它们连接在一起！有什么指点吗？
@DanC 我同意 Martin 的观点 - 您可以创建一个新数组（您的 html 数组），而不是调用 forEach，选择随机元素，将其推送到新数组，然后从 res 数组中拼接它.只要 res 数组的长度 > 0，就重复此操作。

标签： javascript api

【解决方案1】：

获取在那个 SO-Thread How to randomize (shuffle) a JavaScript array? 中找到的 shuffle 函数

并将其添加到您的 javascript 中的某个位置。然后在迭代结果之前调用该函数：

function shuffle(array) {
   // [...] shuffle function  
}

$.jribbble.buckets(333465).shots({per_page: 12}).then(function(res) {
   var html = [];

   // shuffle the results
   res = shuffle(res);

   res.forEach(function(shot) {
       html.push('<li class="shots--shot">');
       html.push('<a href="' + shot.html_url + '" target="_blank">');
       html.push('<img src="' + shot.images.normal + '">');
       html.push('</a></li>');
   });

   $('.shots').html(html.join(''));
});

请记住，这只能打乱从 api 返回的结果。因此，如果您有 100 张图像并且 api 调用返回最后十张照片，那么它将在这些照片之间随机播放。

【讨论】：