From JSON to Progress-Bar via JS

JavaScript
1

Hello.

I had a apiRouter.get for check some progress, it returns info for example:

{
    "1": 40
    "2": 60
}

The doubt is not the API, it’s about how to show that values from array into the progress-bar.

var num = document.getElementsByClassName('number');
for (i=0; i < num.length; i++) {
	console.log(num); //how can I assign each value to each progress bar?
}

I put all the code is here: https://jsfiddle.net/SidV/u5zLyj9s/

I hope you can help me, I’m learning a lot., thanks guys!

2

Hi,

You can use this:

<progress value="ChangeThis" max="100"></progress>

And change the value attribute in your loop.

1 Like
3

Hi @SpaniardDev, thanks for reply.

I had made some advance here, check this:
https://jsfiddle.net/SidV/u5zLyj9s/22/

Now the progress-bar works, but… I need to find out how to assign array[0], to progress-bar[0]. :thinking:

4

You’re looking for jQuery’s ``eq()``` method.

$('.progress-bar').eq(index)

2 Likes
5

Just Perfect.

You rock!

Thanks!

Final result: https://jsfiddle.net/SidV/u5zLyj9s/58/

1 Like