如何对数组中的对象进行分组并根据对象属性对它们进行排序

2024-03-25

 groupSelectedQuestions(selectedQuestions){
     var questions = [
         { q: 'why?', group: 'no-group', date: '1' }, 
         { q: 'what?', group: 'group 1', date: '1' }, 
         { q: 'when?', group: 'group 2', date: '2' }, 
         { q: 'where?', group: 'group 1', date: '2' }, 
         { q: 'which', group: 'group 2', date: '3' }
     ],
     result = questions.reduce(function (r, a) {
         r[a.group] = r[a.group] || [];
         r[a.group].push(a);
         return r;
     }, {});
     /**
     more code here.
     Here I would put if statements that check for all condtions
     I have stated in the question below
     */
 }

我正在尝试创建一个用户调用的函数并将问题分组到某些组中。上面你可以看到我提出的部分代码。

关于如何对问题进行分组,我有很多条件。

  1. 任何小组的问题数量不得少于两个。
  2. 'no-group'表示问题不属于任何组。所以'no-group'可以只是一个问题,也可以是所有问题。
  3. 应按该组问题中最早的日期分配组。例如'group 1'最早的(就日期而言)问题应该早于 ' 中最早的问题group 2'当问题重新分组或问题从组中删除时,也应该重新调整。
  4. 分组的问题可以重新分组。这样做时,如果有任何问题单独留在小组中,则应将其标记为'no-group'.
  5. 当分配组时'group 1'被分配'group 2', when 'group 2'被分配'group 3'等等。

我的方法是使用 if 语句。但是,由于问题数组最多可以有二十个问题,并且分组可以从'group 1', 'group 2'... to 'group 20',if语句的数量就会变得很多。

我制造了一个堆栈闪电战 https://stackblitz.com/edit/angular-e2fyaa?file=src%2Fapp%2Fapp.component.html更好地传达我想要实现的目标。有没有一种方法可以使用递归来实现我想要实现的目标并避免许多 if 语句?

如果有不清楚的地方请询问,我很乐意澄清。

stackblitz中的代码如下(它是Angular stackblitz):

控制器

  questions = [
    { _id:1, q: 'why?', group: 'no-group', date: '1', selected:false }, 
    { _id:2, q: 'what?', group: 'group 1', date: '1', selected:false }, 
    { _id:3, q: 'when?', group: 'group 2', date: '2', selected:false }, 
    { _id:4, q: 'where?', group: 'group 1', date: '2', selected:false }, 
    { _id:5, q: 'which?', group: 'group 2', date: '3', selected:false }
  ];

  selectOrUnselectQuestion(question){
    let newQuestions = this.questions.map(newQuestion => {
      if(newQuestion._id === question._id){
        if(!newQuestion.selected){
            newQuestion.selected = true;
          } else {
            newQuestion.selected = false;
          }
        return newQuestion;
        } else {
          return newQuestion;
        }
      })
      this.questions = newQuestions; 
  }

  groupSelectedQuestions(){
    let selectedQuestions = this.questions.filter(q => q.selected);
    let selectedQuestionIds = selectedQuestions.map(selectedQuestion=>{ return selectedQuestion._id; })
    let newQuestions = this.questions.map(question => {
      if(selectedQuestions.length==1 && selectedQuestionIds.includes(question._id)){
        question.group = 'no-group';
        question.selected = false;
        return question
      } else 
      if(selectedQuestions.length>1 && selectedQuestionIds.includes(question._id)){
        question.group = 'group 1';
        question.selected = false;
        return question
      } else {
        return question;
      }
    })
    this.questions = newQuestions;

    // deselect selected questions

  }

风景:

<div style="text-align:center">Questions</div>

<div style="text-align:center; padding:10px;">

    <div *ngFor="let question of questions" (click)="selectOrUnselectQuestion(question)"
        [ngClass]="{'selected': question.selected}" class="question">
        <span style="padding-right:10px">{{question.q}}</span>
        <span>{{question.group}}</span>
    </div>

    <button (click)="groupSelectedQuestions()" style="margin:10px 0" type="button">
    group selected questions
  </button>

