【御控物联】JavaScript JSON结构转换（8）：数组To数组——多层属性重组

news/2024/7/24 10:20:45 标签: javascript, json, 开发语言

文章目录

  • 一、JSON结构转换是什么？
  • 二、案例之《JSON数组 To JSON数组》
  • 三、代码实现
  • 四、在线转换工具
  • 五、技术资料

一、JSON结构转换是什么？

JSON结构转换指的是将一个JSON对象或JSON数组按照一定规则进行重组、筛选、映射或转换，生成新的JSON对象或数组的过程。这种转换可以包括改变JSON数据的结构、提取特定字段、合并多个JSON数据，或者对数据进行计算和处理等操作。

在JSON结构转换中，常见的操作包括：

  • 提取字段：从一个JSON对象中提取特定字段，生成新的JSON对象。
  • 过滤数据：根据条件过滤JSON数据，生成符合条件的新JSON对象或数组。
  • 映射转换：将一个JSON对象中的字段映射到另一个字段，生成新的JSON对象。
  • 合并数据：将多个JSON对象或数组合并成一个新的JSON对象或数组。

JSON结构转换通常在数据处理、数据清洗、数据分析等场景中广泛应用。通过结构转换，可以根据需求定制化地处理JSON数据，使其符合特定的业务逻辑或数据格式要求。
为此我们提供了一个简单开源的JS类库，接下来我们对此类库进行详细讲解。

二、案例之《JSON数组 To JSON数组》

源JSON结构：

json">{
  "a": [
    [
      {
        "c_child": "2"
      }
    ],
    [
      {
        "d_child": "3"
      }
    ],
    [
      {
        "e_child": "4"
      }
    ]
  ]
}

目标JSON结构：

json">{
  "b1": [
    [
      {
        "k1_child": "v1_child"
      }
    ],
    [
      {
        "k2_child": "v2_child"
      }
    ],
    [
      {
        "k3_child": "v3_child"
      }
    ]
  ]
}

转换需求：

以下需求分别执行

场景一：

  1. 将源结构的“a”值替换到目标结构的“b1[0]”中
  2. 将源结构的“a”值追加到目标结构的“b1[1]”中
  3. 将源结构的“a”值替换到目标结构的“b1[2]”中

场景二：

  1. 将源结构的“a[0]”值替换到目标结构的“b1[0]”中
  2. 将源结构的“a[0]”值追加到目标结构的“b1[1]”中
  3. 将源结构的“a[0]”值替换到目标结构的“b1[2]”中

场景三：

  1. 将源结构的“a[0]”值追加到目标结构的“b1[0]”中
  2. 将源结构的“a[1]”值追加到目标结构的“b1[0]”中
  3. 将源结构的“a[2]”值追加到目标结构的“b1[0]”中

三、代码实现

场景一：

  1. 将源结构的“a”值替换到目标结构的“b1[0]”中
  2. 将源结构的“a”值追加到目标结构的“b1[1]”中
  3. 将源结构的“a”值替换到目标结构的“b1[2]”中
import JsonTranferUtil from './json_transfer_new'
const jsonOrg = {
  "a": [
    [
      {
        "c_child": "2"
      }
    ],
    [
      {
        "d_child": "3"
      }
    ],
    [
      {
        "e_child": "4"
      }
    ]
  ]
};
const jsonAim = {
  "b1": [
    [
      {
        "k1_child": "v1_child"
      }
    ],
    [
      {
        "k2_child": "v2_child"
      }
    ],
    [
      {
        "k3_child": "v3_child"
      }
    ]
  ]
};
/// 转换类型
/// 1：源Key->目标Key
/// 2：源Key->目标Value
/// 3：源Value->目标Key
/// 4：源Value->目标Value
const mappings = [
  {
    "AimJsonPath": "root.b1[0]",
    "OrgJsonPath": "root.a",
    "TranType": 4,
    "Options": {
      "KeyInitIndex": 0,
      "AddElementsOption": "1",
      "TranOP": "1",
      "TranWay": "1"
    }
  },
  {
    "AimJsonPath": "root.b1[1]",
    "OrgJsonPath": "root.a",
    "TranType": 4,
    "Options": {
      "KeyInitIndex": 0,
      "AddElementsOption": "1",
      "TranOP": "1",
      "TranWay": "1"
    }
  },
  {
    "AimJsonPath": "root.b1[2]",
    "OrgJsonPath": "root.a",
    "TranType": 4,
    "Options": {
      "KeyInitIndex": 0,
      "AddElementsOption": "1",
      "TranOP": "1",
      "TranWay": "1"
    }
  }
];
/******************* 测试程序***************** */
let jsonTranferUtil = new JsonTranferUtil(jsonOrg, jsonAim, mappings);
let result = jsonTranferUtil.tranJson();
console.log("*************************最终转换结果*********************************")
console.log(JSON.stringify(result), 88888888888)

