[Practice] json array, and the json object array cycle shown in the drop-down box to select the page, ul list, table, etc.

 1 <%--
 2   Created by IntelliJ IDEA.
 3   User: L
 4   Date: 2019/10/16
 5   Time: 16:17
 6   To change this template use File | Settings | File Templates.
 7 --%>
 8 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
 9 <html>
10 <head>
11     <title>用户信息</title>
12     <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
13 </head>
14 <body>
15 <script type="text/javascript">
16     $(function () {
17         var json = {"name":"jillion","age":18};
18         console.log(typeof json);
19         var str = JSON.stringify(json);
20         var obj = JSON.parse(str);
21         var UserArray=[
22             {               "empId": 2012,
23                             "empName": "李逵",
24                             "gender": "M",
25                             "email": "[email protected]",
26                             "dId": 1,
27                             "department": {
28                                 "deptId": 1,
29                                 "deptName": "开发部"
30                             }
31                         }, {
32                             "empId": 2013,
33                             "empName": "3c1ba0",
34                             "gender": "M",
35                             "email": "[email protected]",
36                             "dId": 1,
37                             "department": {
38                                 "deptId": 1,
39                                 "deptName": "开发部"
40                             }
41                         }, {
42                             "empId": 2014,
43                             "empName": "153421",
44                             "gender": "M",
45                             "email": "[email protected]",
46                             "dId": 1,
47                             "department": {
48                                 "deptId": 1,
49                                 "deptName": "开发部"
50                             }
51                         }, {
52                             "empId": 2015,
53                             "empName": "cd0412",
54                             "gender": "M",
55                             "email": "[email protected]",
56                             "dId": 1,
57                             "department": {
58                                 "deptId": 1,
59                                 "deptName": "开发部"
60                             }
61                         }, {
62                             "empId": 2016,
63                             "empName": "4240d3",
64                             "gender": "M",
65                             "email": "[email protected]",
66                             "dId": 1,
67                             "department": {
68                                 "deptId": 1,
69                                 "deptName": "开发部"
70                             }
71             }
72         ];
73         var UserArray = $(UserArray);
74         UserArray.each(function (i) {
75             //下拉列表
76             $("#arraySel").append("<option value='"+(i+1)+"'>"+this.department.deptName+"-"+this.empId+"-"+this.empName+"-"+this.email+"</option>");
77             //ul列表
78             $("#arrayUl").append("<li>"+this.department.deptName+"-"+this.empId+"-"+this.empName+"-"+this.email+"</li>");
AA = $ ( "# UserTable"). The append ( "<TR> <TD> ID </ td> <td> Name </ td> <td> Gender </ td > <td> email </ td> <td> department </ td> </ TR> "var82table//8180        })
79)
  
         
         83         $.each(UserArray,function (i, obj) {
84             aa.append("<tr><td>"+(obj.empId)+"</td><td>"+(obj.empName)+"</td><td>"+(obj.gender)+"</td><td>"+(obj.email)+"</td><td>"+(obj.department.deptName)+"</td></tr>")
85         })
86     })
87 </script>
88 <select id="arraySel"></select>
89 <ul id="arrayUl"></ul>
90 <table id="usertable" border='1'></table>
91 </body>
92 </html>
[Practice] json array, and the json object array cycle shown in the drop-down box to select the page, ul list, table, etc.

Guess you like
