将值数组映射为百分比

JrCoder

为什么map在这些数组上不起作用？如何将这个数组变成百分比？

我试图映射和parseInt从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();

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
      integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
      crossorigin="anonymous"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div class="container">
      <div class="info card scroll shadow p-3 mb-5 bg-white rounded"></div>
    </div>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
    <script src="index.js"></script>
  </body>
</html>

保利先生

您可以通过以下方式取平均值：

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。