美文网首页
转化数据格式,数组包数组

转化数据格式,数组包数组

作者: jesse28 | 来源:发表于2022-01-18 14:12 被阅读0次
image.png image.png

这边后端返回的数据格式是一个数组里面每个字段后面是一个对象。现在前端需要是把这个变为外面用一个数组包着这些对象。

handleRefresh() {
      apigetUpdateObjectLog({ objectId: this.objectId }).then((res) => {
        if (res.data) {
          console.log('接口数据',JSON.parse(JSON.stringify(res.data)));
          let dataArray = res.data.map((ma, index) => {
            // console.log(Object.keys(ma))
            let obj = {};
            let objArray = [];
            let inx = 0;
            Object.keys(ma).forEach((key) => {
              if (key === "updateTime" || key === "updateName") {
                obj[key] = ma[key];
              } else {
                // 生成一个数组,用来接受对象
                objArray[inx] = ma[key];
                inx++;
              }
            });
            obj["objArray"] = objArray;
            return obj;
          });
          this.objectArray = dataArray;
          console.log('组装后数据',JSON.parse(JSON.stringify(dataArray)));
        } else {
          this.objectArray = [];
        }
      });
    },
  },
<template>
  <div class="block">
    <el-timeline v-for="(item,index) in objectArray" :key="index" class="timeLine">
      <el-timeline-item placement="top" :timestamp="item.updateTime | formDateFilter">
        {{item.updateName}}
        <el-card style="margin-top:10px">
          <div class="modifyContainer">
            <div v-for="(itemJ,j) in item.objArray" class="one-item" :key="j">
              <div>
                {{j+1}}.将
              </div>
              <div class="title">
                <div class="topItem">{{itemJ.chineseName}}</div>
              </div>
               <div>
                {{'由'}}
              </div>
              <div class="item">
                <div class="topItem" v-if="itemJ.type=='text'">{{itemJ.oldValue}}</div>
                <div class="topItem" v-if="itemJ.type=='time'">{{itemJ.oldValue | formDateFilter}}</div>
                <div class="topItem" style="display:flex" v-if="itemJ.type=='img'">
                  <div v-for="(item2,index2) in itemJ.oldValue.split(',')" :key="index2">
                    <!-- <img style="width:100px;height:100px" :src="openFileApi + item2" alt=""> -->
                    <el-image style="width: 100px; height: 80px;margin-right:5px" :src="openFileApi + item2" :preview-src-list="itemJ.oldValue.split(',').map(item3=>{return openFileApi+item3})"></el-image>
                  </div>
                </div>
              </div>
              <div>
                {{'修改为'}}
              </div>
              <div class="item">
                <div class="topItem" v-if="itemJ.type=='text'">{{itemJ.newValue}}</div>
                <div class="topItem" v-if="itemJ.type=='time'">{{itemJ.newValue | formDateFilter}}</div>
                <div class="topItem" style="display:flex" v-if="itemJ.type=='img'">
                  <div v-for="(item2,index2) in itemJ.newValue.split(',')" :key="index2">
                    <!-- <img style="width:100px;height:100px" :src="openFileApi + item2" alt=""> -->
                    <el-image style="width: 100px; height: 80px;margin-right:5px" :src="openFileApi + item2" :preview-src-list="itemJ.newValue.split(',').map(item3=>{return openFileApi+item3})"></el-image>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

相关文章

网友评论

      本文标题:转化数据格式,数组包数组

      本文链接:https://www.haomeiwen.com/subject/tiykhrtx.html