如何获取随机的JSON数据并将其附加到div元素上

Question

这是我的JSON数据

[
{
    "imageSmall": ["images/employee_jpgs/employees_abhishek_80x80.jpg"],
    "imageBig": ["images/employee_jpgs/employees_abhishek_150x150.jpg"],
    "name": ["Abhishek Shet"],
    "quotes": ["Just perfect to start your career after school. Makes me feel        others in the industry are way slower then us. Awesome team and and a brilliant product to work on!!!!. And most importantly I enjoy what I do :)."],
    "type": "employee"
},
{
    "imageSmall": ["images/employee_jpgs/employees_barbra_80x80.jpg"],
    "imageBig": ["images/employee_jpgs/employees_barbra_150x150.jpg"],
    "name": ["Barbra Gago"],
    "quotes": ["The best part about working at tibbr is how dynamic the environment is, there's a lot of flexibility and freedom to execute on new ideas. Because everyone is so talented, there is a ton of trust and support coming from managers and team members-we all count on each other to do the best possible job!"],
    "type": "employee"
},

同样的事情继续进行，但有三种类型：

1. 员工
2. Twitter
3. 社交媒体

现在我的问题是，我想随机获取这些JSON数据并将其附加到我的DIV元素中。

我使用以下代码：

function(args){
 var me=this;
 $.getJSON(args.json,function(data) { 
 me.set(args);
 $.each(data, function(i){
    var id="randomizr_item_" + i;
    var temp= $('<div id='+ id +' class="randomizr-grid-items"><img src="'+ this.imageSmall[0]  +'" /></div>');
    me.config.container.append(temp);
    this.target=$(temp);
});

我知道如何使用以下代码生成单个随机条目。

entry = data[Math.floor(Math.random()*data.length)];

该函数生成单个随机条目。

请帮我如何从上述JSON文件中随机获取JSON数据并将其附加到div元素。

- Nitish

Answer 1

您需要创建一个包含随机唯一数字的数组，如下所示：

function generateRandom(min, max) {
    var arr = [];
    while(arr.length < 5){
      var randNum = Math.floor(Math.random() * (max - min + 1)) + min,
          found=false;
      for(var i=0;i < arr.length; i++){
        if(arr[i] == randNum){found=true;break}
      }
      if(!found)arr[arr.length] = randNum;
    }
    return arr;
}

然后您需要按照以下方式循环数据：

在此我正在循环独特的数组，而不是使用data并将数组的值用作data的索引。

var orders = generateRandom(0, data.length-1);

$.each(orders, function(index, value){
    var id="randomizr_item_" + i;
    var temp= $('<div id='+ id +' class="randomizr-grid-items"><img src="'+ data[value].imageSmall[0]  +'" /></div>');
    me.config.container.append(temp);
    this.target=$(temp);
});

一个简单的演示

- thecodeparadox

---

最糟糕的随机生成器。 - Alexander

每次循环时，您都忘记了已经选择了一个元素的事实。如果您决定要忘记的元素再次被选择，则只是浪费时间。让它“记住”，它会更好。 - Alexander

亚历山大，你能给我一个更好的解决方案吗？ - Nitish

Answer 2

你应该创建一个“Deck”并用json数据填充它。

一旦Deck被填充，就可以通过循环遍历其中的元素，像这样：

while(deck.length > 0) {
 var random_index = Math.floor(Math.random()*data.length);
 var item = deck[random_index];
 // do stuff with item
 deck = jQuery.removeFromArray(random_index, deck);
}

将以下代码添加到您的JS文件顶部：

jQuery.removeFromArray = function(value, arr) {
    return jQuery.grep(arr, function(elem, index) {
        return elem !== value;
    });
};

- Barry Kooij