React / ES6减少对象

时间:2019-03-09 14:16:32

标签: javascript ecmascript-6

我有以下用于特定日期锻炼的对象:

{
  "2019-03-02": [
    {
        "id": 1,
        "workout_day": "2019-03-02",
        "title": "Swimming",
        "description": "",
        "completed": true,
        "points": 5
    },
    {
        "id": 2,
        "workout_day": "2019-03-02",
        "title": "Running",
        "description": "",
        "completed": false,
        "points": 0
    },
    {
        "id": 3,
        "workout_day": "2019-03-02",
        "title": "Rowing",
        "description": "",
        "completed": true,
        "points": 3
    },
  ],
 "2019-03-05": [...]
}

我想获得一个新对象,该对象每天显示存在多少锻炼,已经完成多少锻炼以及总分,如下所示:

{
  "2019-03-02": {
    "workouts": 3,
    "workouts_completed": 2,
    "total_points": 8
  },
  "2019-03-05: {...}
}

但是,此刻我完全被困住了。感谢您的帮助!

6 个答案:

答案 0 :(得分:1)

这会将您的数据缩减为您想要转换的数据

const data = {
  '2019-03-02': [{
      id: 1,
      workout_day: '2019-03-02',
      title: 'Swimming',
      description: '',
      completed: true,
      points: 5
    },
    {
      id: 2,
      workout_day: '2019-03-02',
      title: 'Running',
      description: '',
      completed: false,
      points: 0
    },
    {
      id: 3,
      workout_day: '2019-03-02',
      title: 'Rowing',
      description: '',
      completed: true,
      points: 3
    }
  ],
  '2019-03-03': [{
      id: 1,
      workout_day: '2019-03-02',
      title: 'Swimming',
      description: '',
      completed: true,
      points: 7
    },
    {
      id: 2,
      workout_day: '2019-03-02',
      title: 'Running',
      description: '',
      completed: false,
      points: 0
    },
    {
      id: 3,
      workout_day: '2019-03-02',
      title: 'Rowing',
      description: '',
      completed: false,
      points: 3
    }
  ]
}

const reducedData = Object.keys(data).reduce((acc, key) => {
  acc[key] = {
    workouts: data[key].length,
    workouts_completed: data[key].reduce((acc, item) => {
      if (item.completed) return acc + 1
      return acc
    }, 0),
    total_points: data[key].reduce((acc, item) => {
      return acc + item.points
    }, 0)
  }
  return acc
}, {})

console.log(reducedData)

答案 1 :(得分:1)

您有多种解决方案可以实现这一目标。这是结合了Object.entries + Array.reduce的一个。

Object.entries(input).reduce((acc, [date, workouts]) => {
  const completed = workouts.filter(workout => workout.completed);

  return {
    ...acc,
    [date]: {
      workouts: workouts.length,
      workouts_completed: completed.length,
      total_points: completed.reduce((acc, workout) => acc + workout.points, 0),
    }
  };
}, {});

请注意,Object.entries并非在所有主流浏览器中都可用。

答案 2 :(得分:1)

这完成了工作。

我使用了Array.prototype.reduce并使用默认值进行了破坏。

var data = {
  "2019-03-02": [{
      "id": 1,
      "workout_day": "2019-03-02",
      "title": "Swimming",
      "description": "",
      "completed": true,
      "points": 5
    }, {
      "id": 2,
      "workout_day": "2019-03-02",
      "title": "Running",
      "description": "",
      "completed": false,
      "points": 0
    }, {
      "id": 3,
      "workout_day": "2019-03-02",
      "title": "Rowing",
      "description": "",
      "completed": true,
      "points": 3
    },
  ],
  "2019-03-05": [{
      "id": 1,
      "workout_day": "2019-03-02",
      "title": "Swimming",
      "description": "",
      "completed": false,
      "points": 0
    }, {
      "id": 2,
      "workout_day": "2019-03-02",
      "title": "Running",
      "description": "",
      "completed": false,
      "points": 0
    }, {
      "id": 3,
      "workout_day": "2019-03-02",
      "title": "Rowing",
      "description": "",
      "completed": true,
      "points": 8
    },
  ]
};

var result = {};

for (let key in data) {
  result[key] = data[key].reduce(({
        workouts = 0,
        workouts_completed = 0,
        total_points = 0
      }, currentValue) => {
      return {
        workouts: workouts + 1,
        workouts_completed: currentValue.completed ? workouts_completed + 1 : workouts_completed,
        total_points: total_points + currentValue.points
      };
    }, {});
}

console.log(result);

答案 3 :(得分:1)

假设您的对象在一个名为json的对象中保存了特定日期的锻炼,则可以使用Object.keys()遍历所有键。然后,您可以map进行此操作,并一次获得特定一天的锻炼。然后,您可以使用它每天创建一个对象。要计算诸如totalPoints之类的内容,您将使用reduce来汇总总分。

Object.keys(json).map(key => {
    return {
        [key]: {
            workoutsCompleted: json[key].length,
            totalPoints: json[key].reduce((accum, workout) => accum + workout.points, 0)
        }
    };
});

答案 4 :(得分:0)

$(window).scroll(function(){

  var fixed = $(".centered-container");

  var fixed_position = $(".centered-container").offset().top;
  var fixed_height = $(".centered-container").height();

  var toCross_position = $(".hero").offset().top;
  var toCross_height = $(".hero").height();

  $( ".hero" ).each(function() {

    if (fixed_position + fixed_height  < toCross_position) {
      $(".hero").removeClass("active");
    } else if (fixed_position > toCross_position + toCross_height) {
      $(".hero").removeClass("active");
    } else {
      $(".hero").addClass("active");
    }

  });
});

const result = {}; for(const [workout_day, entries] of Object.entries(input)) { result[workout_day] = { workouts: entries.length, workouts_completed: entries.reduce((acc, e) => acc + e.completed, 0), total_points: entries.reduce((acc, e) => acc + e.points, 0), }; } 对于映射对象非常有用。

答案 5 :(得分:0)

const data = {
  "2019-03-02": [
    {
        "id": 1,
        "workout_day": "2019-03-02",
        "title": "Swimming",
        "description": "",
        "completed": true,
        "points": 5
    },
    {
        "id": 2,
        "workout_day": "2019-03-02",
        "title": "Running",
        "description": "",
        "completed": false,
        "points": 0
    },
    {
        "id": 3,
        "workout_day": "2019-03-02",
        "title": "Rowing",
        "description": "",
        "completed": true,
        "points": 3
    },
  ],
 "2019-03-05": []
};

function makeReport (report, workout) {
  return {
    workouts: report.workouts + 1,
    workouts_completed: workout.completed ? report.workouts_completed + 1 : report.workouts_completed,
    total_points: report.total_points + workout.points
  };
}

const out = Object.entries(data).reduce(function (report, [date, workouts]) {
  return {
    ...report,
    [date]: workouts.reduce(makeReport, { workouts: 0, workouts_completed: 0, total_points: 0 })
  };
}, {});

console.log(out);

记录:

{ '2019-03-02': { workouts: 3, workouts_completed: 2, total_points: 8 },
  '2019-03-05': { workouts: 0, workouts_completed: 0, total_points: 0 } }