资讯专栏INFORMATION COLUMN

json生成器

csRyan / 1683人阅读

摘要:最近的项目需要模拟一个格式的数据,格式如下我们要实现这个功能,变量和数组声明随机生成年级随机生成班级随机生成姓赵钱孙李周吴郑王冯陈卫蒋沈韩杨朱秦许何吕施张随机生成名伟芳娜丽强静敏磊军涛明刚洁斓文华金斌波辉亮超构造函数下面我们用给

最近的项目需要模拟一个json格式的数据,
格式如下

</>复制代码

  1. {
  2. "studentA": [
  3. {
  4. "grade": "A",
  5. "class": "B",
  6. "course": {
  7. "a": "0-100",
  8. " b ": "0-100"
  9. }
  10. }
  11. ],
  12. "studentB": [
  13. {
  14. "grade": "A",
  15. "class": "B",
  16. "course": {
  17. "a": "0-100",
  18. " b ": "0-100"
  19. }
  20. }
  21. ]
  22. }

我们要实现这个功能,
1、变量和数组声明

</>复制代码

  1. var score= new Array();
  2. var num1=d3.range(6).map(d3.random.normal(0.8,0.1));
  3. // 随机生成年级
  4. var grades=[1,2,3,4];
  5. // 随机生成班级
  6. var classes=[1,2];
  7. //随机生成姓
  8. var lastnames=["赵","钱","孙","李","周","吴","郑","王","冯","陈","卫","蒋","沈","韩","杨","朱","秦","许","何","吕","施","张"];
  9. //随机生成名
  10. var firstnames=["伟","芳","娜","丽","强","静","敏","磊","军","涛","明","刚","洁","斓","文","华","金","斌","波","辉","亮","超"];

2、构造函数

</>复制代码

  1. function getStu(){
  2. var stu = {
  3. "name":"",
  4. "detail":{}
  5. };
  6. var lastname=lastnames[Math.floor(Math.random()*lastnames.length+1)-1];
  7. var firstname=firstnames[Math.floor(Math.random()*firstnames.length+1)-1];
  8. var grade=Math.floor(Math.random()*4+1);
  9. var classe=Math.floor(Math.random()*2+1);
  10. stu.name = lastname+firstname;
  11. stu.detail.grade = grade;
  12. stu.detail.class = classe;
  13. stu.detail.score = num1.map(function(d){
  14. return d*100>100?100:Math.round(d*100);
  15. });
  16. return stu;
  17. }

下面我们用innerHTML给页面中写入内容:

</>复制代码

  1. temp.innerHTML="
  2. {
  3. "":[

  4.   {

  5.    "grade":"",
  6.    "class":"",
  7.    "course":{
  8.    "计算机网络":"",
  9.    "大学英语":"",
  10.    "Web前端开发":"",
  11.    "C语言程序设计":"",
  12.    "数据结构":"",
  13.    "大学物理":"",
  14.    }

  15.   }
  16. ],
  17. }
  18. ";
  19. temp.getElementsByTagName("label")[0].innerHTML=stu.name;
  20. temp.getElementsByTagName("label")[1].innerHTML=stu.detail.grade;
  21. temp.getElementsByTagName("label")[2].innerHTML=stu.detail.class;
  22. temp.getElementsByTagName("label")[3].innerHTML=stu.detail.score[0];
  23. temp.getElementsByTagName("label")[4].innerHTML=stu.detail.score[1];
  24. temp.getElementsByTagName("label")[5].innerHTML=stu.detail.score[2];
  25. temp.getElementsByTagName("label")[6].innerHTML=stu.detail.score[3];
  26. temp.getElementsByTagName("label")[7].innerHTML=stu.detail.score[4];
  27. temp.getElementsByTagName("label")[8].innerHTML=stu.detail.score[5];
  28. document.getElementById("main").appendChild(temp);
  29. }

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/79194.html

相关文章

  • 慕课网_《JSON快速入门(Java版)》学习总结

    摘要:时间年月日星期日说明本文部分内容均来自慕课网。慕课网教学示例源码无个人学习源码第一章课程概述课程介绍课程须知本课程面向所有使用语言进行开发的小伙伴。 时间:2017年05月21日星期日说明:本文部分内容均来自慕课网。@慕课网:http://www.imooc.com教学示例源码:无个人学习源码:https://github.com/zccodere/s... 第一章:课程概述 1-1 ...

    shiina 评论0 收藏0
  • 如何提升JSON.stringify()的性能?

    摘要:然后,生成的完整的字符串大致如下以上是一系列通用的键值转换方法就是的主体函数其他属性的拼接最后,将字符串传入构造函数来创建相应的函数。 1. 熟悉的JSON.stringify() 在浏览器端或服务端,JSON.stringify()都是我们很常用的方法: 将 JSON object 存储到 localStorage 中; POST 请求中的 JSON body; 处理响应体中的 ...

    tomlingtm 评论0 收藏0
  • Swagger 生成 PHP restful API 接口文档

    摘要:需求和背景需求为客户端同事写接口文档的各位后端同学已经在各种场合回忆了使用自动化文档工具前手写文档的血泪史我的故事却又不同因为首先来说我在公司是组负责人属于上述血泪史中催死人不偿命的客户端阵营但血泪史却是相通的没有自动化文档的日子对接口就是 需求和背景 需求: 为客户端同事写接口文档的各位后端同学,已经在各种场合回忆了使用自动化文档工具前手写文档的血泪史.我的故事却又不同,因为首先来说...

    xiaotianyi 评论0 收藏0
  • 使用form-create动态生成vue组件,支持json格式

    摘要:说明文档示例商品名称商品加个创建时间是否显示显示不显示通过建立一个虚拟的方式生成自定义组件生成上面的代码是通过生成器动态生成一个正在加载的按钮组件上面的代码是通过方式动态生成一个按钮组件修改可以通过一下两种方式动态修改组件的配置项通 [github] | [说明文档] 示例 showImg(https://segmentfault.com/img/remote/1460000017...

    happyhuangjinjin 评论0 收藏0
  • Json-path学习笔记<一>

    摘要:简介是用于结构化数据序列化的一种文本格式,包含种基础类型字符串,数字,布尔和和两种结构类型对象和数组。对象是一个由零或者多个名值对组成的无序集合,其中名值对中名是字符串类型,值则可以是字符串,数字,布尔,,对象或数组类型。 Json JavaScript Object Notation (JSON)是一个轻量级的,基于文本的,跨语言的数据交换格式。它从ECMAScript编程语言标准(...

    Vicky 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<