执行结果如下：
在这里插入图片描述

场景二：

  1. 将源结构的“a[0]”值替换到目标结构的“b1[0]”中
  2. 将源结构的“a[0]”值追加到目标结构的“b1[1]”中
  3. 将源结构的“a[0]”值替换到目标结构的“b1[2]”中

import JsonTranferUtil from './json_transfer_new'
const jsonOrg = {
  "a": [
    [
      {
        "c_child": "2"
      }
    ],
    [
      {
        "d_child": "3"
      }
    ],
    [
      {
        "e_child": "4"
      }
    ]
  ]
};
const jsonAim = {
  "b1": [
    [
      {
        "k1_child": "v1_child"
      }
    ],
    [
      {
        "k2_child": "v2_child"
      }
    ],
    [
      {
        "k3_child": "v3_child"
      }
    ]
  ]
};
/// 转换类型
/// 1：源Key->目标Key
/// 2：源Key->目标Value
/// 3：源Value->目标Key
/// 4：源Value->目标Value
const mappings = [
  {
    "AimJsonPath": "root.b1[0]",
    "OrgJsonPath": "root.a[0]",
    "TranType": 4,
    "Options": {
      "KeyInitIndex": 0,
      "AddElementsOption": "1",
      "TranOP": "1",
      "TranWay": "1"
    }
  },
  {
    "AimJsonPath": "root.b1[1]",
    "OrgJsonPath": "root.a[0]",
    "TranType": 4,
    "Options": {
      "KeyInitIndex": 0,
      "AddElementsOption": "1",
      "TranOP": "1",
      "TranWay": "1"
    }
  },
  {
    "AimJsonPath": "root.b1[2]",
    "OrgJsonPath": "root.a[0]",
    "TranType": 4,
    "Options": {
      "KeyInitIndex": 0,
      "AddElementsOption": "1",
      "TranOP": "1",
      "TranWay": "1"
    }
  }
];
/******************* 测试程序***************** */
let jsonTranferUtil = new JsonTranferUtil(jsonOrg, jsonAim, mappings);
let result = jsonTranferUtil.tranJson();
console.log("*************************最终转换结果*********************************")
console.log(JSON.stringify(result), 88888888888)

执行结果如下：
在这里插入图片描述

场景三：

  1. 将源结构的“a[0]”值追加到目标结构的“b1[0]”中
  2. 将源结构的“a[1]”值追加到目标结构的“b1[0]”中
  3. 将源结构的“a[2]”值追加到目标结构的“b1[0]”中

import JsonTranferUtil from './json_transfer_new'
const jsonOrg = {
  "a": [
    [
      {
        "c_child": "2"
      }
    ],
    [
      {
        "d_child": "3"
      }
    ],
    [
      {
        "e_child": "4"
      }
    ]
  ]
};
const jsonAim = {
  "b1": [
    [
      {
        "k1_child": "v1_child"
      }
    ],
    [
      {
        "k2_child": "v2_child"
      }
    ],
    [
      {
        "k3_child": "v3_child"
      }
    ]
  ]
};
/// 转换类型
/// 1：源Key->目标Key
/// 2：源Key->目标Value
/// 3：源Value->目标Key
/// 4：源Value->目标Value
const mappings = [
  {
    "AimJsonPath": "root.b1[0]",
    "OrgJsonPath": "root.a[0]",
    "TranType": 4,
    "Options": {
      "KeyInitIndex": 0,
      "AddElementsOption": "1",
      "TranOP": "1",
      "TranWay": "1"
    }
  },
  {
    "AimJsonPath": "root.b1[0]",
    "OrgJsonPath": "root.a[1]",
    "TranType": 4,
    "Options": {
      "KeyInitIndex": 0,
      "AddElementsOption": "1",
      "TranOP": "1",
      "TranWay": "1"
    }
  },
  {
    "AimJsonPath": "root.b1[0]",
    "OrgJsonPath": "root.a[2]",
    "TranType": 4,
    "Options": {
      "KeyInitIndex": 0,
      "AddElementsOption": "1",
      "TranOP": "1",
      "TranWay": "1"
    }
  }
];
/******************* 测试程序***************** */
let jsonTranferUtil = new JsonTranferUtil(jsonOrg, jsonAim, mappings);
let result = jsonTranferUtil.tranJson();
console.log("*************************最终转换结果*********************************")
console.log(JSON.stringify(result), 88888888888)