</div>

恐怕评论中的讨论对我的理解没有多大帮助。

这是仍然猜测您的一些要求的尝试:

// utility functions
const groupBy = (prop) => (xs) => 
  xs .reduce (
    (a, {[prop]: p, ...rest}) => ({...a, [p]: [...(a[p] || []), rest]}),
    {}
  )

const partition = (pred) => (xs) =>
  xs .reduce (([yes, no], x) => pred (x) ? [[...yes, x], no] : [yes, [...no, x]], [[], []])

// main function
const makeGroups = questions => {
  const {'no-group': groupless, ...rest} = groupBy ('group') (questions)
  const [largeEnough, tooSmall] = partition ((v) => v.length > 1) (Object .values (rest))
  const noGroup = [...groupless, ...tooSmall.flat()].sort((a, b) => a.date - b.date)
  return {
    ...Object .fromEntries (
      largeEnough
        .map (group => group.sort ((a, b) => a .date - b .date))
        .sort ((group1, group2) => group1 [0] .date - group2 [0] .date)
        .map ((group, i) => [`group ${i + 1}`, group])
    ),
    'no-group': noGroup
  }
}

// sample data
const questions = [
  {_id: 1, q: 'why?', group: 'no-group', date: '8', selected: false }, 
  {_id: 2, q: 'what?', group: 'A', date: '6', selected: false }, 
  {_id: 3, q: 'when?', group: 'C', date: '7', selected: false }, 
  {_id: 4, q: 'where?', group: 'A', date: '5', selected: false }, 
  {_id: 5, q: 'which?', group: 'B', date: '3', selected: false },
  {_id: 6, q: 'who?', date: '0', selected: false }, // no group supplied so will end up in no-group
  {_id: 7, q: 'why not?', group: 'B', date: '9', selected: false }, 
  {_id: 8, q: 'who, me?', group: 'A', date: '4', selected: false }, 
  {_id: 9, q: 'where is waldo?', group: 'A', date: '1', selected: false }, 
  {_id: 10, q: 'which way is up?', group: 'B', date: '2', selected: false },
  {_id: 11, q: 'when is lunch?', group: 'D', date: '10', selected: false }, 
];
// demo
console .log (makeGroups (questions))
.as-console-wrapper {max-height: 100% !important; top: 0}

输出将如下所示:

{
  'group 1': [
    {_id: 9, q: "where is waldo?", date: "1", selected: false},
    {_id: 8, q: "who, me?", date: "4", selected: false},
    {_id: 4, q: "where?", date: "5", selected: false},
    {_id: 2, q: "what?", date: "6", selected: false}
  ],
  'group 2': [
    {_id: 10, q: "which way is up?", date: "2", selected: false},
    {_id: 5, q: "which?", date: "3", selected: false},
    {_id: 7, q: "why not?", date: "9", selected: false}
  ],
  'no-group': [
    {_id: 6, q: "who?", date: "0", selected: false},
    {_id: 3, q: "when?", date: "7", selected: false},
    {_id: 1, q: "why?", date: "8", selected: false},
    {_id: 11, q: "when is lunch?", date: "10",selected: false}
  ]
}

组在内部按日期排序,并且组之间按列表中的第一个日期排序。任何没有至少两个条目的组都会被折叠成no-group并且组号是按顺序分配的。

最大的问题是这是否符合您的需求。如果没有,您能否像我在这里所做的那样显示示例输入和预期输出?

更新:内联助手

虽然我是辅助函数的忠实粉丝并且我使用它partition偶尔还有一个稍微概括的版本groupBy通常,我想指出,由于每个仅使用一次,因此我们可以非常简单地内联它们:

