uniapp数组转成json字符串

简介: 本文主要通过JSON.stringify和replace方法来对数组进行JSON格式化处理.

前言


本文主要通过JSON.stringifyreplace方法来对数组进行JSON格式化处理.


一、准备工作


准备一个list数组,例:


export default {
  data() {
    return {
      list:[],
      mark:[
        {id:1,mark:2}
      ]
    }
    },
    onLoad(){
      this.list.push({
        courseIds:"123",
        mark:this.mark,
      })
    }
}


在上述代码中,我们准备了一个数组并且push进去两个字段,分别为courseIds和mark.


二、具体实现


1.实现过程


首先我们用JSON.stringify内置函数对这个数组进行JSON格式转换


this.list=JSON.stringify(this.list)
console.log(this.list)


转换成功截图:



在转换后可以发现,正确的JSON格式最外面应该是{},所以要用replace方法把最外面的[]去掉,


const json = this.list.replace(/^\[|\]$/g, '');
        console.log(json)


成功截图:



在上述的代码截图中可以看到,已经成功去除最外层的[].


replace方法内容含义.


this.list:表示要操作的字符串。
^\[|\]$:是一个正则表达式,用于匹配字符串开头或者结尾处的方括号 [ ]。
^ 表示匹配字符串的开头位置。
\[ 表示匹配左方括号 [,由于方括号本身在正则表达式中有特殊含义,因此需要使用反斜杠 \ 进行转义。
| 表示逻辑或,即匹配左侧或右侧的表达式。
\] 表示匹配右方括号 ],同样需要使用反斜杠进行转义。
$ 表示匹配字符串的结尾位置。
/.../g:表示正则表达式使用了全局匹配,即匹配到一个符合条件的子串后不会停止,而是继续向后查找。
'':是替换字符串,表示要把匹配到的方括号替换为空字符串。


2.全部代码


编译器:hbuilder


<template>
  <view>
    <view v-for="(item,index) in list">
      {{item.courseIds}}
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        list:[],
        mark:[
          {id:1,mark:2}
        ]
      }
      },
      onLoad(){
        this.list.push({
          courseIds:"123",
          mark:this.mark,
        })
        this.list=JSON.stringify(this.list)
        console.log(this.list)
        const json = this.list.replace(/^\[|\]$/g, '');
        console.log(json)
      }
  }
</script>
<style>
</style>


相关文章
|
6天前
|
存储 JSON 前端开发
JSON数组的概念、语法和用法
JSON数组的概念、语法和用法
225 3
|
6天前
|
存储 JSON JavaScript
Python字典和JSON字符串相互转化方法
【2月更文挑战第18天】
67 3
|
4天前
|
JSON JavaScript 前端开发
js将json字符串还原为json对象
【5月更文挑战第14天】js将json字符串还原为json对象
29 1
|
6天前
|
存储 JSON DataWorks
DataWorks产品使用合集之DataWorks将 MongoDB 中的数组类型写入到 DataWorks 的单个字段时,表示为字符串格式而非 JSON 格式如何解决
DataWorks作为一站式的数据开发与治理平台,提供了从数据采集、清洗、开发、调度、服务化、质量监控到安全管理的全套解决方案,帮助企业构建高效、规范、安全的大数据处理体系。以下是对DataWorks产品使用合集的概述,涵盖数据处理的各个环节。
26 3
|
6天前
|
JSON 分布式计算 大数据
MaxCompute产品使用合集之大数据计算MaxCompute 要提取JSON字符串中的所有key-value对,我该怎么操作
MaxCompute作为一款全面的大数据处理平台,广泛应用于各类大数据分析、数据挖掘、BI及机器学习场景。掌握其核心功能、熟练操作流程、遵循最佳实践,可以帮助用户高效、安全地管理和利用海量数据。以下是一个关于MaxCompute产品使用的合集,涵盖了其核心功能、应用场景、操作流程以及最佳实践等内容。
|
6天前
|
JSON 运维 Kubernetes
云效产品使用报错问题之流水线中配置了AppStack,构建时下载的制品内容为json字符串,如何解决
本合集将整理呈现用户在使用过程中遇到的报错及其对应的解决办法,包括但不限于账户权限设置错误、项目配置不正确、代码提交冲突、构建任务执行失败、测试环境异常、需求流转阻塞等问题。阿里云云效是一站式企业级研发协同和DevOps平台,为企业提供从需求规划、开发、测试、发布到运维、运营的全流程端到端服务和工具支撑,致力于提升企业的研发效能和创新能力。
|
6天前
|
JSON 数据格式 Python
py如何把字符串转出json
py如何把字符串转出json
8 0
|
6天前
|
JSON 数据格式
Json字符串与QVariantList 对象相互转换
Json字符串与QVariantList 对象相互转换
17 0
|
6天前
|
JSON JavaScript PHP
PHP把unicode编码的json字符串转中文
PHP把unicode编码的json字符串转中文
14 0
|
6天前
|
SQL JSON Apache
Flink问题之嵌套 json 中string 数组的解析异常如何解决
Apache Flink是由Apache软件基金会开发的开源流处理框架,其核心是用Java和Scala编写的分布式流数据流引擎。本合集提供有关Apache Flink相关技术、使用技巧和最佳实践的资源。
230 1

热门文章

最新文章