提取JSON文件和生成JSON文件

君秋漠

已于 2023-11-23 16:59:49 修改

阅读量784

点赞数

文章标签： json

于 2023-11-15 16:45:25 首次发布

本文链接：https://blog.csdn.net/weixin_44563526/article/details/133045109

版权

文章目录

给一个json文件，然后根据要求生成一个Json文件
- 全部代码：
- - 1.json文件：
  - 2.vue文件：

给一个json文件，然后根据要求生成一个Json文件

提供的 json文件如图
生成文件为第二种
要求：
1.没有id的对象不需要转换
2.id>=8000的对象不需要转换
3.在id转换成name的时候，在id前加上“flaw_type_”拼接成name
nickName是show属性的转换
子对象的nickName 是父对象的属性名为Attributes的兄弟对象的show属性加上“_”下划线，再加自身的show属性拼接而成。

在这里插入图片描述

1.获取文件内容

<script>
 import d from './params.json'
 //直接获取值
  created() {
    this.Gdata = d;
    // this.arrP();
    // console.log("data",d)
  },
</script>

2.组成新的内容

  methods: {
    btn() {
      var listt = {}; //重组数组存放位置
      for (var i in this.Gdata) {
        var id = this.Gdata[i].Attributes.id; //第一层id
        var show = this.Gdata[i].Attributes.show; //第一层name
        if (this.Gdata[i]["Attributes"] != undefined) { //判断第一层是否有值
          if (id!=null && id < 8000 && show != undefined) {
            var obj = {};
            obj.name = "flaw_type_" + id;
            obj.nickName = this.Gdata[i].Attributes.show;
            listt.push(obj);
          }
        } 
          for (var j in this.Gdata[i]) {//开始循环判断第二层
            if (
              j != "Attributes" &&
              this.Gdata[i][j]["Attributes"] != undefined
            ) {
              // console.log(
              //   j,
              //   "第1",
              //   this.Gdata[i][j].Attributes.id,
              //   this.Gdata[i][j].Attributes.show
              // );
              var id1 = this.Gdata[i][j].Attributes.id;
              var show1 = this.Gdata[i][j].Attributes.show;
              if (id1 != null && id1 < 8000 && show1 != undefined) {
                var obj = {};
                obj.name = "flaw_type_" + id1;
                obj.nickName = show + "_" + show1;
              }
              listt.push(obj);
              // console.log("不知道sss", listt);
            } else {
              // console.log(j, "第2", this.Gdata[i][j].id);
            }
        }
        console.log("最终",listt)
      }
      //下载数据
      //将数据转化为Json格式
      var js = JSON.stringify(listt);
      //创建一个文本blob对象
      var  blob = new Blob([js],{type:'application/json'})
      //构造下载连接
      const url = URL.createObjectURL(blob)
      //创建下载连接的A标签
      const a = document.createElement('a')
      a.href = url
      a.download  = 'target_sample.json'
      //模拟点击下载连接
      document.body.appendChild(a)
      a.click()
      document.body.removeChild(a)
      //释放资源
      URL.revokeObjectURL(url)
    }

3.生成json文件(本地)

//vue里面
<el-button @click="btn()">点击生成json文件</el-button>
//方法
  methods: {
    btn() {
      var listt = {}; //重组数组存放位置
      //下载数据
      //将数据转化为Json格式
      var js = JSON.stringify(listt);
      //创建一个文本blob对象
      var  blob = new Blob([js],{type:'application/json'})
      //构造下载连接
      const url = URL.createObjectURL(blob)
      //创建下载连接的A标签
      const a = document.createElement('a')
      a.href = url
      a.download  = 'target_sample.json'
      //模拟点击下载连接
      document.body.appendChild(a)
      a.click()
      document.body.removeChild(a)
      //释放资源
      URL.revokeObjectURL(url)
    }

全部代码：

1.json文件：

{
    "g_unKown": {
        "Attributes": {
            "alarmnum": 10,
            "analysis": false,
            "color": "#ff6600",
            "id": 8000
        }
    },
    "主要缺陷": {
        "Attributes": {
            "color": "#aa0000",
            "enable": true,
            "algorithm_id":1913,
            "id": 1300,
            "show": "大型缺陷"
        },
        "Level_0": {
            "Attributes": {
                "color": "#bb0000",
                "enable": true,
                "algorithm_id":1913,
                "id": 1301,
                "show": "可见"
            }
        },
        "Level_1": {
            "Attributes": {
                "color": "#aa0010",
                "enable": true,
                "algorithm_id":1413,
                "id": 1302,
                "show": "不可见"
            }
        },
        "min": {
            "show": "最小像素数",
            "unit": "个",
            "value": 25
        }
    },
    "颜色缺陷": {
        "Attributes": {
            "color": "#aa0010",
            "enable": true,
            "algorithm_id":913,
            "id": 1200,
            "show": "白点"
        },
        "Level_0": {
            "Attributes": {
                "color": "#aa0010",
                "enable": true,
                "algorithm_id":1413,
                "id": 1201,
                "show": "微小白点"
            }
        },
        "Level_1": {
            "Attributes": {
                "color": "#aa0010",
                "enable": true,
                "algorithm_id":1413,
                "id": 1202,
                "show": "小白点"
            }
        },
        "Level_2": {
            "Attributes": {
                "color": "#aa0010",
                "enable": true,
                "algorithm_id":1413,
                "id": 1203,
                "show": "中白点"
            }
        },
        "Level_3": {
            "Attributes": {
                "color": "#aa0010",
                "enable": true,
                "algorithm_id":63,
                "id": 1204,
                "show": "大白点"
            }
        },
        "Level_4": {
            "Attributes": {
                "color": "#aa0010",
                "enable": true,
                "algorithm_id":213,
                "id": 1205,
                "show": "超大白点"
            }
        }
    },
    "纹路": {
        "Attributes": {
            "color": "#aa0010",
            "enable": true,
            "algorithm_id":1413,
            "id": 1700,
            "show": "划痕/划伤"
        },
        "Level_0": {
            "Attributes": {
                "color": "#aa0010",
                "enable": true,
                "algorithm_id":23,
                "id": 1701,
                "show": "条纹"
            }
        },
        "ashow": {
            "max": 50,
            "show": "横条纹灵敏度",
            "unit": "等级",
            "value": 10
        },
        "minLineHeight": {
            "max": 50,
            "show": "最小条纹长度",
            "unit": "等级",
            "value": 10
        },
        "verLineFliterGradient": {
            "max": 50,
            "show": "竖条纹灵敏度",
            "unit": "等级",
            "value": 0
        }
    },
    "webconfig":{
        "Attributes": {
            "host":"192.168.1.1",
            "port":"8008"
        }
    }
}

2.vue文件：

<template>
    <div id="app">
      <div>
        <el-button @click="btn()">点击生成json文件</el-button>
      </div>
    </div>
  </template>
  
  <script>
  import d from "./params.json";
  export default {
    data() {
      return {
        Gdata: null,
        SelectId: [], // 已选列表
        arrList: [
          12, 12, 12, 12, 12, 1234, 1234567, 1234, 12, 12, 1234567812345678, 12,
        ],
      };
    },
    computed: {
    },
    created() {
      this.Gdata = d;
      console.log("d",this.Gdata)
    },
    methods: {
      btn() {
        var listt = []; //重组数组存放位置
        for (var i in this.Gdata) {
          var id = this.Gdata[i].Attributes.id; //第一层id
          var show = this.Gdata[i].Attributes.show; //第一层name
          if (this.Gdata[i]["Attributes"] != undefined) { //判断第一层是否有值
            if (id!=null && id < 8000 && show != undefined) {
              var obj = {};
              obj.name = "flaw_type_" + id;
              obj.nickName = this.Gdata[i].Attributes.show;
              console.log("obj",obj)
              listt.push(obj);
            }
          } 
            for (var j in this.Gdata[i]) {//开始循环判断第二层
              if (
                j != "Attributes" &&
                this.Gdata[i][j]["Attributes"] != undefined
              ) {
                // console.log(
                //   j,
                //   "第1",
                //   this.Gdata[i][j].Attributes.id,
                //   this.Gdata[i][j].Attributes.show
                // );
                var id1 = this.Gdata[i][j].Attributes.id;
                var show1 = this.Gdata[i][j].Attributes.show;
                if (id1 != null && id1 < 8000 && show1 != undefined) {
                  var obj = {};
                  obj.name = "flaw_type_" + id1;
                  obj.nickName = show + "_" + show1;
                }
                listt.push(obj);
                // console.log("不知道sss", listt);
              } else {
                // console.log(j, "第2", this.Gdata[i][j].id);
              }
          }
          console.log("最终",listt)
        }
        //下载数据
        //将数据转化为Json格式
        var js = JSON.stringify(listt);
        //创建一个文本blob对象
        var  blob = new Blob([js],{type:'application/json'})
        //构造下载连接
        const url = URL.createObjectURL(blob)
        //创建下载连接的A标签
        const a = document.createElement('a')
        a.href = url
        a.download  = 'target_sample.json'
        //模拟点击下载连接
        document.body.appendChild(a)
        a.click()
        document.body.removeChild(a)
        //释放资源
        URL.revokeObjectURL(url)
      },
      // selectFun(id) {
      //   if (!this.SelectId.includes(id)) {
      //     this.SelectId.push(id); // 判断已选列表中是否存在该id，不是则追加进去
      //   } else {
      //     let index = this.SelectId.indexOf(id); // 求出当前id的所在位置
      //     this.SelectId.splice(index, 1); // 否则则删除
      //   }
      // },
      //数组排序：
      arrP() {
        var l1 = []; //25%  2,1
        var l2 = []; //50%  4,3
        var l3 = []; //100% 5-无穷
        this.arrList.forEach((i) => {
          var il = i.toString().length;
          if (il > 0 && il <= 2) {
            l1.push(i);
          }
          if (il >= 3 && il <= 4) {
            l2.push(i);
          }
          if (5 <= il) {
            l3.push(i);
          }
        });
        // console.log(l1)
        // console.log(l2)
        // console.log(l3)
        console.log("l1", l1.length);
        if (l1.length > 4) {
          // this.getMApp(l1)
          const len = l1.length;
          let result = [];
          const sliceNum = 4;
          console.log("dd", len % sliceNum);
          //分割
          for (let i = 0; i < len / sliceNum; i++) {
            result.push(l1.slice(i * sliceNum, (i + 1) * sliceNum));
          }
          console.log("res", result);
          //补全
          for (let j = 0; j < sliceNum - (len % sliceNum); j++) {
            console.log("ddd", result[1]);
            // result[result.length - 1].push({});
          }
          // console.log("ew",result);
        }
        console.log("l1", l1);
        this.arrList = [];
        this.arrList.push(l1);
        this.arrList.push(l2);
        this.arrList.push(l3);
        console.log(this.arrList);
      },
      //分割数组
      getMApp(list) {
        console.log("map", list);
        let len = list.length;
        let newList = [];
        if (len) {
          var chunk = 4;
          for (var i = 0, j = len; i < j; i += chunk) {
            newList.push(list.slice(i, i + chunk).join(","));
          }
        }
        return newList;
      },
    },
  };
  </script>
  <style lang="less" scoped>
  * {
    color: #333;
    box-sizing: border-box;
    user-select: none;
  }
  .CheckBox {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 50px auto;
    margin-bottom: 20px;
  }
  .CheckItem {
    display: flex;
    margin: 0px 30px 30px 0px;
    align-items: center;
  }
  .select {
    width: 20px;
    height: 20px;
    border-radius: 2px;
    border: 1px solid #ccc;
    display: flex;
    justify-content: center;
    cursor: pointer;
    margin-right: 10px;
    align-items: center;
  }
  .selectActv::before {
    display: block;
    content: "";
    width: 5px;
    height: 12px;
    border-bottom: 2px solid #aaa;
    border-right: 2px solid #aaa;
    transform: rotate(45deg);
  }
  .selectAll {
    display: flex;
  }
  .content {
    width: 500px;
    margin: 120px auto;
  }
  .obj {
    background: rgb(228, 197, 203);
    height: 1000px;
  }
  .c1 {
    width: 100%;
    height: 50px;
    // display: flex;
  }
  .c2 {
    width: 50%;
    height: 50px;
    display: flex;
  }
  .c3 {
    width: 100%;
    height: 50px;
    display: flex;
  }
  .c3 .t {
    width: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  </style>

君秋漠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
提取JSON文件和生成JSON文件

子对象的nickName 是父对象的属性名为Attributes的兄弟对象的show属性加上“_”下划线，再加自身的show属性拼接而成。3.在id转换成name的时候，在id前加上“flaw_type_”拼接成name。2.id>=8000的对象不需要转换。nickName是show属性的转换。1.没有id的对象不需要转换。3.生成json文件(本地)提供的 json文件如图。
复制链接

扫一扫