const makeGroups = questions => {
  const {'no-group': groupless, ...rest} = questions .reduce (
    (a, {group = 'no-group', ...rest}) => ({...a, [group]: [...(a[group] || []), rest]}),
    {}
  )
  const [largeEnough, tooSmall] = Object .values (rest) .reduce (
      ([yes, no], x) => x.length > 1 ? [[...yes, x], no] : [yes, [...no, x]], [[], []]
  )
  const noGroup = [...groupless, ...tooSmall.flat()].sort((a, b) => a.date - b.date)
  return {
    ...Object .fromEntries (
      largeEnough
        .map (group => group.sort ((a, b) => a .date - b .date))
        .sort ((group1, group2) => group1 [0] .date - group2 [0] .date)
        .map ((group, i) => [`group ${i + 1}`, group])
    ),
    'no-group': noGroup
  }
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何对数组中的对象进行分组并根据对象属性对它们进行排序 的相关文章

  • 在 React 组件中等待异步函数并显示 Spinner

    初学者在这里 尝试从服务器获取一些数据并在获取后将其显示在我的反应组件中 但是 我在将异步函数集成到我的反应组件中时遇到了麻烦 import React useState from react import request from gra
  • Java:线程“主”中的异常 java.lang.StringIndexOutOfBoundsException:字符串索引超出范围:

    我是初学者 谁能帮我弄清楚我们在做什么 我正在尝试读取字符串并将字符串的每个字符存储在数组中 import java util Scanner public class CoreMainDigitExtractor static Scann
  • React Native 无法访问 Cloud Firestore 后端

    我之前使用的是 firebase 实时数据库 但现在想切换到 Cloud Firestore 但即使经过身份验证 也会收到以下错误 我目前正在使用 Android Simulator 尝试禁用我的实时数据库 但找不到解决方案 Firebas
  • 用更好的模式替换开关(Javascript)

    我必须升级我的应用程序以根据用户类型和角色属性显示页面 目前 我使用一个简单的 switch 语句来根据用户类型来执行此操作 例如 switch type case a return CONSTANT ONE case b return C
  • 动态规划的复杂组合条件

    我正在探索动态规划设计方法如何与问题的底层组合属性相关 为此 我正在查看的规范实例硬币找零问题 Let S d 1 d 2 d m and n gt 0是请求的金额 我们可以用多少种方式相加n仅使用中的元素S 如果我们遵循一个动态规划如果要
  • 在动态创建的元素的onclick函数的属性中传递一个字符串

    我试图在动态创建的锚元素的 onClick 事件处理函数的参数中传递一个字符串 请参阅小提琴http jsfiddle net shmdhussain bXYe4 http jsfiddle net shmdhussain bXYe4 我无
  • 替换img路径jquery

    我正在尝试替换 jquery 中的 img 路径 注入远程页面 replaceexample com thumbs withexample com images 我已经尝试过这个 但似乎不起作用 img attr src replace t
  • 如何在单击按钮时清除反应挂钩中的间隔

    我正在用反应钩子构建一个简单的计时器 我有两个按钮启动和重置 当我单击开始按钮时 handleStart 函数工作正常 计时器启动 但我不知道如何在单击重置按钮时重置计时器 这是我的代码 const App gt const timer s
  • 如何将焦点设置在 BootStrap 中的第一个输入字段上? [复制]

    这个问题在这里已经有答案了 可能的重复 如何将焦点设置到独立于 id 的 HTML 表单中的第一个输入元素 https stackoverflow com questions 277544 how to set the focus to t
  • 在给定索引上将字符串分成两部分并返回两部分

    我有一个字符串 需要在给定索引上拆分 然后返回两个部分 并用逗号分隔 例如 string 8211 8 211 98700 98 700 因此 我需要能够在任何给定索引上拆分字符串 然后返回字符串的两半 内置方法似乎执行分割 但只返回分割的
  • 为什么这个递归函数返回未定义?

    我正在尝试编写一个使用递归组合两个字符串的函数 我的代码如下 但我不知道为什么该函数返回未定义 特别是当我在基本情况下使用 console log 时 它不会打印未定义而是打印正确的值 var str3 function merge str
  • 如何跨多个 React Redux 组件使用 requestAnimationFrame 实现游戏循环?

    努力思考最好的解决办法 我可以使用递归调用requestAnimationFrame有一个游戏循环 export interface Props name string points number onIncrement gt void o
  • 当 Chrome 中嵌套滚动中的数据更改时防止页面滚动

    我在页面中有一个固定大小的元素 带有 溢出 滚动 其内容经常更改 我预计该元素内部发生的更改会影响该元素的滚动 但不会影响页面滚动 但是当这个元素位于页面顶部时 页面本身开始滚动 我怎样才能防止这种情况发生 要重现此行为 我在 chrome
  • 即使我的情况按预期发生变化,Angular ngClass 也不会更新我的课程

    我正在创建的模板中有类似的内容 div class nng 3 div 价值app layout isNavbarFixed等用零或一初始化 并且页面第一次加载时 适当的类被插入到我的div 不过 此后通
  • Lisp 中的十进制到二进制 - 制作非嵌套列表

    当达到我的递归情况时 我使用list将未来结果附加到当前结果 但由于递归 我最终得到一个嵌套列表 当我有一个导致递归超过五次的数字时 这会导致错误 任何想法如何我可以在一个简单的非嵌套列表中获得结果 例如 CL 用户 100 8 gt BI
  • jQuery:向左滑动和向右滑动

    我见过slideUp and slideDown在 jQuery 中 左右滑动的功能 方式怎么样 您可以使用 jQuery UI 中的附加效果来做到这一点 详情请参阅此处 http docs jquery com UI Effects Sl
  • 有序 JSON 对象

    我有一个 servlet 它与数据库通信 然后返回有序 按时间排序 对象的列表 在servlet部分 我有 access DB returns a list of User objects ordered ArrayList users M
  • 从json中获取所有子节点

    我有以下 json var source k 01 k 02 children k 05 k 06 children k ABC k PQR k 07 k 03 我希望能够指定 k 的值并取回所有孩子 以及孙
  • 突出显示单词并提取其附近文本的函数

    我有一个文本例如 Etiam porta semmalesuada magna mollis euismod 整数取数 ante venenatis dapibus posuere velit aliquet 埃蒂亚姆 门塔 塞姆 male
  • jQuery appendTo(), json 在 IE 6,7,8 中不起作用

    我这两天绞尽脑汁想找到解决办法 我使用 jQuery ajax 从数据库中获取值 以便在另一个框发生更改时更新一个框 php 脚本从数据库中获取值 然后输出 json 它在 FF 中工作正常 但在所有版本的 IE 中 选择框都不会更新 我已

随机推荐

  • 将羊驼导入 React.js

    我正在尝试在 React 应用程序中使用羊驼形式 import React useEffect useRef from react import from jquery import as popper from popper js imp
  • TextView 中的行号、代码突出显示

    我正在为 Android 开发一个 IDE 它对于编辑短脚本 对文件进行快速调整可能很有用 目前我只使用一个简单的 EditText 但我想添加几个功能 例如 EditText 左侧的行编号和代码突出显示 有人对如何解决这个问题有任何建议吗
  • Laravel 4 - 容器类:共享函数和闭包逻辑

    我对这里讨论的问题有一个后续问题 Laravel 核心方法混乱 https stackoverflow com questions 15758936 laravel core method confusion 17295616 172956
  • 如何处理 SQL 中的引号 ' [重复]

    这个问题在这里已经有答案了 我有一个数据库 其中包含 John Doe 等姓名 不幸的是 其中一些姓名包含引号 例如 Keiran O Keefe 现在 当我尝试搜索此类名称时 如下所示 SELECT FROM PEOPLE WHERE S
  • 替换 WPF 入口点

    WPF定义了自己的Main 方法 我应该如何用我自己的替换它Main 通常 打开 WPF 的方法MainWindow 例如通过命令行参数添加非 WPF 脚本模式 一些示例描述了将 App xaml 的构建操作从ApplicationDefi
  • BNF、EBNF、ABNF:选择哪一个?

    我想提出一种语言语法 我读过一些关于这三个人的内容 但确实看不出有什么是一个人能做而另一个人做不到的 有什么理由使用其中一种而不是另一种吗 或者这只是一个偏好问题 你必须考虑一下EBNF and ABNF作为扩展 可以帮助您在开发语法时更加
  • 如何将没有文件名的 multipart/form-data 文件绑定到 ASP.NET Core 中的 IFormFile

    在 ASP NET Core 3 1 中接受 multipart form data 参数的简单控制器操作中 using System ComponentModel DataAnnotations using Microsoft AspNe
  • FragmentActivity 无法通过 ActivityInstrumentationTestCase2 进行测试

    我在针对利用最近发布的 Fragment 支持 API 的 Android 应用程序执行 Android 单元测试时遇到问题 当针对 FragmentActivity 运行测试时 日志中会显示以下错误 并且类无法加载 当针对相同的类 但派生
  • 通过 Curl OpenId

    如何使用 Curl 进行基于 OpenId 的身份验证 首先我能做到吗 问候 阿拉巴克什 我想你正在谈论curl命令行 而不是库 我没有尝试过 但是根据我对OpenID和curl的了解 应该是可以的 但是 还没有完全自动化 如果您想要真正轻
  • 如何在 Ubuntu 16.10 上安装 Python 3.6 的 pip?

    首先我想指出这个问题可能看起来像是重复的 但事实并非如此 我在这里看到的所有问题都是关于 Python 3 的 pip 而我正在谈论 Python 3 6 当时使用的步骤不适用于 Python 3 6 我从以下位置获得了清晰的 Ubuntu
  • Kotlin 泛型

    如何为 Kotlin 中的方法强制执行泛型类型 例如 我知道您可以执行以下操作 var someVar MutableSet
  • java.lang.IllegalArgumentException:无法在形状为 [2] 的 TensorFlowLite 张量和形状为 [1, 2] 的 Java 对象之间复制

    我已经在 keras 中训练了自己的图像分类模型 并将其转换为 tflite 然后我想通过 tensorflow lite 在 android 中使用该模型 为此 我使用了一个 github 项目来直接获取该项目的应用程序链接 如下 htt
  • 如何自定义 FloatingActionButton 的大小

    FloatingActionButton 默认有两种尺寸 普通和迷你 我需要另一个 比正常的大 app fabSizexml 中的参数变为private int mSize 变量在FloatingActionButton班级 实际大小将由以
  • 在 Docker for Mac 上启动 Ingress 服务

    Using kubectl expose deployment
  • 显示构建错误弹出窗口的代码块

    我正在尝试编译一个简单的 hello world 程序 但 codeblocks v 13 12 总是向我展示It seems that this file has not been built yet Do you want to bui
  • 音频服务播放系统音量控制

    我想问一下有没有办法控制系统音效的音量 当我在游戏中按下音量控制开关 向上和向下 时 系统音效不会受到影响 我还读到这应该受到铃声音量的影响 但奇怪的是 当我上下按音量时 我没有看到扬声器图标顶部的小铃声文本 当我按下音量控制时 我只看到顶
  • GWT 中scheduleDeferred 的用法?

    您好 请告诉我以下代码在 GWT 中的用法 Scheduler get scheduleDeferred new ScheduledCommand Override public void execute code Thanks 它推迟一些
  • 错误“Telerik 未定义”

    运行我的项目时 我收到 JScript 错误 Microsoft JScript 运行时错误 Telerik 未定义 我刚刚尝试从菜单栏 Telerik gt Rad control for asp net ajax gt configur
  • 如何从 JSON 文件获取 DialogFlow 中的 API V2 密钥?

    5 月 31 日之后还有使用 DialogFlow 的人吗 现在有API V2 密钥需要从JSON文件中获取 网上确实没有资料 Json文件 https i stack imgur com emkwE png 从您的代理设置中单击Servi
  • 如何对数组中的对象进行分组并根据对象属性对它们进行排序

    groupSelectedQuestions selectedQuestions var questions q why group no group date 1 q what group group 1 date 1 q when gr