element

您所在的位置：网站首页 › html处理json数据渲染到页面 › element

element

2023-12-31 09:14| 来源: 网络整理| 查看: 265

element-ui通过解析后端json数组动态渲染页面了解json解析json数组根据json动态渲染页面实现效果

了解json

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。 JSON 语法规则： JSON是一个标记符的序列。这套标记符包含六个构造字符、字符串、数字和三个字面名。 JSON是一个序列化的对象或数组。

六个构造字符： begin-array = ws %x5B ws ; [ 左方括号 begin-object = ws %x7B ws ; { 左大括号 end-array = ws %x5D ws ; ] 右方括号 end-object = ws %x7D ws ; } 右大括号 name-separator = ws %x3A ws ; : 冒号 value-separator = ws %x2C ws ; , 逗号在这六个构造字符的前或后允许存在无意义的空白符(ws): ws = *（%x20 /; 空间 %x09 /; 水平标签 %x0A /; 换行或换行 %x0D）; 回程 3.JSON的值: 3.1 JSON的构成: ws 值 ws 3.2值可以是对象、数组、数字、字符串或者三个字面值(false、null、true)中的一个。值中的字面值中的英文必须使用小写。 3.2.1对象由花括号括起来的逗号分割的成员构成，成员是字符串键和上文所述的值由逗号分割的键值对组成，如： {"name": "John Doe", "age": 18, "address": {"country" : "china", "zip-code": "10000"}} 3.2.2数组是由方括号括起来的一组值构成，如： [3, 1, 4, 1, 5, 9, 2, 6] 3.2.4数字也与C或者Java的数值非常相似。除去未曾使用的八进制与十六进制格式。除去一些编码细节。一些合法的JSON的实例： {"a": 1, "b": [1, 2, 3]} [1, 2, "3", {"a": 4}] 3.14 "plain_text"

JSON 与 JS 对象的关系：很多人搞不清楚 JSON 和 JS 对象的关系，甚至连谁是谁都不清楚。其实，可以这么理解： JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串。如：

var obj = {a: 'Hello', b: 'World'}; //这是一个对象，注意键名也是可以使用引号包裹的 var json = '{"a": "Hello", "b": "World"}'; //这是一个 JSON 字符串，本质是一个字符串

JSON 和 JS 对象互转：要实现从JSON字符串转换为JS对象，使用 JSON.parse() 方法：

var obj = JSON.parse('{"a": "Hello", "b": "World"}'); //结果是 {a: 'Hello', b: 'World'}

要实现从JS对象转换为JSON字符串，使用 JSON.stringify() 方法：

var json = JSON.stringify({a: 'Hello', b: 'World'}); //结果是 '{"a": "Hello", "b": "World"}' 解析json数组

一、标准的json数组：

var result=[{"flag":1,"macId":"2","mbId":0,"userName":"XXX"},{"flag":1,"macId":"1","mbId":1,"userName":"YYY"}];

在进行对该json数组遍历的时候，有两种遍历方法：

1. for (var i = 0; i //表示遍历数组，而i表示的是数组的下标值， //result[i]表示获得第i个json对象即JSONObject //result[i]通过.字段名称即可获得指定字段的值 result[i].userName; }

二、不标准的json数组：

var result={"datas":[{"flag":1,"macId":"2","mbId":0,"userName":"XXX"},{"flag":1,"macId":"1","mbId":1,"userName":"YYY"}]};

在遍历不标准的json数组的时候，要先对其解析出标准的json数组格式即为[{},{}]:

var data= result.datas; 1. for (var i = 0; i //表示遍历数组，而i表示的是数组的下标值， //data[i]表示获得第i个json对象即JSONObject //data[i]通过.字段名称即可获得指定字段的值 data[i].userName; }

在前端解析后端传过来的字符串有两种方法：

1. eval() 2.JSON.parse() //jquery的底层 $.parseJSON()用的还是JSON.parse(); 根据json动态渲染页面 var tableSchema = response.data.result.tableSchema;//通过接口获取的json数组 this.tableSchema = tableSchema; var obj = JSON.parse(tableSchema);//解析json // 动态渲染 //input类型 //select类型 //image类型实现效果

一、后台返回的json数组：

tableSchema: "[{"defaultValue":"100110001","label":"编号","options":[],"placeholder":"请输入编号","required":true,"tag":"el-input"},{"defaultValue":"1","label":"下拉选择","options":[{"label":"选项一","value":1},{"label":"选项二","value":2}],"placeholder":"请选择下拉选择","required":true,"tag":"el-select"},{"defaultValue":"2020-08-25 14:20","label":"日期选择","options":[],"placeholder":"请选择日期选择","required":true,"tag":"el-date-picker"},{"defaultValue":"http:\/\/test.jgwyapi.lanlin.site\/upload\/2020-08-25\/33fc50aca3d6409eac8cfefdf6c85943.png","label":"上传","options":[],"placeholder":"","required":true,"tag":"el-upload"}]"

二、渲染效果：

在这里插入图片描述

【本文地址】

element

element

今日新闻

推荐新闻