按阵列键分组

时间:2018-08-22 22:48:56

标签: javascript arrays angular typescript

我有一组看起来像这样的数据:

{schedules: {team_name: 'Red', color: '#...', due_date '12-12-2018', yards: []} etc

我有一个函数,可以使用“团队名称”将其分组为一个数组,这很好用:

setGroupedSchedules(): void {
    let groups = {};
    let schedules = this.schedules;

    for(let schedule of schedules) {
      let teamName = (schedule.team ? schedule.team.name : 'Unassigned');
      groups[teamName] = !groups[teamName] ? [] : groups[teamName];
      groups[teamName].push(schedule);
    }
    this.grouped = groups;
  }

如何为每个分组添加team.color?

结果:

<div style="background:team_color">
Team: Red 
- Schedule 1
 - Yard
 - Yard
- Schedule 2
 - Yard
</div>

1 个答案:

答案 0 :(得分:0)

也许是这样吗?

import React from 'react';
import { StyleSheet, Text, View, TouchableHighlight, Alert , WebView } from "react-native";

import { Epub } from 'epubjs-rn';

const epubCFI = require('./lib/EpubCFI/src/epubcfi');   

export default class App extends React.Component {
    constructor(props) {
        super(props);
    }

    onLongPress = (event) => {
        console.log("epubCFI.prototype.parse(): " , epubCFI.prototype.parse(event));
        console.log("epubCFI.prototype.getRange(): ", epubCFI.prototype.getRange(event));
    }

    selectText = (event, rendition) => {
        console.log('event', event);

        const parsedEvent = epubCFI.prototype.parse(event);
    }

    render() {

        return (
        <Epub onSelected={(event, rendition) => this.selectText(event, rendition)} 
            onLongPress={this.onLongPress.bind(this)} 
            src={"https://s3.amazonaws.com/epubjs/books/moby-dick/OPS/package.opf"}
            flow="scrolled" />
        )
    }
}

然后该方法的结果将类似于

for(let schedule of schedules) {
  let teamName = (schedule.team ? schedule.team.name : 'Unassigned');
  let teamColor = (schedule.team ? schedule.team.color : 'Unassigned');
  groups[teamName] = !groups[teamName] ? [] : groups[teamName];
  colorSchedule = {color: teamColor, team: schedule.team};
  groups[teamName].push(colorSchedule);
}

哪个让您更容易看到每个日程表的颜色?我不确定这是否是您要查找的内容,因为颜色和小组名称已经可以访问,而无需运行您的方法。

{
  "Red": [
    {
      "color": "#...",
      "team": {
        "name": "Red",
        "color": "#...",
        "due_date": "12-12-2018",
        "yards": []
      }
    }
  ]
}