Angular.js按子属性分组

时间:2016-03-09 16:54:41

标签: javascript angularjs json loops

我有这样的JSON文件:

{
"dates": 
[
    {
    "day": "Monday",
    "shifts": [
        {
            "shift-name": "shift 1",
            "assignments": [
                {
                    "position-name": "supervisor",
                    "location-name": "Location 2", 
                    "persons": [
                        {
                            "person-name": "USI, ANTHONY RN"
                        }
                    ]
                },
                {
                    "position-name": "driver(s?)",
                    "location-name": "LOCATION 1",
                    "persons": [
                        {
                            "person-name": "LOVELAND, VIVIENNEW"
                        },
                        {
                            "person-name": "LOVELAND, VIVIENNEW"
                        }
                    ]
                }...

我需要使用这个JSON创建一个循环。但我需要以一种所有人按位置名称分组的方式来实现。但我不知道该怎么做,因为位置名称可能会重复。所以结构应该是这样的:

Date
  Location1
     Shift1
       Supervisors
       Drivers
     Shift2
       Supervisors
       Drivers
  Location2
     Shift1
       Supervisors
       Drivers
     Shift2
       Supervisors
       Drivers

谢谢!

2 个答案:

答案 0 :(得分:0)

您需要将此数据映射到一个新的更扁平的结构,该结构代表您要将其用于

的内容

通常,处理类似这样的事情的最佳方法是创建一个使用公共值作为键的临时对象。然后根据这些键将项目推送到数组。

首先,你要迭代dates

在每个日期迭代中创建一个空对象。

然后,您将使用assignments值作为键来循环location-name创建对象键。

该对象看起来像:

{
   "Location 1":{"supervisors":[], "drivers":[]},   
   "Location 2":{"supervisors":[], "drivers":[]}
}

然后在迭代persons时,使用"position-name"来确定要推送到哪个阵列。这一步看起来像:

最后,您迭代该对象以创建该日期的位置所需的数组,并且日期循环继续并在下一次迭代中重复该过程

答案 1 :(得分:0)

例如,我将抽象的test.json文件与您的结构一起使用。并从XmlHttpRequest获取数据:

    var xhr = new XMLHttpRequest();
    xhr.open("GET", 'test.json', true);
    xhr.onload = function(){
        // get result
        var data = JSON.parse(xhr.responseText);
        // result
        var result = {};
        // go loop!
        data.dates.forEach(function(day){
            // check if day exists
            result[day.day] = result[day.day] || {};
            day.shifts.forEach(function(shift){
                shift.assignments.forEach(function(assignment){
                    //check if location exists
                    result[day.day][assignment['location-name']] = result[day.day][assignment['location-name']] || {};
                    // ... if shift exists in this location
                    result[day.day][assignment['location-name']][shift['shift-name']] = result[day.day][assignment['location-name']][shift['shift-name']] || {};
                    // ... if position-name exists in this location -> shift
                    result[day.day][assignment['location-name']][shift['shift-name']][assignment['position-name']] = result[day.day][assignment['location-name']][shift['shift-name']][assignment['position-name']] || [];
                    // ... push persions in position-name array
                    assignment.persons.forEach(function(person){
                        result[day.day][assignment['location-name']][shift['shift-name']][assignment['position-name']].push(person);
                    })
                });
            });
        });
        // print result
        console.log(result)
    };
    xhr.send();