将值数组映射到百分比

Question

为什么地图不能在这些数组上工作？我怎样才能把这个数组变成百分比？

我正在尝试映射并解析从 API 返回的多个数组，但它仅映射每个数组中的第一个字符串，然后将其余部分返回为 NaN。

我怀疑 forloop 可能会扰乱地图的功能，但我不知道如何解决这个问题。

另外，当我检查数组上的数据类型时，它会作为对象返回。我的目标是从给定的 8 个数字中求出平均值（以百分比表示）。

const apiInfo = $(".info");

function init() {

  $.ajax({

    url: "https://api.hatchways.io/assessment/students",

    method: "GET",

  }).then(function (res) {

    for (let i = 0; i < res.students.length; i++) {

      var curr = res.students[i];

      if (curr.id.includes("")) {

        $(".info");

        let img = $(

          "<img class='pPic float-left m-3' src='" +

            res.students[i].pic +

            "'alt = 'profile pic'>"

        );

        let title = res.students[i].firstName + " " + res.students[i].lastName;

        let email = res.students[i].email;

        let company = res.students[i].company;

        let skill = res.students[i].skill;

        let sGrades = res.students[i].grades

        console.log(typeof(sGrades))

        let x = sGrades.map(parseInt)

        let average = ""

        console.log(sGrades, x);

        let list = $("<div class='infoB'>");

        list.append(img);

        list.append("<h4 class='title'>" + title + "<h4>");

        list.append("<p class='mb-1 stats'> email: " + email + "</p>");

        list.append("<p class='mb-1 stats'> comapny: " + company + "</p>");

        list.append("<p class='mb-1 stats'> skill: " + skill + "</p>");

        list.append("<p class='mb-1 stats'> average: " + average + "</p>");

        $(".info").append(list);

      }

    }

  });

}

init();

Answer 1

您可以通过以下方式对值进行平均：const avg = (arr) => arr.reduce((acc, val) => acc + val, 0) / arr.length;您可以通过以下方式调用上面的函数：avg(student.grades.map(grade => parseInt(grade, 10)));我还建议使用模板文字来构建输出 HTML。演示const apiInfo = $('.info');const avg = (arr) => arr.reduce((acc, val) => acc + val, 0) / arr.length;const renderStudentInfo = (student, $target) => {  const fullName = student.firstName + ' ' + student.lastName,    average = avg(student.grades.map(grade => parseInt(grade, 10)));  $target.append($(`    <div class="infoB">      <img class="pPic float-left m-3"        src="${student.pic}" alt="profile pic" />      <h4 class="title">${fullName}</h4>      <p class="mb-1 stats">Email: ${student.email}</p>      <p class="mb-1 stats">Company: ${student.company}</p>      <p class="mb-1 stats">Skill: ${student.skill}</p>      <p class="mb-1 stats">Average: ${average.toFixed(2)}%</p>    </div>  `));};const init = () => {  $.ajax({    url: 'https://api.hatchways.io/assessment/students',    method: 'GET',  }).then(({ students }) => {    students.forEach((student) => {      if (student.id.includes('')) {        renderStudentInfo(student, apiInfo);      }    });  });}init();.infoB {  margin-bottom: 1em;}.infoB .title {  font-weight: bold;}.infoB .mb-1.stats {  color: #444;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" /><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /><div class="container">  <div class="info card scroll shadow p-3 mb-5 bg-white rounded"></div></div>

Answer 2

您没有为地图提供正确的回调函数。尝试将该行更改为此let&nbsp;x&nbsp;=&nbsp;sGrades.map((v)&nbsp;=>&nbsp;`${parseInt(v)}%`)但这将返回一个字符串数组。