V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
juventusryp
V2EX  ›  问与答

js 下对后端返回格式的转换

  •  
  •   juventusryp · 2022-06-06 17:05:58 +08:00 · 1010 次点击
    这是一个创建于 901 天前的主题,其中的信息可能已经有所发展或是发生改变。

    问题:

    • 后端返回的数据格式如下:
    [
    
    	{name: '01', week: '周二', classes: '1-2', info: '数学'},
        {name: '01', week: '周三', classes: '3-4', info: '语文'},
        {name: '01', week: '周四', classes: '3-4', info: '体育'},
        {name: '01', week: '周五', classes: '7-8', info: '英语'},
        {name: '02', week: '周二', classes: '3-4', info: '语文'},
        {name: '02', week: '周三', classes: '5-6', info: '数学'},
        {name: '02', week: '周四', classes: '3-4', info: '政治'},
        {name: '02', week: '周五', classes: '7-8', info: '英语'},
    ]
    
    
    • 在前端想转换为如下形式:
    [
            {
              name: '01',
              info: [
                {
                  week: '周二',
                  classes: '1-2',
                  class_info: '数学'
                },
                {
                  week: '周三',
                  classes: '3-4',
                  class_info: '语文'
                },
                {
                  week: '周四',
                  classes: '3-4',
                  class_info: '体育'
                },
                {
                  week: '周五',
                  classes: '7-8',
                  class_info: '英语'
                }
              ]
            },
            {
              name: '02',
              info: [
                {
                  week: '周二',
                  classes: '3-4',
                  class_info: '语文'
                },
                {
                  week: '周三',
                  classes: '5-6',
                  class_info: '数学'
                },
                {
                  week: '周四',
                  classes: '3-4',
                  class_info: '政治'
                },
                {
                  week: '周五',
                  classes: '7-8',
                  class_info: '英语'
                }
              ]
            }
          ]
    

    求教该如何使用 js 转换?

    7 条回复    2022-06-06 22:05:13 +08:00
    zhixiao
        1
    zhixiao  
       2022-06-06 17:11:14 +08:00
    用 lodash 的 groupBy 转一下就行了
    rabbbit
        2
    rabbbit  
       2022-06-06 17:21:43 +08:00
    const fooList = [
     { name: "01", week: "周二", classes: "1-2", info: "数学" },
     { name: "01", week: "周三", classes: "3-4", info: "语文" },
     { name: "01", week: "周四", classes: "3-4", info: "体育" },
     { name: "01", week: "周五", classes: "7-8", info: "英语" },
     { name: "02", week: "周二", classes: "3-4", info: "语文" },
     { name: "02", week: "周三", classes: "5-6", info: "数学" },
     { name: "02", week: "周四", classes: "3-4", info: "政治" },
     { name: "02", week: "周五", classes: "7-8", info: "英语" },
    ];

    const toBarList = (fooList) => {
      const barMap = new Map();
      fooList.forEach((foo) => {
       const { name, week, classes, info } = foo;
       if (!barMap.has(name)) barMap.set(name, { name, info: [] });
       const bar = barMap.get(name);
       bar.info.push({ week, classes, class_info: info });
     });
      return [...barMap.values()];
    };

    toBarList(fooList);
    hevi
        3
    hevi  
       2022-06-06 17:47:02 +08:00
    ```
    const fooList = [
     { name: "01", week: "周二", classes: "1-2", info: "数学" },
     { name: "01", week: "周三", classes: "3-4", info: "语文" },
     { name: "01", week: "周四", classes: "3-4", info: "体育" },
     { name: "01", week: "周五", classes: "7-8", info: "英语" },
     { name: "02", week: "周二", classes: "3-4", info: "语文" },
     { name: "02", week: "周三", classes: "5-6", info: "数学" },
     { name: "02", week: "周四", classes: "3-4", info: "政治" },
     { name: "02", week: "周五", classes: "7-8", info: "英语" },
    ];

    const data = fooList.map(item=>{
    const {name, week, classes, info: class_info} = item;
    return {
    name,
    info: {
    week,
    classes,
    class_info
    }
    };
    });
    ```
    hevi
        4
    hevi  
       2022-06-06 17:49:26 +08:00
    @hevi 噢,没审题,别看了
    sgiyy
        5
    sgiyy  
       2022-06-06 18:09:56 +08:00
    // [].reduce
    // 前提数据源同 name 的是放在一起的
    var old = [
    { name: "01", week: "周二", classes: "1-2", info: "数学" },
    { name: "01", week: "周三", classes: "3-4", info: "语文" },
    { name: "01", week: "周四", classes: "3-4", info: "体育" },
    { name: "01", week: "周五", classes: "7-8", info: "英语" },
    { name: "02", week: "周二", classes: "3-4", info: "语文" },
    { name: "02", week: "周三", classes: "5-6", info: "数学" },
    { name: "02", week: "周四", classes: "3-4", info: "政治" },
    { name: "02", week: "周五", classes: "7-8", info: "英语" },
    ];

    const transform = (list) => {
    return list.reduce(
    (acc, cur) => {
    let { result, current } = acc;
    const { name, ...rest } = cur;
    if (name !== current) {
    current = name;
    result = result.concat({ name, info: [rest] });
    } else {
    result[result.length - 1].info.push(rest);
    }
    return { result, current };
    },
    { result: [], current: "" }
    ).result;
    };

    const result = transform(old);
    oneisall8955
        6
    oneisall8955  
       2022-06-06 18:11:24 +08:00
    很基础的数据结构转换吧。科班生懂 map ,list ,遍历就行了
    juventusryp
        7
    juventusryp  
    OP
       2022-06-06 22:05:13 +08:00
    感谢各位回复,按照 2L 方法解决
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2261 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 16:12 · PVG 00:12 · LAX 08:12 · JFK 11:12
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.