html5 展示json数据,以常见页面元素展示JSON数据

1

2

3

4

jsondemo

5

6

7

8

9

10 $(function () {//

11 var json = {"name":"jillion","age":18};

12 console.log(typeof json);//Object

13 //js中将js的对象转化成字符串，有利于网络间的传输

14 var str = JSON.stringify(json);//String if yes

15 //"{'name':'jillion','age':18}"

16 //将json格式的字符串如何转换成对象，方便属性的获取

17 var obj = JSON.parse(str);

18 // alert(obj.name);

19

20

21 //json字符串数组

22 var countryArray = [ "中国", "美国", "俄罗斯" ];

23 var $countryArray = $(countryArray);

24 $countryArray.each(function (i) {

25 $("#arraySel").append(""+this+"");

26 $("#arrayUl").append("

"+this+"")

27 })

28

29 //json对象数组

30 // var userObjArray = [

31 // {"name":"jillion","age":18},

32 // {"name":"小龙","age":17},

33 // {"name":"岚岚","age":16},

34 // {"name":"必成","age":8}

35 // ];

36 // //1.$.each(arr,function(i,obj){})

37 // //2.$arr.each(function(i,obj){});

38 // var aa = $("#tabledemo").append("

序列号姓名年龄");

39 // $.each(userObjArray,function (i, obj) {

40 // aa.append("

"+(i+1)+""+(obj.name)+""+(obj.age)+"")

41 // })

42

43 var yonghuArray = [

44 {"ID":"1","name":"admin","address":"北京市海淀区","mobile":"12312345678"},

45 {"ID":"2","name":"梅西","address":"湖北省武汉市","mobile":"12315263748"},

46 {"ID":"3","name":"詹姆斯","address":"四川省成都市","mobile":"12312345679"},

47 {"ID":"4","name":"乔丹","address":"北京市海淀区","mobile":"12312345689"},

48 ];

49

50 var kgc = $("#cc").append("

"+

51 "

ID姓名住址手机");

52 $.each(yonghuArray,function (i,obj) {

53 kgc.append("

"+(i+1)+""+(obj.name)+""+

54 (obj.address)+"

"+(obj.mobile)+"")

55

56 })

57 })

58

59

60

61 JSON格式的字符串数组:

62

63

64

65

66

67

68

View Code

标签：obj,name,展示,age,json,JSON,var,append,页面

来源： https://www.cnblogs.com/lpbk/p/11691964.html