typescript Javascript/类型描述：数组计数问题

wyyhbhjk  于 2022-11-18  发布在  TypeScript
关注(0)|答案(1)|浏览(111)

试图生成一个表格报告，并以表格形式显示，每个评级的计数基于日期。评级是基于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>
        </>
        </>

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

typescript

1条答案

按热度按时间
zour9fqk

zour9fqk1#

很快就能解决这个问题。你使用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,
  };
});

但无论哪种方法都能解决您眼前问题。
还有一个关于类型的快速评论--你把Ratings作为一个字符串数组输入。这可能是故意的，但只是指出它，以防这给你带来其他问题。在我看来，它们更像是数字。

赞(0）分享  回复(0）举报  2022-11-18
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com