了解json

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

1. 六个构造字符：
   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 ; , 逗号
2. 在这六个构造字符的前或后允许存在无意义的空白符(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 < result.length; i++) {
        //result[i]表示获得第i个json对象即JSONObject
        //result[i]通过.字段名称即可获得指定字段的值
        result[i].userName;
    }
2.  for(var i in result){
        //表示遍历数组，而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 < data.length; i++) {
        //data[i]表示获得第i个json对象即JSONObject
        //data[i]通过.字段名称即可获得指定字段的值
        data[i].userName;
    }
2.  for(var i in data){
        //表示遍历数组，而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

// 动态渲染
<el-form class="info-form">
            <el-form-item 
              :label="obj.label" 
              v-for = "(obj,index) in obj"
              :key = "index"
              >
              //input类型
              <el-input
                style="padding-left: 0px; padding-right: 0px; width: 200px; height: 40px;"
                v-if = "obj.tag === 'el-input'"
                :placeselectholder = "obj.placeselectholder"
                :required  = obj.required
                prop = "defaultValue"
                v-model = "obj.defaultValue"
                disabled="disabled"
                >                                      
              </el-input>
              //select类型
              <el-select
                style="padding-left: 0px; padding-right: 0px; width: 200px; height: 40px;"
                v-if = "obj.tag === 'el-select'"
                :placeholder = "obj.placeholder"
                :required  = obj.required
                v-model = "obj.defaultValue"
                disabled="disabled" >
                <el-option
                  v-for = "(option,index) in obj.options"
                  :label = "option.value"
                  :value = "option.value"
                  :key = "index">
                  </el-option>
              </el-select>
              <el-input
                style="padding-left: 0px; padding-right: 0px; width: 200px; height: 40px;"
                v-if = "obj.tag === 'el-date-picker'"
                :placeholder = "obj.placeholder"
                :required  = obj.required    
                v-model = "obj.defaultValue"
                disabled="disabled">
              </el-input>
              //image类型
              <div class="demo-image__preview" style=" padding-left: 0px;padding-right: 295px;">
              <el-image
                v-if = "obj.tag === 'el-upload'"
                style="width: 66.5px; height: 66.5px;"
                :placeholder = "obj.placeholder"
                :required  = obj.required
                :key = item
                v-for = "(item,index) in (obj.defaultValue).split(',')"
                :src = "(obj.defaultValue).split(',')[index]"
                :preview-src-list = "(obj.defaultValue).split(',')">
              </el-image>
            </div>
            </el-form-item>
          </el-form>

实现效果

一、后台返回的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"}]"

二、渲染效果 ：