I'm doing an React assignment for school but I'm a bit stuck and I can't find the right answer.

I have a data file with the following data:

    const students = [
        {
            "name": "Evelyn",
            "assignment": "SCRUM",
            "difficultyRating": 3,
            "funRating": 4
        },
        {
            "name": "Evelyn",
            "assignment": "W1D1-1",
            "difficultyRating": 3,
            "funRating": 3
        },
        {
            "name": "Evelyn",
            "assignment": "W1D2-1",
            "difficultyRating": 1,
            "funRating": 3
        }
    ]

This goes on, there are 10 student and different assignments. What I need to do is get the average of the difficultyRating and funRating per assignment and use this data in a Victory Graph to display. Victory is working but it's not displaying the average.

I have this function already which takes all the assignments and fills it with the other data but I don't know what to do in the next step, how can I make a new Array of objects that I can use in the Victory Chart which displays the average difficulty/funrating per assignment.

The code I have so far is this:

  const groupByAssignment = (objectArray, property) => {
    return objectArray.reduce(function (total, obj) {
      let key = obj[property];
      if (!total[key]) {
        total[key] = [];
      }
      total[key].push(obj);
      return total;
    }, {});
  }

  let groupedAssignments = groupByAssignment(students, 'assignment');

In the Victory Graph the output looks like this now:

<VictoryBar
                    style={{
                        data: {
                            fill: "#ff0b03",
                        },
                    }}
                    barWidth={2}
                    data={props.data}
                    x="assignment"
                    y="difficultyRating"
                /> 
             )}

What I need is a data piece that has every assignment with the difficulty/rating averaged from all 10 students.

Hopefully my question is clear and you guys can help me! I've been stuck for days now!

CodePudding user response：

The following will give the average values of fun rating and difficulty rating. I have added more entries as there was only one record for each assignment.

const students = [ { name: "Evelyn", assignment: "SCRUM", difficultyRating: 3, funRating: 4, }, { name: "Pqr", assignment: "SCRUM", difficultyRating: 4, funRating: 2, }, { name: "Evelyn", assignment: "W1D1-1", difficultyRating: 3, funRating: 3, }, { name: "Evelyn", assignment: "W1D2-1", difficultyRating: 1, funRating: 3, }, { name: "Abc", assignment: "W1D2-1", difficultyRating: 5, funRating: 4, }, ];

const groupByAssignmentWithAverage = (objectArray, property) => {
  return objectArray.reduce(
    (prevValue, { difficultyRating, funRating, [property]: key }) => {
      // key is the value of in obj with property as data name 
      if (!prevValue[key]) {
       // create a new entry for each assignment type
        prevValue[key] = {
          difficultyRatingAvg: difficultyRating,
          funRatingAvg: funRating,
          count: 1,
        };
      } else {
        // get the previous count and average values
        const {count, difficultyRatingAvg, funRatingAvg} = prevValue[key];
        prevValue[key] = {
          difficultyRatingAvg:
            (difficultyRatingAvg   difficultyRating) /
            (count   1),
          funRatingAvg: (funRatingAvg   funRating) / (count   1),
          count: count   1,
        };
      }
      return prevValue;
    },
    {}
  );
};

let output = groupByAssignmentWithAverage(students, "assignment");

console.log(output);

CodePudding user response：

My solution would be to seprate the objects with same assignment name, and then just find the average of that particular assignment by mapping over individual arrays of objects which we get from initial step.

result = students.reduce(function (r, a) {
        r[a.assignment] = r[a.assignment] || [];
        r[a.assignment].push(a);
        return r;
    }, Object.create(null));

console.log(result);

Now you can easily format data according to the graph package you are using.