Javascript/Typescript：数组计数问题答案

【问题标题】：Javascript/Typescipt : Array count issueJavascript/Typescript：数组计数问题
【发布时间】：2022-11-13 18:43:11
【问题描述】：

尝试生成表格报告并以表格形式显示，每个评分的计数基于日期。评分基于 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"
            }
        ]
    }
]

试图生成一个表格，表格中的每一行都应该有带有表头的单元格：日期、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>
      ))}
    </>
  );
}

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>
        </>
        </>

每个星级的计数不正确。在我出错的地方需要帮助

【问题讨论】：

标签： javascript reactjs arrays typescript count

【解决方案1】：

很快解决这个问题。您将 ratingCount 用作数组，但您不包括零计数，这是一个问题。您正在正确计算收视率，但您需要在数组中包含零计数以确保计数位于正确的位置。像这样的东西可以完成这项工作：

const ratingCount = res.map(day => {
  const ratingCountObj = day.Ratings.reduce(
    (acc, cur) => {
      acc[cur]++
      return acc
    },
    {"1":0,"2":0,"3":0,"4":0,"5":0}
  );
  return {
    date: day.SurveyDateTaken,
    ratingCounts: Object.values(ratingCountObj),
  };
});

就我个人而言，我会用一个数组来代替，比如：

const ratingCount = res.map(day => {
  const ratingCounts = day.Ratings.reduce(
    (acc, cur) => {
      acc[cur-1]++
      return acc
    },
    [0,0,0,0,0]
  );
  return {
    date: day.SurveyDateTaken,
    ratingCounts: ratingCounts,
  };
});

但无论哪种方式都应该解决您的直接问题。

【讨论】：