JavaScript中常见的数据格式化方式详解

 更新时间:2023年12月12日 11:30:10   作者:一涯  
这篇文章主要为大家详细介绍了JavaScript中常见的数据格式化方式,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以了解一下

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

1.JSON格式数据展示

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

例如:

数据返回格式如下

response = '{"title": "住址", "dataIndex": 'address',key: 'address'}'

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

console.log(JSON.stringify(JSON.parse(reponse)) ; //先将接口相应数据转为对象,再序列化。
  // 打印结果如下
{
    "title": "住址",
    "dataIndex": "address",
    "key": "address"
}

原理:JSON.stringify语法

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

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"
}

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

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

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

JSON.stringify({
    a: 1,
    childList: [
        {b: 1}
    ]
}).replace("childList", "children")

2.使用<pre>标签

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

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

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

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

3. React中使用dangerouslySetInnerHTML

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

<p>这是一段文本段落</p>
<br/>
<div>这是另一段</div>

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

var a = "<p>这是一段文本段落</p>
<br/>
<div>这是另一段</div>"

<div dangerouslySetInnerHTML={{__html: a}}></div>

到此这篇关于JavaScript中常见的数据格式化方式详解的文章就介绍到这了,更多相关JavaScript数据格式化内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JS实现动态生成表格并提交表格数据向后端

    JS实现动态生成表格并提交表格数据向后端

    这篇文章主要为大家详细介绍了JS实现动态生成表格并提交表格数据向后端的相关资料,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • JS 组件系列之BootstrapTable的treegrid功能

    JS 组件系列之BootstrapTable的treegrid功能

    这篇文章主要介绍了JS 组件系列之BootstrapTable的treegrid功能,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-06-06
  • uniapp中uni-popup的具体使用

    uniapp中uni-popup的具体使用

    本文主要介绍了uniapp中uni-popup的具体使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-06-06
  • uniapp h5如何获取用户地理位置信息(使用高德地图)

    uniapp h5如何获取用户地理位置信息(使用高德地图)

    这篇文章主要给大家介绍了关于uniapp h5如何获取用户地理位置信息的相关资料,文中主要使用高德地图,这里主要讲h5实现获取地理位置信息并定位功能,需要的朋友可以参考下
    2023-08-08
  • js封装成插件_Canvas统计图插件编写实例

    js封装成插件_Canvas统计图插件编写实例

    下面小编就为大家带来一篇js封装成插件_Canvas统计图插件编写实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • Js类的构建与继承案例详解

    Js类的构建与继承案例详解

    这篇文章主要介绍了Js类的构建与继承案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-09-09
  • JS数字精度丢失的原因及解决方案

    JS数字精度丢失的原因及解决方案

    JS的数字类型一旦数字超过限值,JS将会丢失精度,导致前后端的值出现不一致,这篇文章主要给大家介绍了关于JS数字精度丢失的原因分析及解决方法,需要的朋友可以参考下
    2022-04-04
  • Javascript动画插件lottie-web的使用方法

    Javascript动画插件lottie-web的使用方法

    这篇文章主要介绍了Javascript动画插件lottie-web的使用方法,包括配合vue-cli使用及在HTML页面中使用代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-02-02
  • 微信小程序使用video组件播放视频功能示例【附源码下载】

    微信小程序使用video组件播放视频功能示例【附源码下载】

    这篇文章主要介绍了微信小程序使用video组件播放视频功能,结合实例形式分析了video组件播放本地mp4小视频的具体实现技巧,并附带源码供读者下载参考,需要的朋友可以参考下
    2017-12-12
  • js自动下载文件到本地的实现代码

    js自动下载文件到本地的实现代码

    其实就是利用了Microsoft.XMLHTTP实现远程文件的保存,不过需要修改下才可以运行,地址传参问题
    2013-04-04

最新评论