如何获取随机 json 数据并附加到 div 元素

2024-01-07

说这是我的 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"
},

同样的情况继续,但有 3 种类型 1-员工 2-推特 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 中。


您需要创建一个随机唯一数字的数组,如下所示:

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);
});

一个简单的演示 http://jsfiddle.net/thecodeparadox/QStkd/121/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何获取随机 json 数据并附加到 div 元素 的相关文章

随机推荐

  • Protocol buffer 数据库抽象框架

    有谁听说过基于 Google Protocol Buffers 构建的企业级数据库抽象层 我可以预见这样的数据库工具集将具有从移动计算一直到企业系统开发的巨大可能性 我认为任何键值存储 例如 Redis 都可 以吗 也许 Riak 会是一个
  • 箱线图中 na.action 有哪些选项?

    两个相关问题boxplot 有哪些选择na action 文档没有列出它们 将来我将如何回答这些类型的问题 总的来说 我发现内置的帮助非常好 你是对的 虽然帮助页面boxplot提及na action没有说明选项是什么 在这种情况下 na
  • 如何加载PEM格式的公钥进行加密?

    到目前为止 我使用 JSEncrypt 它能够从 PEM 格式的字符串加载公钥 然后将其与 RSA 一起使用来加密字符串 例如
  • i18next.services.pluralResolver.addRule 返回 addRule 的未定义

    import i18next from i18next import LanguageDetector from i18next browser languagedetector const locales en GB pl PL expo
  • React-Redux:所有组件状态是否都应该保存在 Redux Store 中

    假设我有一个简单的切换 当我单击按钮时 颜色组件在红色和蓝色之间变化 我可能会通过做这样的事情来实现这个结果 index js Button onClick gt dispatch changeColor Color this props
  • 使用javascript在dom树中将元素向上或向下移动一位

    我想要一种 javascript 方法 使用 javascript 或 jquery 也可以 在特定已知父级的 dom 树中向上或向下移动一个元素 但我希望脚本知道某个元素何时是 dom 树中的第一个或最后一个元素父母 不为所动 例如 如果
  • plm 或 lme4 用于面板数据的随机和固定效应模型

    我可以使用以下命令在面板数据上指定随机效应模型和固定效应模型吗lme4 questions tagged lme4 我正在重做来自 Wooldridge 2013 p 494 5 的示例 14 4r questions tagged r 谢
  • AngularJS:$http.get 405(不允许使用方法)

    当我收到来自 url 的请求时 如下所示 http method GET url http mooc lms dev web nd v0 3 users login success function data status headers
  • Anaconda + Spyder 中的渲染不正确(文本颜色错误)

    今天打开 Anaconda 并从中启动 Spyder 时 我遇到了一些 对我来说 无法解释的渲染问题 我不确定这是否是正确的术语 文本未按正常方式显示 请参见下面的示例图片 这是 Anaconda Navigator GUI 中的示例 ht
  • 如果西班牙语站点图像不存在,如何加载英语站点图像

    我有一个多语言网站 使用html javascript 如果西班牙语文件夹中不存在图像 则可能是ajax 它应该从英语文件夹中加载图像 路径示例 英文网站 images home jpg 西班牙网站 es images home jpg 今
  • 等到 bootstrapTable 完全加载后再执行某些操作

    我有一个基于 javascript 的 bootstrapTable 可以动态生成表和数据 我在尝试将一些 CSS 样式和类应用于某些td正在生成的这个问题 https stackoverflow com questions 3033414
  • Haskell 与 Prolog 的比较 [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 Prolog 比 Haskell 能更好地解决哪些问题 这两种语言之间的主要区别是什么 Edit 是否有一个可以模仿 Prolog 功能的 Ha
  • 使用 Javascript/jQuery 打开选择?

    有没有办法使用 Javascript 和 jQuery 打开选择框
  • Rails:使用 will_paginate 每页显示 10 或 20 或 50 个结果如何?

    又是我 我需要使用 will paginate 插件在我的帖子列表中显示 10 或 20 或 50 个结果每页的结果数 你能帮我吗 Thanks 看起来OP也在这里问 http railsforum com viewtopic php id
  • iptables 转发和输入

    我有一个装有 Linux 电脑的家庭网络 所有电脑都运行着 iptables 我认为将我的 LAN 放在 Linux 网关 防火墙后面更容易 所以我在我的路由器和 LAN 之间放置了一台电脑 带有 fedora 没有 gui 并配置了 ip
  • Amazon S3 预签名 URL

    如果我将我的应用程序设置为生成用于访问 S3 媒体的预签名 URL 以便我可以将文件设置为私有 除非通过登录用户访问 那么如果有人有权访问 那么我这样说是否正确到 URL 在到期时间内 他们可以看到该文件 尽管它是 私有 的 因此 如果有人
  • 重载运算符和链接

    我有一个类 其中包含存储动态二维数组的对象 矩阵 我正在尝试重载 运算符 以便将 1 个矩阵复制到另一个矩阵上 以下作品 Square Matrix a b c a b 但是 这不起作用 a b c 它给了我以下错误1 与operator
  • QUANTEDA - 无效类“dfmSparse”对象

    我收到此警告消息 我使用这些数据 https github com kbenoit quanteda tree master data data char inaugural RData https github com kbenoit q
  • OpenCV 和 CMake 的链接问题

    我正在编写一个使用OpenCV的程序 安装在本地目录中 因为我在那台机器上没有root权限 并且我已经编写了相应的CMakeLists txt文件 我的问题是编译在链接阶段以不同的方式失败 我花了三个小时尝试了网上提出的所有不同的解决方案
  • 如何获取随机 json 数据并附加到 div 元素

    说这是我的 json imageSmall images employee jpgs employees abhishek 80x80 jpg imageBig images employee jpgs employees abhishek