将值数组映射到百分比

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 x = sGrades.map((v) => `${parseInt(v)}%`)

但这将返回一个字符串数组。