试图生成一个表格报告,并以表格形式显示,每个评级的计数基于日期。评级是基于5。我有对象
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"
}
]
}
]
尝试生成表格时,表格中的每一行都应包含Table head:日期,1评级(计数),2评级(计数),3评级(计数),4评级(计数),5评级(计数)
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>
))}
</>
);
}
于飞:
<>
<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>
</>
</>
每个星星的计数都不正确。在出错的地方需要帮助
1条答案
按热度按时间zour9fqk1#
很快就能解决这个问题。你使用
ratingCount
作为数组,但是你没有包括零计数,这是一个问题。你正确地计算了评分,但是你需要在数组中包括零计数,以确保计数在正确的位置。类似于下面的操作可以完成这项工作:就我个人而言,我会用数组来代替,类似于:
但无论哪种方法都能解决您眼前问题。
还有一个关于类型的快速评论--你把
Ratings
作为一个字符串数组输入。这可能是故意的,但只是指出它,以防这给你带来其他问题。在我看来,它们更像是数字。