Loop through data in javascript

Question

I am trying to display data in a chart. and I have data passed from my controller as below.

0: {label: "500", backgroundColor: "rgb(102,205,170,0.5)", borderColor: "rgb(102,205,170,0.5)", data: "13,49,2,2"}
1: {label: "1000", backgroundColor: "rgb(0,191,255,0.5)", borderColor: "rgb(0,191,255,0.5)", data: "40,2,41,4"}
2: {label: "1500", backgroundColor: "rgb(112,128,144,0.5)", borderColor: "rgb(112,128,144,0.5)", data: "3,41,0,8"}
3: {label: "2000", backgroundColor: "rgb(220,20,60,0.5)", borderColor: "rgb(220,20,60,0.5)", data: "28,30,40,43"}
4: {label: "2500", backgroundColor: "rgb(240,230,140,0.5)", borderColor: "rgb(240,230,140,0.5)", data: "0,6,20,14"}
5: {label: "3000", backgroundColor: "rgb(0,191,255,0.5)", borderColor: "rgb(0,191,255,0.5)", data: "31,26,31,32"}

now I want to loop through the data so the result is like

label: '500',
backgroundColor: rgb(102,205,170,0.5),
borderColor: rgb(102,205,170,0.5),
data: [
    26,2,41,13
],
...

What I have tried is as follows

for (const [key, value] of Object.entries(dataChart)) {
     console.log(key.borderColor);
}

here i have am only trying to display borderColor but it says `undefined'

Any help will be appreciated.

ABGR · Accepted Answer · 2020-05-31 08:15:10Z

3

What you need to do is value.borderColor instead of key.borderColor

answered May 31, 2020 at 8:15

ABGR

5,2634 gold badges34 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

zken · Accepted Answer · 2020-05-31 08:14:54Z

1

When using Object.entries and destructuring each iteration to [key, value], key is the actual key of the current iteration: 0, 1, 2 ... and value if the actual object.

Then if you want to get borderColor :

for (const [key, value] of Object.entries(dataChart)) {
     console.log(value.borderColor); // borderColor is an attribut of value, not key
}

answered May 31, 2020 at 8:14

zken

1,0369 silver badges29 bronze badges

Comments

Combinu · Accepted Answer · 2020-05-31 08:16:06Z

var entries = {
0: {label: "500", backgroundColor: "rgb(102,205,170,0.5)", borderColor: "rgb(102,205,170,0.5)", data: "13,49,2,2"},
1: {label: "1000", backgroundColor: "rgb(0,191,255,0.5)", borderColor: "rgb(0,191,255,0.5)", data: "40,2,41,4"},
2: {label: "1500", backgroundColor: "rgb(112,128,144,0.5)", borderColor: "rgb(112,128,144,0.5)", data: "3,41,0,8"},
3: {label: "2000", backgroundColor: "rgb(220,20,60,0.5)", borderColor: "rgb(220,20,60,0.5)", data: "28,30,40,43"},
4: {label: "2500", backgroundColor: "rgb(240,230,140,0.5)", borderColor: "rgb(240,230,140,0.5)", data: "0,6,20,14"},
5: {label: "3000", backgroundColor: "rgb(0,191,255,0.5)", borderColor: "rgb(0,191,255,0.5)", data: "31,26,31,32"}
}

for (var prop in entries)
{
    console.log(entries[prop]["data"])
}

Raffaele · Accepted Answer · 2020-05-31 08:16:24Z

0

In the instructions const [key, value] of Object.entries(dataChart) you're creating 2 variables (key and value). Those 2 variables contains every single element of the array (value) and the index of the element into the array (key). So time by time, key is just a number.

Btw I suggest to use a different approach:

dataChart.forEach(elementOfArray => {
    console.log(elementOfArray.borderColor);
});

The forEach is more used in js, it use the concept of callback. It will call the function you pass as param for every single element of the array by passing the array element as param.

answered May 31, 2020 at 8:16

Raffaele

7678 silver badges23 bronze badges

Collectives™ on Stack Overflow

Loop through data in javascript

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related