前言

常规情况下，我们可以把后台返回给我们的数据直接渲染在前台页面上，但不排除一些特殊的情况需要我们对源数据进行处理，例如 element 上传组件，在编辑页面中的回显指定参数为 name 和 url，但是后台返回的如果不是这两个字段名，就需要我们对源数据做进一步的处理。

未处理之前的数据

需求：

将后台返回 originalList 数组中每一个对象中的 imgs 数组中的每一个对象中的 imgUrl 和userName 字段改为 url 和 name，话不多说，下面直接看代码实例。

完整代码

<template><div></div>
</template>
<script>
export default {data() {return {// 模拟接口返回数据originalList: [{isShow: 1,correct: true,imgs: [{id: "0",url: "https://imge1c2fcf985084fe0ad01c7",name: "测试数据111",},{id: "1",url: "http:://54",name: "测试数据222",},],},{isShow: 1,correct: false,imgs: [{id: "3",url: "https://imge1c2ftegwfqge1c7",name: "测试数据333",},{id: "4",url: "https://imge1785faewfa01c7",name: "测试数据444",},{id: "5",url: "https://imgfwqfgdhtad01c7",name: "测试数据555",},{id: "6",url: "https://imge1cfegdsdfvse0ad01c7",name: "测试数据666",},],},{isShow: 1,correct: false,imgs: [{id: "7",url: "https://imge68erwt4ye0ad01c7",name: "测试数据777",},],},{isShow: 1,correct: true,imgs: [{id: "8",url: "https://imge1c5fagd0ad01c7",name: "测试数据888",},],},{isShow: 0,correct: true,imgs: [{id: "9",url: "https://imge1c2fc86wfegrhad01c7",name: "测试数据999",},],},],};},mounted() {// 判断是为了防止空数组报错if (this.originalList) {this.originalList.forEach((item) => {// 调用方法处理数据item["imgs"] = this.formatting(item.imgs);});}// 打印处理好的数据console.log(this.originalList, "处理好的数据");},methods: {// 处理接口返回数据的方法formatting(data) {let newImgs = [];data.map((item) => {newImgs.push({imgUrl: item.url,codeId: item.id,userName: item.name,});});return newImgs;},},
};
</script>

处理后的数据

JS 轻松搞定数据处理，让前端开发更高效相关推荐

storyboard搭建项目_轻松搞定一人一个storyboard开发
前言 storyboard已经推出有几年了,苹果也一直卖力的引导开发者使用storyboard开发,这点从我们创建工程,新工程以Main. storyboard创建window窗口就可以看出.然而很多 ...
Intro.js轻松搞定页面引导流程
Intro.js介绍:Intro.js是一个用于用户引导的js框架,只要你在项目中引入intro.js和 introjs.css文件,相应的元素上添加属性data-step步骤 data-intro引 ...
60分钟轻松搞定树莓派 AI 服务开发
目前,物联网.人工智能已经深入到医疗.家居.教育等多个领域,正在极大改变人们的日常生活.树莓派能够运行 Raspbian.Windows IoT Core 等操作系统,受众多物联网技术爱好者的欢迎.微 ...
微软专家教你，如何搞定树莓派 AI 服务开发
本文来自作者微软公开课在 GitChat 上分享「60分钟轻松搞定树莓派 AI 服务开发」编辑 | Mc Jin 作者: 施炯,浙江万里学院物联网工程系主任,硕士研究生导师,<Windo ...
韩顺平轻松搞定网页设计(html+css+js),韩顺平轻松搞定网页设计方案(html+css+js)之javascript现场授课笔记(完整版).doc...
2011韩顺平轻松搞定网页设计(html+css+js)之 javascript现场授课笔记(完整版) 视频18整和19的前半部分不用看 Javascript的基本介绍 JS是用于WEB开发的脚本语言 ...
线程导入大数据入库_大数据处理及分析该怎么做？用这款数据分析软件轻松搞定...
对大数据的重视让很多企业都在纷纷寻找更好的大数据处理及分析方法?这款数据分析软件轻松搞定! 一.数据采集虽然每天互联网都会产生大量的数据,对于企业来讲,要搜集对自己企业有用的数据才是真的大数据.首 ...
html百度首页制作视频,韩顺平轻松搞定网页设计 html+css+js
韩顺平老师的教程影响着一代又一代的学子们,他的视频教程确实做的很经典,不论是java.php还是网页设计,都有出彩的地方.这里,小编给大家分享韩顺平老师的轻松搞定网页设计教程,绝对完整,全部存于百度网 ...
前端表单神器form-create，复杂表单轻松搞定
form-create 是一个可以通过 JSON 生成具有动态渲染.数据收集.验证和提交功能的表单生成组件.支持3个UI框架,并且支持生成Vue 组件.内置20种常用表单组件和自定义组件,再复杂的表单 ...
熟练掌握skynet，后端开发丨游戏开发轻松搞定丨多线程丨多进程
掌握skynet,后端开发原来如此简单 1. 多线程 2. 多进程 3. actor模型-skynet 4. csp模型 [技术分享篇]熟练掌握skynet,后端开发丨游戏开发轻松搞定丨多线程丨多进程 ...

JS 轻松搞定数据处理，让前端开发更高效

前言

未处理之前的数据

完整代码

处理后的数据

JS 轻松搞定数据处理，让前端开发更高效相关推荐

最新文章

热门文章