使用 forEach 对 Json 数据进行 jquery 随机循环答案

【问题标题】：random loop with jquery on Json data using forEach使用 forEach 对 Json 数据进行 jquery 随机循环
【发布时间】：2022-02-02 00:06:47
【问题描述】：

我有这段代码可以显示 json 文件中的所有图像。有什么方法可以仅显示 1 张图像并随机显示 .json 中的图像？

我有这个代码：

 $(document).ready(function() {
   
        $.getJSON('https://res.cloudinary.com/dkx20emez/image/list/dom.json', function(emp) {
          //the attribute resource is an array so you have to loop each element in it
      emp.resources.forEach(function(element){   
            var publicid = element.public_id;
            var format = element.format;
            var type = element.type;
            var version = element.version;
            
            $('#display').append('<img class="wrapper" src="https://res.cloudinary.com/dkx20emez/image/'+ type +'/v'+version +'/'+publicid+'.'+format +'">');
            
            
        
          });
        });
   
   
});

 **css**
body { padding: 50px; }

.wrapper {
  width: 200px;
  height: auto;
  padding: 10px;
  background: #eee;
}

.random-faces {
  width: 100%;
  max-width: 200px;
  height: 0;
  padding-bottom: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

          //css

<html><head>    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script></head>

<body>

    <div class="wrapper" id="display" style="background-color:#39B54A;"></div>
    </body>
  </html>

谢谢你的回答

【问题讨论】：

您好，我想显示单个随机图像而不是当前显示的列表
你知道你的数组，你只需要生成一个随机数作为索引。 Google Math.random() 并使用emp.resources.length 作为限制器来选择一个随机数

标签： javascript jquery json random

【解决方案1】：

您可以只生成一个介于 0 和返回数组长度 -1 之间的随机整数。我在这篇文章中包含了一个执行此操作的简单方法：

Generate random number between two numbers in JavaScript

那么你就可以用那个随机整数作为emp.resources的索引，得到一张随机图片。

参见下面的 sn-p：

（我曾经知道的大部分jQuery都忘记了，所以混入了Vanilla JS）

// Custom function to get a random integer between two numbers
const randomIntFromInterval = (min, max) => Math.floor(Math.random() * (max - min + 1) + min);

$(document).ready(function() {

  $.getJSON('https://res.cloudinary.com/dkx20emez/image/list/dom.json', function(emp) {

    //Get a random number between 0 and the length of the emp.resources array - 1
    var index = randomIntFromInterval(0, emp.resources.length - 1)

    // Then just use that random number as the index of the array
    var element = emp.resources[index]
    
    var publicid = element.public_id;
    var format = element.format;
    var type = element.type;
    var version = element.version;

    //Create an img element
    const img = document.createElement(`img`);

    //Add in the class to the img
    img.classList.add(`wrapper`);

    //Add in the source to the img
    img.src = `https://res.cloudinary.com/dkx20emez/image/${type}/v${version}/${publicid}.${format}`;

    $('#display').append(img);
  });
});

body {
  padding: 5px;
}

.wrapper {
  width: 200px;
  height: auto;
  padding: 10px;
  background: #eee;
}

.random-faces {
  width: 100%;
  max-width: 200px;
  height: 0;
  padding-bottom: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="wrapper" id="display" style="background-color:#39B54A;"></div>

【讨论】：