首页 > 编程语言 >【御控】JavaScript JSON结构转换(1):对象To对象——键值互换

【御控】JavaScript JSON结构转换(1):对象To对象——键值互换

时间:2024-03-26 13:31:50浏览次数:33  
标签:转换 御控 JavaScript dev aim JSON 键值 org root

文章目录


一、JSON是什么?

Json(JavaScript Object Notation)产生于20世纪90年代初,最初由道格拉斯·克罗克福特(Douglas Crockford)提出,作为JavaScript中对象字面量的一种表现形式。它很快被广泛应用于Web开发领域,成为一种通用的数据交换格式。

Json在Web开发中流行起来的时间大约是在2000年代初期。它的流行得益于其简洁性、易读性和易用性,使得数据交换变得更加灵活和高效。

Json的应用场景:

  • 数据交换:Json用于在服务器/设备之间传输数据。
  • API通信:许多Web API使用Json作为数据交换格式,便于不同系统之间的通信。
  • 数据存储:Json也可以用于存储数据。
  • 配置文件:Json可以用于存储配置信息。

总的来说,Json作为一种简单、轻量级且易于理解的数据交换格式,为不同系统之间的数据交换提供了一种通用标准,促进了信息的共享和互操作性。

Json的基本语法规则包括:

  1. 数据以键值对的形式组织,键和值之间使用冒号分隔,不同键值对之间使用逗号分隔。
  2. 键都必须是字符串类型,键必须是唯一的。
  3. 值可以是字符串、数字、布尔值、数组、对象或null。
  4. 数组使用方括号括起来,元素之间使用逗号分隔。
  5. 对象使用花括号括起来,键值对之间使用逗号分隔。

二、JSON结构转换是什么?

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

在JSON结构转换中,常见的操作包括:

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

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

三、核心构件之转换映射

在对类库进行详细讲解之前,我们先来介绍一下转换映射。
转换映射是JSON结构转换的核心构件,工具依据分析转换映射来进行源与目标JSON结构的转化。

转换映射的构成如下:

{
    "AimJsonPath": "root.org",
	"OrgJsonPath": "root.aim",
	"TranType": 4,
    "Options":{
        "KeyInitIndex":0,
        "AddElementsOption":"1",        
		"TranOP":"1",  
        "TranWay":"1" 
    }
}

转换映射的属性介绍如下:

  1. AimJsonPath
    目标结构路径
  2. OrgJsonPath
    目标结构路径
  3. TranType
    转换类型 1:源Key->目标Key 2:源Key->目标Value 3:源Value->目标Key 4:源Value->目标Value
  4. Options.KeyInitIndex
    自动生成的元素的起始索引(默认为0)
  5. Options.AddElementsOption
    1:追加新元素到数组/对象 (默认为1)
    2:替换数组/对象的原有属性
  6. Options.TranOP
    1:将源子元素复制到目标,使用源子元素的Key(默认为1)
    2:将源子元素复制到目标,为源子元素新生成Key
    3:依据源元素在目标构建同等数量的目标子元素
  7. Options.TranWay
    1:交叉映射 ( 默认为1)
    2:一对一映射

四、案例之《JSON对象 To JSON对象》

源JSON结构:

{
    "dev_org": {
      "642fccd1_org": {
        "1_org": "111_org",
        "2_org": "222_org",
      }
    },
    "time_org": 1682471111
  }

目标JSON结构:

{
    "dev_aim": {
      "642fccd1_aim": {
        "1_aim": "111_aim",
        "2_aim": "222_aim",
      }
    },
    "time_aim": 1682472222
  }

转换需求:

  1. 将源结构的“dev_org”键替换到目标结构的“dev_aim”键
  2. 将源结构的“642fccd1_org”键替换到目标结构的“642fccd1_aim”键
  3. 将源结构的“642fccd1_org->1_org”键替换到目标结构的“642fccd1_aim->1_aim”键
  4. 将源结构的“642fccd1_org->1_org”值替换到目标结构的“642fccd1_aim->1_aim”值
  5. 将源结构的“642fccd1_org->2_org”键替换到目标结构的“642fccd1_aim->2_aim”键
  6. 将源结构的“642fccd1_org->2_org”值替换到目标结构的“642fccd1_aim->2_aim”值
  7. 将源结构的“time_org”键替换到目标结构的“time_aim”键
  8. 将最目前UTC时间替换到目标结构的“time_aim”值

期望转换结果:

{
    "dev_org": {
        "642fccd1_org": {
            "1_org": "111_org",
            "222_org": "222_org"
        }
    },
    "time_org": "2024-03-21T07:28:54.893Z"
}

五、代码实现

import JsonTranferUtil from './json_transfer'

const jsonOrg =  {
    "dev_org": {
      "642fccd1_org": {
        "1_org": "111_org",
        "2_org": "222_org",
      }
    },
    "time_org": 1682471111
  };
const jsonAim =  {
    "dev_aim": {
      "642fccd1_aim": {
        "1_aim": "111_aim",
        "2_aim": "222_aim",
      }
    },
    "time_aim": 1682472222
  };
