function to get percentage for progress bar with javascript - Stack Overflow

admin管理员组

文章数量:1400149

I have this array:

[{
    "id": "5b221edea8abbc4194a62b90",
    "name": "Job one",
    "tasks": [{
        "id": "5b221edea8abbc4194a62b91",
        "name": "Task 2",
        "status": "finished",
      },
      {
        "id": "5b221edea8abbc4194a62b91",
        "name": "Task 3",
        "status": "pending",
      },
      {
        "id": "5b221edea8abbc4194a62b91",
        "name": "Task 3",
        "status": "to_do",
      },
    ]
  },
  {
    "id": "5b221edea8abbc4194a62b91",
    "name": "Job two",
    "tasks": [{
        "id": "5b221edea8abbc4194a62b96",
        "name": "Task 5",
        "status": "finished",
      },
      {
        "id": "5b221edea8abbc4194a62b97",
        "name": "Task 8",
        "status": "accepted",
      },
    ]
  },
]

All tasks is the 100% of progress bar. There are 5 tasks in this case. 100% = 5 tasks.

I want to know what percentage the progress bar has, according to whether the task has status "finished" or not. In this case should be (100 x 2):5 = 40% pleted in progress bar.

Thank you!

I have this array:

[{
    "id": "5b221edea8abbc4194a62b90",
    "name": "Job one",
    "tasks": [{
        "id": "5b221edea8abbc4194a62b91",
        "name": "Task 2",
        "status": "finished",
      },
      {
        "id": "5b221edea8abbc4194a62b91",
        "name": "Task 3",
        "status": "pending",
      },
      {
        "id": "5b221edea8abbc4194a62b91",
        "name": "Task 3",
        "status": "to_do",
      },
    ]
  },
  {
    "id": "5b221edea8abbc4194a62b91",
    "name": "Job two",
    "tasks": [{
        "id": "5b221edea8abbc4194a62b96",
        "name": "Task 5",
        "status": "finished",
      },
      {
        "id": "5b221edea8abbc4194a62b97",
        "name": "Task 8",
        "status": "accepted",
      },
    ]
  },
]

All tasks is the 100% of progress bar. There are 5 tasks in this case. 100% = 5 tasks.

I want to know what percentage the progress bar has, according to whether the task has status "finished" or not. In this case should be (100 x 2):5 = 40% pleted in progress bar.

Thank you!

• javascript

Share Improve this question Follow edited Jun 14, 2018 at 8:28 mplungjan 179k2828 gold badges182182 silver badges240240 bronze badges asked Jun 14, 2018 at 8:24 tomatitotomatito 41111 gold badge66 silver badges1717 bronze badges 5

• Please visit the help center, take the tour to see what and How to Ask. Do some research, search for related topics on SO; if you get stuck, post a minimal reproducible example of your attempt, noting input and expected output. – mplungjan Commented Jun 14, 2018 at 8:27
• It's Array of Objects - not a JSON – Arkej Commented Jun 14, 2018 at 8:27
• We don't just implement stuff for you. We provide guidance in case you are stuck. It doesn't seem like you are stuck - it just seems there was no attempt made in the direction you are looking for. Please read about How to create a Minimal, Complete, and Verifiable example. Thank you! – Adelin Commented Jun 14, 2018 at 8:28
• @NikhilAggarwal There are 2 of 5 pleted.. – Keith Commented Jun 14, 2018 at 8:30
• @Arkej Appart from the extra mas at the end of some lines it's valid,.. I assume he's copy / pasted, and left out personal info, but left the ma's in by mistake. – Keith Commented Jun 14, 2018 at 8:33

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

You can flatten the array using concat and map. Use reduce to get the percetange.

let arr = [{"id":"5b221edea8abbc4194a62b90","name":"Job one","tasks":[{"id":"5b221edea8abbc4194a62b91","name":"Task 2","status":"finished"},{"id":"5b221edea8abbc4194a62b91","name":"Task 3","status":"pending"},{"id":"5b221edea8abbc4194a62b91","name":"Task 3","status":"to_do"}]},{"id":"5b221edea8abbc4194a62b91","name":"Job two","tasks":[{"id":"5b221edea8abbc4194a62b96","name":"Task 5","status":"finished"},{"id":"5b221edea8abbc4194a62b97","name":"Task 8","status":"accepted"}]}]

let result = [].concat(...arr.map(o => o.tasks)).reduce((c, {status}) => {
  if (status === "finished") c.finished++;
  c.total++;
  c.percentage = (c.finished / c.total) * 100;
  return c;
}, {finished: 0,total: 0,percentage: 0})

console.log(result);

You can simply use nested forEach for calculating the percentage.

Try the following:

var arr =  [{"id":"5b221edea8abbc4194a62b90","name":"Job one","tasks":[{"id":"5b221edea8abbc4194a62b91","name":"Task 2","status":"finished"},{"id":"5b221edea8abbc4194a62b91","name":"Task 3","status":"pending"},{"id":"5b221edea8abbc4194a62b91","name":"Task 3","status":"to_do"}]},{"id":"5b221edea8abbc4194a62b91","name":"Job two","tasks":[{"id":"5b221edea8abbc4194a62b96","name":"Task 5","status":"finished"},{"id":"5b221edea8abbc4194a62b97","name":"Task 8","status":"accepted"}]}];

var pletedCount = 0;
var total = 0;
arr.forEach((o)=>{
  o.tasks.forEach((task) => {
    if(task.status == "finished")
      pletedCount++;
     total++;
  });
});
var percentage  = (pletedCount/total)*100;
console.log(percentage+"%");

本文标签： function to get percentage for progress bar with javascriptStack Overflow