Question

我有这个对象数组，需要对其进行修改以简化渲染。我使用了类似问题中提到的一些代码： Group array of object nesting some of the keys with specific names

这是我的数组和代码

function groupAndMap(events, Year, Month, predic){
    return _.map(_.groupBy(events,Year), (obj,key) => ({
        [Year]: key,
        [Month]: (predic && predic(obj)) || obj
    }));
}

const items = [
{	
    "Year": 2018,
    "Month": 7,
    "Day": 2,
    "Title": "event1",
    "StartDate": "2018-07-02T10:00:00.000Z",
    "EndDate": "2018-07-02T11:00:00.000Z"
}, {
    "Year": 2018,
    "Month": 8,
    "Day": 31,
    "Title": "event2",
    "StartDate": "2018-07-31T10:00:00.000Z",
    "EndDate": "2018-08-02T11:00:00.000Z"
}
   
    
];

function groupAndMap(items, itemKey, childKey, predic){
    return _.map(_.groupBy(items,itemKey), (obj,key) => ({
        [itemKey]: key,
        [childKey]: (predic && predic(obj)) || obj
    }));
}

var result = groupAndMap(items,"Year","Months",
                  arr => groupAndMap(arr,"Month", "Days"));

var jsonvalue = JSON.stringify(result);
document.write(jsonvalue);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.js"></script>

我希望我的输出采用以下格式

[{
	"Year": "2019",
	"Months": [{
		"Month": "8",
		"Days": [{
			"Day": "31",
			"Events": [{
				"Year": 2019,
				"Month": 8,
				"Day": 31,
				"Title": "event3",
				"StartDate": "2018-07-31T10:00:00.000Z",
				"EndDate": "2018-08-02T11:00:00.000Z"
			}]
		}]
	}]
}]

我应该如何修改代码才能获得此结果？

Answer 1

您可以使用带有键的数组对嵌套对象进行分组。

function groupAndMap(events, groups) {
    return _(events)
        .groupBy(groups[0])
        .map((array, key) => ({
            [groups[0]]: key,
            [groups[1] + 's']: groups[2] && groupAndMap(array, groups.slice(1)) || array
        }))
        .values();          
}

var items = [{ Year: 2018, Month: 7, Day: 2, Title: "event1", StartDate: "2018-07-02T10:00:00.000Z", EndDate: "2018-07-02T11:00:00.000Z" }, { Year: 2018, Month: 8, Day: 31, Title: "event2", StartDate: "2018-07-31T10:00:00.000Z", EndDate: "2018-08-02T11:00:00.000Z" }],
    result = groupAndMap(items, ["Year", "Month", "Day", "Event"]);

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.js"></script>

为结果定义了键

function groupAndMap(events, groups, keys) {
    return _(events)
        .groupBy(groups[0])
        .map((array, key) => ({
            [groups[0]]: key,
            [groups[1] + 's']: groups[2] && groupAndMap(array, groups.slice(1), keys) || _.map(array, o => _.pick(o, keys))
        }))
        .values();          
}

var items = [{ Year: 2018, Month: 7, Day: 2, Title: "event1", StartDate: "2018-07-02T10:00:00.000Z", EndDate: "2018-07-02T11:00:00.000Z" }, { Year: 2018, Month: 8, Day: 31, Title: "event2", StartDate: "2018-07-31T10:00:00.000Z", EndDate: "2018-08-02T11:00:00.000Z" }],
    result = groupAndMap(items, ["Year", "Month", "Day", "Event"], ['Title', 'StartDate', 'EndDate']);

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.js"></script>

Answer 2

如果您按一系列条件分组，我认为这是最简单的：

const entries = Symbol.for("entries");
const tree = { [entries]: [] };
const groups = ["Year", "Month", "Day"];
const childNames = ["Months", "Days", "Events"];

for(const item of items) {
  let node = tree;
  for(const [index, group] of groups.entries()) {
    const childName = childNames[index];
    const key = item[group];
    if(node[key]) {
      node = node[key];
    } else {
      const children = [];          
      node[entries].push({
          [group]: key,
          [childName]: children
      });
      node = node[key] = { [entries]: children };
    }
  }
  node[entries].push(item);
}

const result = tree[entries];

您可以通过以下方式访问事件：

 for(const event of tree[2017][12][31][entries])

和result包含您需要的数据结构。

使用lodash将对象数组分组为特定格式

2 个答案: