trying to generate a table report and display in table form, count of each rating based on date. Rating is based on 5. I have the object
const surveyReport = [{“SurveyDateTaken”:”2022-11-04T00:00:00″,”SurveyAnswers”:[{“Title”:”Star Rating”,”AnswerKey”:”4″},{“Title”:”Feedback”,”AnswerKey”:”First Comment”}]},{“SurveyDateTaken”:”2022-11-04T00:00:00″,”SurveyAnswers”:[{“Title”:”Star Rating”,”AnswerKey”:”3″},{“Title”:”Feedback”,”AnswerKey”:”3 star Comment”}]},{“SurveyDateTaken”:”2022-11-04T00:00:00″,”SurveyAnswers”:[{“Title”:”Star Rating”,”AnswerKey”:”3″},{“Title”:”Feedback”,”AnswerKey”:”3 Star Rating”}]},{“SurveyDateTaken”:”2022-11-04T00:00:00″,”SurveyAnswers”:[{“Title”:”Star Rating”,”AnswerKey”:”2″},{“Title”:”Feedback”,”AnswerKey”:”2 Star Rating”}]},{“SurveyDateTaken”:”2022-11-04T00:00:00″,”SurveyAnswers”:[{“Title”:”Star Rating”,”AnswerKey”:”2″}]},{“SurveyDateTaken”:”2022-10-31T00:00:00″,”SurveyAnswers”:[{“Title”:”Star Rating”,”AnswerKey”:”4″},{“Title”:”Feedback”,”AnswerKey”:”New UI looks good”}]},{“SurveyDateTaken”:”2022-10-31T00:00:00″,”SurveyAnswers”:[{“Title”:”Star Rating”,”AnswerKey”:”4″},{“Title”:”Feedback”,”AnswerKey”:”star rating 4″}]},{“SurveyDateTaken”:”2022-10-31T00:00:00″,”SurveyAnswers”:[{“Title”:”Star Rating”,”AnswerKey”:”1″},{“Title”:”Feedback”,”AnswerKey”:”Difficult to Navigate”}]},{“SurveyDateTaken”:”2022-10-31T00:00:00″,”SurveyAnswers”:[{“Title”:”Star Rating”,”AnswerKey”:”3″},{“Title”:”Feedback”,”AnswerKey”:”Okay UI”}]},{“SurveyDateTaken”:”2022-11-04T00:00:00″,”SurveyAnswers”:[{“Title”:”Star Rating”,”AnswerKey”:”5″}]},{“SurveyDateTaken”:”2022-11-04T00:00:00″,”SurveyAnswers”:[{“Title”:”Star Rating”,”AnswerKey”:”2″},{“Title”:”Feedback”,”AnswerKey”:”two Star Rating”}]},{“SurveyDateTaken”:”2022-11-04T00:00:00″,”SurveyAnswers”:[{“Title”:”Star Rating”,”AnswerKey”:”4″},{“Title”:”Feedback”,”AnswerKey”:”Easy payment site”}]},{“SurveyDateTaken”:”2022-10-15T00:00:00″,”SurveyAnswers”:[{“Title”:”Star Rating”,”AnswerKey”:”2″}]},{“SurveyDateTaken”:”2022-11-03T00:00:00″,”SurveyAnswers”:[{“Title”:”Star Rating”,”AnswerKey”:”5″},{“Title”:”Feedback”,”AnswerKey”:”Awesome”}]},{“SurveyDateTaken”:”2022-11-03T00:00:00″,”SurveyAnswers”:[{“Title”:”Star Rating”,”AnswerKey”:”4″},{“Title”:”Feedback”,”AnswerKey”:”PS rocks”}]},{“SurveyDateTaken”:”2022-11-02T00:00:00″,”SurveyAnswers”:[{“Title”:”Star Rating”,”AnswerKey”:”3″},{“Title”:”Feedback”,”AnswerKey”:”three Star Rating”}]},{“SurveyDateTaken”:”2022-11-02T00:00:00″,”SurveyAnswers”:[{“Title”:”Star Rating”,”AnswerKey”:”5″},{“Title”:”Feedback”,”AnswerKey”:”Experian Rocks”}]},{“SurveyDateTaken”:”2022-11-01T00:00:00″,”SurveyAnswers”:[{“Title”:”Star Rating”,”AnswerKey”:”4″},{“Title”:”Feedback”,”AnswerKey”:”4 Star Rating”}]},{“SurveyDateTaken”:”2022-11-01T00:00:00″,”SurveyAnswers”:[{“Title”:”Star Rating”,”AnswerKey”:”4″},{“Title”:”Feedback”,”AnswerKey”:”Easy Payment Plan set up”}]},{“SurveyDateTaken”:”2022-10-29T00:00:00″,”SurveyAnswers”:[{“Title”:”Star Rating”,”AnswerKey”:”4″},{“Title”:”Feedback”,”AnswerKey”:”Nice UI”}]},{“SurveyDateTaken”:”2022-10-29T00:00:00″,”SurveyAnswers”:[{“Title”:”Star Rating”,”AnswerKey”:”5″},{“Title”:”Feedback”,”AnswerKey”:”Best UI”}]},{“SurveyDateTaken”:”2022-10-27T00:00:00″,”SurveyAnswers”:[{“Title”:”Star Rating”,”AnswerKey”:”2″},{“Title”:”Feedback”,”AnswerKey”:”NOT UI FRIENDLY”}]},{“SurveyDateTaken”:”2022-10-27T00:00:00″,”SurveyAnswers”:[{“Title”:”Star Rating”,”AnswerKey”:”4″},{“Title”:”Feedback”,”AnswerKey”:”Beautiful Colors”}]},{“SurveyDateTaken”:”2022-10-27T00:00:00″,”SurveyAnswers”:[{“Title”:”Star Rating”,”AnswerKey”:”3″},{“Title”:”Feedback”,”AnswerKey”:”Colors are just OK”}]},{“SurveyDateTaken”:”2022-10-31T00:00:00″,”SurveyAnswers”:[{“Title”:”Star Rating”,”AnswerKey”:”4″},{“Title”:”Feedback”,”AnswerKey”:”Nice Colors”}]},{“SurveyDateTaken”:”2022-11-01T00:00:00″,”SurveyAnswers”:[{“Title”:”Star Rating”,”AnswerKey”:”4″}]},{“SurveyDateTaken”:”2022-11-02T00:00:00″,”SurveyAnswers”:[{“Title”:”Star Rating”,”AnswerKey”:”5″}]},{“SurveyDateTaken”:”2022-11-03T00:00:00″,”SurveyAnswers”:[{“Title”:”Star Rating”,”AnswerKey”:”3″}]},{“SurveyDateTaken”:”2022-11-04T00:00:00″,”SurveyAnswers”:[{“Title”:”Star Rating”,”AnswerKey”:”3″}]},{“SurveyDateTaken”:”2022-11-04T00:00:00″,”SurveyAnswers”:[{“Title”:”Star Rating”,”AnswerKey”:”3″},{“Title”:”Feedback”,”AnswerKey”:”3 stars”}]},{“SurveyDateTaken”:”2022-10-31T00:00:00″,”SurveyAnswers”:[{“Title”:”Star Rating”,”AnswerKey”:”3″},{“Title”:”Feedback”,”AnswerKey”:”Need Chat Support”}]}]
trying to generate a table, each row in the table should have cells with Table head: Date, 1 rating (count), 2 rating (count), 3 rating (count), 4 rating (count), 5 rating (count)
const group = (arr) =>
Object.entries(arr.reduce((acc, { SurveyDateTaken, SurveyAnswers }) => {
const [{ AnswerKey }] = SurveyAnswers;
console.error('Ans', AnswerKey);
(acc[SurveyDateTaken] || (acc[SurveyDateTaken] = [])).push(AnswerKey);
return acc;
}, {})).map<{SurveyDateTaken: string, Ratings: string[]}>(([date, rating ]) => ({ SurveyDateTaken: moment(date).format('MM/DD/YYYY'), Ratings: (rating as string[]) }));
const res = group(surveyReport);
const ratingCount = res.map(day => {
const ratingCountObj = day.Ratings.reduce((acc, cur) => (acc[cur] ? acc[cur]++: acc[cur] = 1, acc), {});
return {
date: day.SurveyDateTaken,
ratingCounts: Object.values(ratingCountObj)
}
}
);
const renderCountRows = ( ratingCountPerDay ) => {
return (
<>
<TableCell>{ratingCountPerDay.date}</TableCell>
{ratingCountPerDay.ratingCounts.map((ratingCount) => (
<TableCell style={{ textAlign: "right" }}>{ratingCount}</TableCell>
))}
</>
);
}
HTML:
<>
<div> Rating Report </div>
<>
<Paper className={classes.paper}>
<div className={classes.paperContainer}>
<TableContainer>
<Table className={classes.table} aria-label="customized table">
<TableHead>
<TableRow>
<StyledTableCell>Date Submitted</StyledTableCell>
<StyledTableCell align="right">1 Star</StyledTableCell>
<StyledTableCell align="right">2 Star</StyledTableCell>
<StyledTableCell align="right">3 Star</StyledTableCell>
<StyledTableCell align="right">4 Star</StyledTableCell>
<StyledTableCell align="right">5 Star</StyledTableCell>
</TableRow>
</TableHead>
<TableBody>
{ratingCount.map(rc => (
<TableRow key={rc.date}>
{renderCountRows(rc)}
</TableRow>
) )}
</TableBody>
</Table>
</TableContainer>
</div>
</Paper>
</>
</>
the count of each star rating is incorrect. Need help where I’m going wrong
