JS将数组转化为对象obj:键值对形式{}

标签: JS

目标需求:
添加零食种类

根据零食种类分配的UUID映射展示出来:

获取到零食种类的列表的数据结构是这样子的:

这是一个数组,里面包含很多对象,每个对象里面含有相同的属性

首先把想要的字段通过工具函数库lodash_.pick()出来:
 

    let b = [];
    classifylist.map( it => {
      b.push(_.pick(it,'uuid','name'));
    });

 _.pick()完的数据结构是这样的:

现在把数组转换成对象:
 

    方法一:map循环方式
    let obj = {};
    b.map((e) => {
      obj[e.uuid] = e.name;
    });
    
    方法二:$.each循环方式
    $.each(b, function (item,e) {
    console.log(e.name);
     obj[e.uuid] = e.name;
     });
    
    方法三:for in 循环方式
    for (var item in b){
         obj[b[item].uuid] = b[item].name;
     };
   

经过处理后的数据结构是:

 在table表格的columns中使用:
 通过给obj对象传入键,返回值即可如愿以偿地展示了种类uuid对应的种类名称。

{
          title: '零食种类',
          dataIndex: 'classify_uuid',
          render: it => (
            <span>{obj[it]}</span>
          ),
},

columns完整代码如下: 

import React, { Fragment } from 'react';
import _ from 'lodash';
import { Icon,Popconfirm } from 'antd';
import moment from 'moment';

export const DATE_TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss';
export const DATE_FORMAT = 'YYYY-MM-DD';

function getDateTimeString(msTimeOrDate) {
  if (msTimeOrDate === null) return null;
  if (msTimeOrDate && typeof msTimeOrDate === 'object') {
    if ('format' in msTimeOrDate && typeof msTimeOrDate.format === 'function')
      return msTimeOrDate.format(DATE_TIME_FORMAT);

    if (msTimeOrDate instanceof Date) return moment(msTimeOrDate).format(DATE_TIME_FORMAT);
  }
  // @ts-ignore
  return moment(new Date(msTimeOrDate)).format(DATE_TIME_FORMAT);
}

function newColumn(title, dataIndex, render = undefined ) {
    return { title, dataIndex, render, key: dataIndex };
}

function getSnackColumns(props, eventHandler) {
    const { snacks } = props;
    const classifylist = Array.isArray(snacks.classifylist) ? snacks.classifylist : [];
    console.warn('classifylist',classifylist);
    let b = [];
    let obj = {};
    classifylist.map( it => {
      b.push(_.pick(it,'uuid','name'));
    });
    b.map((e) => {
      obj[e.uuid] = e.name;
    });
    console.warn('b', b);
    console.warn('obj',obj);
    return [
        {
            title: '零食照片',
            dataIndex: 'images',
            key: `uuid`,
            render: src => src ? <img src={src} alt="logo" style={{width: '100%', maxWidth: 64}} /> : '暂无照片'
        },
        newColumn('零食名称', 'name'),
        // newColumn('零食分类uuid', 'classify_uuid'),
         // 在这里使用
        {
          title: '零食种类',
          dataIndex: 'classify_uuid',
          render: it => (
            <span>{obj[it]}</span>
          ),
        },
        newColumn('零食价格', 'money'),
        {
            title: '发布时间',
            dataIndex: 'time',
            defaultSortOrder: 'descend',
            sorter: (a,b) => Date.parse(a.time) - Date.parse(b.time),
            render: it => {
                const m = moment(it);
                return (
                  <span title={getDateTimeString(m)}>
                    {m.fromNow()}
                  </span>
                );
            }
        },
        {
            align: 'right',
            title: '操作',
            key: 'op',
            render: it => {
                return (
                  <Fragment>
                    <Popconfirm
                      title={<span>确认删除<b>{it.name}</b>吗?</span>}
                      okType="danger"
                      onConfirm={eventHandler.onDeleteSnack.bind(null,it)}
                      okText="确认删除"
                      cancelText="取消"
                    >
                      <a style={{ color: '#FC1E39', marginLeft: 20 }}>
                        <Icon type="delete" />&nbsp;删除
                      </a> 
                    </Popconfirm>
                  </Fragment>
                );
            }
        }
    ];
}

export default getSnackColumns;

 

