对象数据如何转化成数组


前言

项目中后端给的数据有时候不可能完全符合前端的数据要求,比如element-ui+vue项目组合中,下拉框数据是数组的形式。然而后端同事给的确是对象数据,当然你可以和后端协商改成你想要的数据… 但是这样往往比较麻烦,喜欢安静写代码的前端决定自己转换。


提示:正文内容

一、后端给的数据

在这里插入图片描述

二、如何转换

			console.log('res:', res);
            let resObj = res.data.data; //获取后台给的对象数据
            let arr = []; //定义一个空数组
            for (let key in resObj) {
            //用for循环转换resObj对象
              arr.push({
                value: key,
                label: resObj[key]
              });
            }
            this.deviceList = arr; //将改数组赋值给数组deviceList,渲染到页面上
		  <el-form-item
              label="报警类型"
              prop="roomNumber"
            >
              <el-select
                placeholder="请选择"
                clearable
                default-first-option
                v-model="formInline.alarmDeviceType"
                @change="onSearch"
              >
                <el-option
                  v-for="(list,k) in deviceList"  //将数组渲染到页面上
                  :key="k"
                  :label="list.label"
                  :value="list.value"
                ></el-option>
              </el-select>
            </el-form-item>

三、最终结果

在这里插入图片描述
分享就到这里了,如果对你有帮助,不要忘记点哦!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值