/// 转换类型(TranType)
/// 1:源Key->目标Key
/// 2:源Key->目标Value
/// 3:源Value->目标Key
/// 4:源Value->目标Value
const mappings = [
  {
    "AimJsonPath": "root.dev_aim",
    "OrgJsonPath": "root.dev_org",
    "TranType": 1
  },
  {
    "AimJsonPath": "root.dev_aim.642fccd1_aim",
    "OrgJsonPath": "root.dev_org.642fccd1_org",
    "TranType": 1
  },
  {
    "AimJsonPath": "root.dev_aim.642fccd1_aim.1_aim",
    "OrgJsonPath": "root.dev_org.642fccd1_org.1_org",
    "TranType": 1
  },
  {
    "AimJsonPath": "root.dev_aim.642fccd1_aim.1_aim",
    "OrgJsonPath": "root.dev_org.642fccd1_org.1_org",
    "TranType": 4
  },
  {
    "AimJsonPath": "root.dev_aim.642fccd1_aim.2_aim",
    "OrgJsonPath": "root.dev_org.642fccd1_org.2_org",
    "TranType": 3
  },
  {
    "AimJsonPath": "root.dev_aim.642fccd1_aim.2_aim",
    "OrgJsonPath": "root.dev_org.642fccd1_org.2_org",
    "TranType": 4
  },
  {
    "AimJsonPath": "root.time_aim",
    "OrgJsonPath": "root.time_org",
    "TranType": 1
  },
  {
    "AimJsonPath": "root.time_aim",
    "OrgJsonPath": "#Time#",
    "TranType": 4
  },
];

/*******************对象转对象***************** */
let jsonTranferUtil = new JsonTranferUtil(jsonOrg, jsonAim, mappings);
let result = jsonTranferUtil.tranJson();
console.log("********最终转换结果***************")
console.log(result, 9999999999999)

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

六、在线转换工具

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

工具地址:数据转换工具

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

七、技术资料

标签:转换,御控,JavaScript,dev,aim,JSON,键值,org,root
From: https://blog.csdn.net/weixin_41728451/article/details/134758026

相关文章

  • asp net在View视图下通过javascript访问服务器上的文件
    以通过javascript访问服务器上的文件为例控制器:[HttpPost]publicActionResultCheckFileExists(stringaFile){//检查文件是否存在if(System.IO.File.Exists(aFile))//theFile包括完整的路径和文件{returnContent("文件存在");}else{......
  • How to get the client IP address with Javascript only
    LearnhowtogettheclientIPaddress(localandprivate)usingonlyjavascript.​​Javascript无法获取(也无法存储)客户端IP,但是Javascript能够创建Http请求,并且服务器端语言能够检索用户的公共IP,因此您可以利用这一优势。换句话说,如果你想检索用户的公共IP,你将依赖于对任......
  • How to get the client IP address with Javascript only
    LearnhowtogettheclientIPaddress(localandprivate)usingonlyjavascript.​​Javascriptisunabletoget(norstoressomewhere)theclientIP,howeverjavascriptisabletocreateHttprequests,andserversidelanguagesareabletoretrievetheu......
  • 如何使用 JavaScript 导入和导出 Excel
    前言在现代的Web应用开发中,与Excel文件的导入和导出成为了一项常见而重要的任务。无论是数据交换、报告生成还是数据分析,与Excel文件的交互都扮演着至关重要的角色。本文小编将为大家介绍如何在熟悉的电子表格UI中轻松导入Excel文件,并以编程方式修改表格或允许用户进行编辑,最......
  • 【白嫖无废话-秒懂javascript基础知识-免费持续更新】
    一、js须知的概念js是一门事件驱动型的编程语言,依靠事件去驱动,然后执行对应的程序。(一)JS中的事件在JS中有很多事件,其中有一个事件叫做:鼠标单击,单词:click。并且任何事件都会对应一个事件句柄叫做:onclick。注意:事件和事件句柄的区别是事件句柄是事件单词前加on而且事件......
  • JavaScript初识及基本语法详解
    JavaScript是一种轻量级的编程语言,它可以在网页中嵌入,用来控制网页的动态效果和用户交互。JavaScript是所有现代网页浏览器都支持的脚本语言,它可以让网页变得“活”起来,实现各种复杂的功能。JavaScript的基本语法JavaScript的语法基础与Java语言类似,但它是解释型语言,不需......
  • JavaScript 基础 - 第1天
     了解变量、数据类型、运算符等基础概念,能够实现数据类型的转换,结合四则运算体会如何编程。体会现实世界中的事物与计算机的关系理解什么是数据并知道数据的分类理解变量存储数据的“容器”掌握常见运算符的使用,了解优先级关系知道JavaScript数据类型隐式转......
  • 高性能JavaScript——6、快速响应的用户界面
    大多数浏览器让一个单线程共用于执行JavaScript和更新用户界面。每个时刻只能执行其中一种操作,这意味着当JavaScript代码正在执行时用户界面无法响应输入,反之亦然。当JavaScript代码执行时,用户界面处于“锁定”状态。管理好JavaScript的运行时间对Web应用的性能非常重要。......
  • javascript三要素核验身份证号、姓名和人像是否匹配的身份证实名认证接口
    在开发的过程中,总会用到各种各样的API接口来实现各种各样的功能。互联网信息时代,为确保注册用户身份信息的正确性,无论是手机端还是电脑端应用都需要进行实名认证来防止虚假身份的使用,维护公共利益和个人权益的安全,实名认证已经成为了一个非常重要的环节。翔云身份证实名认......
  • 原生JavaScript写个表格版的日历
    如图:简单、易懂、写着玩儿的……代码如下:<!DOCTYPEhtml><htmllang="en"><head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <title>Document&l......