版权声明:本文为weixin_42442713原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_42442713/article/details/96481546

智能推荐

堆排序

堆排序就是利用堆进行排序的方法,基本思想是,将代排序列构造成一个大根堆,此时整个序列的最大值就是堆顶的根节点。将它与堆数组的末尾元素交换,此时末尾元素就是最大值,移除末尾元素,然后将剩余n-1个元素重新构造成一个大根堆,堆顶元素为次大元素,再次与末尾元素交换,再移除,如此反复进行,便得到一个有序序列。 (大根堆为每一个父节点都大于两个子节点的堆) 上面思想的实现还要解决两个问题: 1.如何由一个无...

基础知识(变量类型和计算)

一、值类型 常见的有:number、string、Boolean、undefined、Symbol 二、引用类型 常用的有:object、Array、null(指针指向为空)、function 两者的区别: 值类型暂用空间小,所以存放在栈中,赋值时互不干扰,所以b还是100 引用类型暂用空间大,所以存放在堆中,赋值的时候b是引用了和a一样的内存地址,所以a改变了b也跟着改变,b和a相等 如图: 值...

Codeforces 1342 C. Yet Another Counting Problem(找规律)

题意: [l,r][l,r][l,r] 范围内多少个数满足 (x%b)%a!=(x%a)%b(x \% b) \% a != (x \% a) \% b(x%b)%a!=(x%a)%b。 一般这种题没什么思路就打表找一下规律。 7 8 9 10 11 12 13 14 15 16 17 18 19 20 28 29 30 31 32 33 34 35 36 37 38 39 40 41 49 50...

[笔记]飞浆PaddlePaddle-百度架构师手把手带你零基础实践深度学习-21日学习打卡(Day 3)

[笔记]飞浆PaddlePaddle-百度架构师手把手带你零基础实践深度学习-21日学习打卡(Day 3) (Credit: https://gitee.com/paddlepaddle/Paddle/raw/develop/doc/imgs/logo.png) MNIST数据集 MNIST数据集可以认为是学习机器学习的“hello world”。最早出现在1998年LeC...

猜你喜欢

哈希数据结构和代码实现

主要结构体: 实现插入、删除、查找、扩容、冲突解决等接口,用于理解哈希这种数据结构 完整代码参见github: https://github.com/jinxiang1224/cpp/tree/master/DataStruct_Algorithm/hash...

解决Ubuntu中解压zip文件(提取到此处)中文乱码问题

在Ubuntu系统下,解压zip文件时,使用右键--提取到此处,得到的文件内部文件名中文出现乱码。 导致此问题出现的原因一般为未下载相应的字体。 解决方案: 在终端中使用unar命令。 需要注意的是系统需要包含unar命令,如果没有,采用如下的方式解决: 实例效果展示: 直接提取到此处: 使用 unar filename.zip得到的文件...

centos7安装mysql8.0.20单机版详细教程

mysql8.0之后与5.7存在着很大的差异,这些差异不仅仅表现在功能和性能上,还表现在基础操作和设置上。这给一些熟悉mysql5.7的小伙伴带来了很多困扰,下面我们就来详细介绍下8.0的安装和配置过程。 mysql在linux上的多种安装方式: 1.yum安装 由于centos默认的yum源中没有mysql,所以我们要使用yum安装mysql就必须自己指定mysql的yum源。在官网下载mysq...

Python自学记录——调用函数和定义函数

对于函数,我的理解是 抽象的方法。你不需要它是内部结构是什么样子的,只要遵从它给你的规则来使用,就能得到想要的效果。 调用函数 在 Python 中,有很多内置的函数供我们调用,常用的函数如下: help(obj) 帮助,解释传入的obj type(obj) 查看传入obj的类型 callable(obj) 查看obj是否可以像函数被调用 isinstance(obj,cls) 查看obj的数据类...

透视遮罩Shader

Unity的透视遮罩Shader 介绍 shader 效果 资源下载 介绍 一个透视遮罩的Shader,及其材质球,会按照模型的UV方向产生透视效果。 shader 效果 里面有个UV从里面向外的球形模型,添加入材质球之后,在球内部向外看时,则会透视球外部的所有3D物体,直接看到天空盒。 一般状态下的场景: 透视遮罩下的场景: 资源下载 资源链接:https://download.csdn.net...