Question

我正在尝试创建一个将调用我的json文件的网站，并使用该信息随机化结果。例如，我的json文件中有100个项目。因此，我想弄清楚如何从所有信息中我只能选择在每次加载页面时随机选择5或6。

这是我目前的剧本

function ajax_get_json(){
var hr = new XMLHttpRequest();     
hr.open("GET", "lyrics.json", true);
hr.setRequestHeader("Content-type", "application/json", true);
   hr.onreadystatechange = function() {
    if(hr.readyState == 4 && hr.status == 200) {
       var data = JSON.parse (hr.responseText);
       var results = document.getElementById("results");
       results.innerHTML = "";
       for (var obj in data){ 
            results.innerHTML += data[obj].user;
        }
}
   }
hr.send(null); 
results.innerHTML = "requesting...";

}

我希望有人可以提供帮助，我对此并不了解，并且正在努力学习我想要创作的这件艺术品。

下面是json文件的样本它是一首来自德雷克歌曲的样本，它的想法是最终从一堆不同的歌词创作随机诗歌。我很抱歉它说用户并且所有这些看起来都很麻烦，但我只是修补了一些工作方式，这就是我需要的，为什么它仍然说用户。

{
"u1":{ "user":"I might be too strong out on compliments"},
"u2":{ "user":"Overdose on confidence"},
"u3":{ "user":"Started not to give a fuck and stopped fearing the consequence"},
"u4":{ "user":"Drinking every night because we drink to my accomplishments"},
"u5":{ "user":"Faded way too long I'm floating in and out of consciousness"},
"u6":{ "user":"And they sayin' I'm back, I'd agree with that"},
"u7":{ "user":"I just take my time with all this shit, I still believe in that"},
"u8":{ "user":"I had someone tell me I fell off, ooh I needed that"},
"u9":{ "user":"And they wanna see me pick back up, well where'd I leave it at"},
"u10":{ "user":"I know I exaggerated things, now I got it like that"}
}

lyrics.json文件的名称

所以这是我当前的脚本更新了你告诉我改变的内容

function getRandomItemsFrom(){
var hr = new XMLHttpRequest();
hr.open("GET", "lyrics.json", true);
hr.setRequestHeader("Content-type", "application/json", true);
   hr.onreadystatechange = function() {
    if(hr.readyState == 4 && hr.status == 200) {
       var data = JSON.parse (hr.responseText);
       var results = document.getElementById("results");

       var lyricsArray = [];
       for ( prop in data ) {
           lyricsArray.push(data[prop].user);
        }

        var randomLyrics = getRandomItemsFrom(data.lyrics, 5);

        Results.innerHTML = "<div>" + data.lyrics.join("</div><div>") + "</div>";
}
   }
hr.send(null); 
results.innerHTML = "requesting...";

}

我想当你说我需要将歌词输入到数组中时我还有几个问题你是说它们本质上应该是这种格式

{
 "items" : [
  {
   "lyrics" : "content1"
  },
  {
  "lyrics" : "content2"
  },
  {
  "lyrics" : "content3"
  }
 ]
}

因此，如果我的.json文件更改为类似脚本，我会改变它的位置

lyricsArray.push(data[prop].user

到

lyricsArray.push(data[item].user

Answer 1

使用随机数生成器生成介于0和 n 之间的随机数 - 1其中 n = JSON数组的长度：

Math.floor(Math.random() * (n - 1)) + 1

执行5到6次操作并使用您获取的值按索引访问数组中的项目以显示给用户。

正如@CoryDanielson所指出的，你还应该检查以确保你没有得到两次相同的数字，这更可能是数组越小。

顺便说一下，您应该使用JQuery中的$.get和$('#results').html来避免XHR和DOM的低级细节。

Answer 2

另一种方法：

首先按顺序将JSON文件中的所有100个项目加载到数组中。然后使用Fisher-Yates shuffle来重新排列数组中的前五个或六个项目（因为不使用它们，所以不需要随机播放其余项目。）最后，使用part-shuffled数组中的第一项

Answer 3

这将从数组中返回一组唯一项。结果集的长度取决于传入的第二个参数。

它的工作原理是生成0到数组长度减去1之间的随机数。如果尚未使用随机数，它将获取数组中随机数位置的项目并将其存储到结果数组中。它会执行此操作，直到numberOfItems参数指定的项目已添加到结果数组中，然后返回结果数组。

随着arr和numberOfItems越来越靠近，它变得越来越低效，特别是如果这些数字很大的话。从5长度的数组中获取5个随机项目效率不高，但不应该花费太长时间，但从1000个数组中获取1000个随机项目效率非常低。对于您的用例（从100长度的数组中获取5个随机项），此代码的低效率可以忽略不计。

http://jsfiddle.net/CoryDanielson/S64Hy/

function getRandomItemsFrom(arr, numberOfItems) {
    if ( arr instanceof Array === false || arr.length === 0 ) return false;
    if ( numberOfItems === undefined || numberOfItems <= 0 ) return false;

    var results     = [],
        usedIndexes = {},
        randomIndex;

    while ( results.length !== numberOfItems ) {
        randomIndex = Math.floor(Math.random() * arr.length);

        if ( usedIndexes.hasOwnProperty(randomIndex) === false ) {
            usedIndexes[randomIndex] = true;
            results.push(arr[randomIndex]);
        }
    }

    return results;
}

用法：

var alphabet = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
getRandomItemsFrom(alphabet, 10);

result => ["v", "m", "e", "x", "l", "s", "b", "d", "w", "p"]

使用您的代码：

首先，将getRandomItemsFrom函数添加到具有上述ajax_get_json函数的同一文件中。然后将处理检索lyrics.json的代码更改为类似的内容。

hr.onreadystatechange = function() {
    if(hr.readyState == 4 && hr.status == 200) {
       var data = JSON.parse (hr.responseText);
       var results = document.getElementById("results");

       // get the lyrics in an array
       var lyricsArray = [];
       for ( prop in data ) {
           lyricsArray.push(data[prop].user);
       }

       // Get random lyrics           
       var randomLyrics = getRandomItemsFrom(data.lyrics, 5);

       results.innerHTML = "<div>" + data.lyrics.join("</div><div>") + "</div>";
}

如何从集合中选择随机项目

3 个答案:

用法：

使用您的代码：