执行结果如下：

在这里插入图片描述

四、在线转换工具

为了让使用者更加方便的配置出映射关系，为此开发了一套在线转换工具，可在工具中通过拖拽即可配置想要的结构转换关系，并可对转换关系所能实现的效果实时进行预览更改。

工具地址：数据转换工具

在这里插入图片描述在这里插入图片描述
在这里插入图片描述

五、技术资料

  • Github:edq-ebara/data-transformation-javascript: 数据转化（javascript） (github.com)
  • 技术探讨QQ群：775932762
  • 工具连接：数据转换工具

http://www.niftyadmin.cn/n/5459563.html

相关文章

C语言例4-7：格式字符f的使用例子

C语言例4-7：格式字符f的使用例子

%f&#xff0c;实型&#xff0c;小数部分为6位 代码如下&#xff1a; //格式字符f的使用例子 #include<stdio.h> int main(void) {float f 123.456;double d1, d2;d11111111111111.111111111;d22222222222222.222222222;printf("%f,%12f,%12.2f,%-12.2f,%.2f\n&qu…
阅读更多...
Redission快速入门

Redission快速入门

Redission快速入门 引入依赖&#xff1a; <dependency><groupId>org.redisson</groupId><artifactId>redisson</artifactId><version>3.13.6</version> </dependency>配置Redisson客户端&#xff1a; Configuration public…
阅读更多...
Spring 中 @Component 和 @Bean 区别

Spring 中 @Component 和 @Bean 区别

Spring 中 Component 和 Bean 区别 文章目录 Spring 中 Component 和 Bean 区别1. 用途不同2.使用方式不同3. 控制权不同4. 灵活性不同参考文献 1. 用途不同 ​ Component 用于标识一个普通的类&#xff0c;Bean用于配置类里面&#xff0c;在方法上面声明和配置 Bean 对象 Tip…
阅读更多...
WPF Width=“2*“

WPF Width=“2*“

在WPF&#xff08;Windows Presentation Foundation&#xff09;中&#xff0c;使用 Width"2*" 这种语法是为控件设置宽度的一种方式&#xff0c;它涉及到WPF的布局系统和一个特定的面板类——Grid。具体解释如下&#xff1a; Grid面板&#xff1a;Width"2*&quo…
阅读更多...
XXE漏洞知识及ctfshow例题

XXE漏洞知识及ctfshow例题

XXE漏洞相关知识 XXE全称为XML Enternal Entity Injection 中文叫xml外部实体注入 什么是xml 简单了解XML&#xff1a; &#xff08;xml和html的区别可以简易的理解成&#xff1a;xml是用来储存数据和传输数据的而html是用来将数据展现出来&#xff09; XML 指可扩展标记语…
阅读更多...
接劳巴，拔掉KL15，MCU重启。不接劳巴，拔掉KL15，MCU正常下电

接劳巴，拔掉KL15，MCU重启。不接劳巴，拔掉KL15，MCU正常下电

最近遇到一个神奇的现象&#xff0c;在调试一个单KL15的项目&#xff0c;发现接着劳特巴赫调试器&#xff0c;然后拔掉KL15&#xff0c;软件进入了重启Reset函数&#xff0c;没有进入期望的下电SwitchOff函数。 而不接劳特巴赫&#xff0c;拔掉KL15&#xff0c;观测电流&#…
阅读更多...
FastAPI+React全栈开发15 让我们构建一个展示API

FastAPI+React全栈开发15 让我们构建一个展示API

Chapter03 Getting Started with FastAPI 15 Let’s Build a showcase API FastAPIReact全栈开发15 让我们构建一个展示API REST APIs are all about cycles of HTTP requests and responses, it is the engine that powers the web and is implemented in every web framew…
阅读更多...
SD卡备份和烧录ubuntu20.04镜像

SD卡备份和烧录ubuntu20.04镜像

设备及系统&#xff1a;nuc幻影峡谷工控机&#xff0c;ubuntu20.04&#xff0c;树莓派4B&#xff0c;SD卡读卡器 一、确定SD卡设备号的两种方法 方法1&#xff1a; 将有ubuntu镜像的SD卡插入读卡器&#xff0c;再将读卡器插入电脑主机&#xff0c;在 工具 中打开 磁盘&#…
阅读更多...
最新文章

Copyright @ 2022~2023