首页 > 其他分享 >js对象转数组对象

js对象转数组对象

时间:2024-09-10 15:49:27浏览次数:12  
标签:parsedValue obj 数组 对象 value js JSON key const

1.创建一个baseFun.js
export function objectFun(obj) {
    const result = []
    // 处理所有可能的JSON字符串字段,递归处理所有嵌套JSON字符串
    function processJsonFields(obj) {
      for (const key in obj) {
        if (obj.hasOwnProperty(key)) {
          if (typeof obj[key] === 'string') {
            const unescapedStr = obj[key].replace(/"({[^}]+})"/g, (match, p1) => p1)
            try {
              // 尝试解析为 JSON
              const parsedValue = JSON.parse(unescapedStr)
              obj[key] = parsedValue
              // 如果解析成功且值是对象,递归处理嵌套的JSON字符串
              if (typeof parsedValue === 'object' && parsedValue !== null) {
                processJsonFields(parsedValue)
              }
            } catch (error) {
              // 保留原始字符串值
              obj[key] = unescapedStr
            }
          } else if (typeof obj[key] === 'object' && obj[key] !== null) {
            // 递归处理嵌套对象
            processJsonFields(obj[key])
          }
        }
      }
    }
  
    // 展开对象并收集结果
    function flatten(obj, parentKey = '') {
      for (const key in obj) {
        if (obj.hasOwnProperty(key)) {
          const newKey = parentKey ? `${parentKey}.${key}` : key
          let value = obj[key]
  
          if (typeof value === 'object' && value !== null) {
            // 如果值是对象,递归展开
            flatten(value, newKey)
          } else {
            // 其他类型直接存储
            result.push({ key: newKey, value: value })
          }
        }
      }
    }
  
    // 处理所有字段的可能的JSON字符串
    processJsonFields(obj)
    // 调用展开函数
    flatten(obj)
    return result
}
2.在前端引用

formData.event是需要转换的对象数据

import { objectFun } from '@/utils/baseFun'

<el-descriptions-item
    v-for="(item, index) in objectFun(
        formData.event
    )"
    :key="index"
    label-class-name="desc-w"
    :label="item.key"
>
    <div class="value-content">
        {{
            item.value !== '' &&
            item.value != null
                ? item.value
                : '--'
        }}
    </div>
</el-descriptions-item>

标签:parsedValue,obj,数组,对象,value,js,JSON,key,const
From: https://blog.csdn.net/weixin_45652809/article/details/142101208

相关文章

  • RapidJSON 的坑--允许Object对象存在相同的key,且key为数字时序列化报异常
    RapidJSON的坑--允许Object对象存在相同的key,且key为数字时序列化报异常测试代码如下:1voidshow(rapidjson::Document&doc)2{3printf("-----------------foriterator\nMemberCount:%d\n",doc.MemberCount());4for(autoit=doc.MemberBegin();it!=doc......
  • array数组对象以及常用方法
    数组(Array)是一种数据结构,用于存储具有相同类型的数据元素的有序集合。1.定义数组//通过字面量方式定义数组:let 数组名=[值,值,值];letnumbers=[1,2,3,4,5];//通过构造函数定义数组:let数组名=newArray(值,值,值);(newArray()是固定写法)letfr......
  • C语言程序设计——数组(二)
    一、字符数组1.1字符数组的定义定义方法与数组(一)介绍的类似。用来存放字符数据的数组是字符数组。字符数组中的一个元素存放一个字符。1.2字符数组的初始化对字符数组初始化,最容易理解的方式是逐个字符赋给数组中各元素。注:①如果在定义字符数组时不进行初始化,则数组中各......
  • 3.js - 阴影映射、色调映射(曝光度)
    阴影映射、色调映射阴影映射shadowMapconstrenderer=newTHREE.WebGLRenderer({alpha:true})`阴影映射: 用于,计算物体投射到其他物体上阴影的技术, 阴影映射,通过,在场景中,从光源的视角渲染一次场景(深度测试)来工作,从而确定哪些部分被其他物体遮挡,进而生成阴影。`......
  • 推荐一款好用的golang修复无效json的库:JSONRepair
    简单来说,就是可以将错误格式(非标准)的json修正,如下图所示: 我的json明显不是标准的json格式,是不能被解析的: 但是JSONRepair库也能修复。 github地址:https://github.com/kaptinlin/jsonrepair使用也非常简单:1、安装:gogetgithub.com/kaptinlin/jsonrepair2......
  • Leetcode3264. K 次乘运算后的最终数组 I
    EverydayaLeetcode题目来源:3264.K次乘运算后的最终数组I解法1:模拟操作:遍历数组nums,找到其中的最小值x,如果存在多个最小值,选择最前面的一个。将它乘以multiplier。共执行k次操作。代码:/**@lcapp=leetcode.cnid=3264lang=cpp**[3264]K次乘运算......
  • js中【异步编程】超详细解读,看这一篇就够了
    一、JavaScript异步编程概述JavaScript是一门单线程语言,这意味着它同一时间只能执行一个任务。在现代Web开发中,异步编程变得尤为重要,因为许多任务(如网络请求、文件读取、定时器等)需要大量时间,如果使用同步编程模型,这些任务会阻塞整个线程,导致页面或程序卡顿。为了解决这个......
  • 06 面向对象的软件工程OOSE
    面向对象的软件工程(OOSE,Object-OrientedSoftwareEngineering)是一种用于开发软件系统的工程方法论,它强调使用面向对象的技术和方法来设计和实现软件。以下是关于OOSE的详细介绍:一、定义与特点定义:OOSE是一种将面向对象的思想应用于软件开发过程中的系统方法,它利用对象、类、......
  • 【整理】【java开发】JavaWeb之JSP、Cookie、Session(一)
    一、JSP介绍及原理1.1JSP简介1.2JSP简单入门1.3JSP原理介绍二、JSP脚本2.1JSP脚本形式2.2JSPEL表达式2.3JSPJSTL标签三、会话跟踪技术3.1Cookie3.2Session原创0xNvyao安全随笔声明请勿利用本公众号文章内的相关......
  • js方法-格式化时间
    /**************************************时间格式化处理************************************/functiondateFtt(fmt,date)//fmt-例如'yyyy-mm-ddhh:ii:ss'{varo={"m+":date.getMonth()+1,//月份"d+":date.getDate(),//日......