常见的数据格式化方式

前端一直被称为项目开发的食物链底层,页面出了问题,样式不好看,数据格式不对,展示形式不对等等,第一反应被@的大都是前端。最常见的问题就是,接口返回的数据格式往往和产品要求的不符合,这时我们就要按照产品需求文档和设计稿处理成他们需要的样子。

1.JSON格式数据展示

在表单操作中,复杂的表单字段接口端会处理成JSON字符串格式。在表格展示中,为了能够用户直观的查看JSON数据,我们要处理成格式化后的结构。

例如:

js 复制代码
数据返回格式如下
'{"title": "住址", "dataIndex": 'address',key: 'address'}'

但是当字段多的时候查看特别不方便,需要做如下处理

js 复制代码
console.log(JSON.stringify(  {
    "title": "住址",
    dataIndex: 'address',
    key: 'address',
  }, null, 4))
  // 打印结果如下
{
    "title": "住址",
    "dataIndex": "address",
    "key": "address"
}

原理:JSON.stringify语法

JSON.stringify(value[, replacer[, space]]) space可选,表示文本添加缩进、空格和换行符,如果 space 是一个数字,则返回值文本在每个级别缩进指定数目的空格。 所以根据space不同,我们可以处理成各种各样的展示形式。

js 复制代码
console.log(JSON.stringify({"title": "住址",dataIndex: 'address',key: 'address'}, null, "---"))
{
---"title": "住址",
---"dataIndex": "address",
---"key": "address"
}

console.log(JSON.stringify({"title": "住址",dataIndex: 'address',key: 'address'}, null, "\t"))
{
	"title": "住址",
	"dataIndex": "address",
	"key": "address"
}

console.log(JSON.stringify({"title": "住址",dataIndex: 'address',key: 'address'}, null, " "))
{
 "title": "住址",
 "dataIndex": "address",
 "key": "address"
}

插一个题外话,同样的项目如果不同后端开发可能对于同样的数据结构返回不同的数据格式,这个方法也能很好的处理 如:

js 复制代码
//有些人按照习惯的方式将树状结构的子结构写成children
{
    a: 1,
    children: [
        {b: 1}
    ]
}
//但是有些人就随心所欲惯了,非写成childList
{
    a: 1,
    childList: [
        {b: 1}
    ]
}

我们处理数据的时候得考虑将其处理成统一的格式

js 复制代码
JSON.stringify({
    a: 1,
    childList: [
        {b: 1}
    ]
}).replace("childList", "children")

2.使用<pre>标签

开发中一般textarea类型的表单经常返回如下格式数据

js 复制代码
"此例演示如何使用 pre 标签 \n对空行和 空格\n进行控制"

处理该类数据,直接在外层套一个pre标签

js 复制代码
  var a = "此例演示如何使用 pre 标签 \n对空行和 空格\n进行控制";
  <pre>{a}</pre>

3. React中使用dangerouslySetInnerHTML

开发中不乏来自第三方编辑器的数据,格式如下:

js 复制代码
<p>这是一段文本段落</p>
<br/>
<div>这是另一段</div>

处理该类数据,我们使用该属性

js 复制代码
var a = "<p>这是一段文本段落</p>
<br/>
<div>这是另一段</div>"

<div dangerouslySetInnerHTML={{__html: a}}></div>
相关推荐
飞翔的佩奇7 分钟前
【完整源码+数据集+部署教程】【天线&水】舰船战舰检测与分类图像分割系统源码&数据集全套:改进yolo11-repvit
前端·python·yolo·计算机视觉·数据集·yolo11·舰船战舰检测与分类图像分割系统
哆啦A梦15881 小时前
点击Top切换数据
前端·javascript·vue.js
程序猿追1 小时前
Vue组件化开发
前端·html
艾德金的溪2 小时前
redis-7.4.6部署安装
前端·数据库·redis·缓存
小光学长2 小时前
基于Vue的2025年哈尔滨亚冬会志愿者管理系统5zqg6m36(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
@PHARAOH2 小时前
WHAT - 受控组件和非受控组件
前端·javascript·react.js
生莫甲鲁浪戴2 小时前
Android Studio新手开发第二十六天
android·前端·android studio
JH30733 小时前
B/S架构、HTTP协议与Web服务器详解
前端·http·架构
yi碗汤园3 小时前
【超详细】C#自定义工具类-StringHelper
开发语言·前端·unity·c#·游戏引擎
Kevin Wang7274 小时前
解除chrome中http无法录音问题,权限
前端·chrome