How to get the current value in a loop in Javascript when creating a new array?

Question

How to get the current value in a loop in Javascript?

var evaluationsByThemeDatasets = [];
var array = [];
$.each(arrayTest, function (index, arrayTestValue) {
    var arrayData = [];
    console.log(arrayTest)
    array['label'] = arrayTestValue.title;
    array['borderColor'] = window.chartColors.red;
    array['fill'] = false;
    array['data'] = arrayData;
    array['yAxisID'] = 'y-axis-1'
    evaluationsByThemeDatasets[index] = array;
});

console.log(array);
console.log(evaluationsByThemeDatasets);

When I do this, the label stored in my array "evaluationsByThemeDatasets" is every time the same (the last value in my arrayTest)

The arrayTest looks like this:

1
:
{title: "Gratitude", data: {…}}
2
:
{title: "Gentleness", data: {…}}
3
:
{title: "Love", data: {…}}
4
:
{title: "Courage", data: {…}}

I also tried this way, but it doesn't work too:

$.each(arrayTest, function (index, arrayTestValue) {
    var arrayData = [];
    console.log(arrayTest[index])
    array['label'] = arrayTest[index]['title'];
    array['borderColor'] = window.chartColors.red;
    array['fill'] = false;
    array['data'] = arrayData;
    array['yAxisID'] = 'y-axis-1'
    evaluationsByThemeDatasets[index] = array;
});

I need to create an array similar to this one:

test = [{
    label: "Love",
    borderColor: window.chartColors.red,
    backgroundColor: window.chartColors.red,
    fill: false,
    data: [
        1,
        4,
        3,
        6,
        8,
        6,
        3
    ],
    yAxisID: "y-axis-1",
}, {
    label: "Gratitude",
    borderColor: window.chartColors.blue,
    backgroundColor: window.chartColors.blue,
    fill: false,
    data: [
        2,
        3,
        1,
        5,
        4,
        7,
        8
    ],
    yAxisID: "y-axis-1"
}, {
    label: "Courage",
    borderColor: window.chartColors.yellow,
    backgroundColor: window.chartColors.yellow,
    fill: false,
    data: [
        3,
        4,
        5,
        3,
        7,
        5,
        9,
        8
    ],
    yAxisID: "y-axis-1"
}];

This is why I am using arrays and not object.

I looked for a solution on this posts:

Unfortunately, nothing seems to work. Any help would be appreciated!

If I use an Object instead:

var evaluationsByThemeDatasets = {};
var array = {};

$.each(arrayTest, function (index, arrayTestValue) {
    var arrayData = [];
    console.log(arrayTest[index])
    array = {
        label:arrayTest[index]['title'],
        borderColor: window.chartColors.red,
        fill: false,
        data: arrayData,
        yAxisID: 'y-axis-1',
    };
    evaluationsByThemeDatasets[index] = array;
});

Now my evaluationsByThemeDatasets array looks like that:

1:
borderColor
:
"rgb(255, 99, 132)"
data
:
[]
fill
:
false
label
:
"Gratitude"
yAxisID
:
"y-axis-1"
__proto__
:
Object
2
:
borderColor
:
"rgb(255, 99, 132)"
data
:
[]
fill
:
false
label
:
"Gentleness"
yAxisID
:
"y-axis-1"
__proto__
:
Object
3
:
borderColor
:
"rgb(255, 99, 132)"
data
:
[]
fill
:
false
label
:
"Love"
yAxisID
:
"y-axis-1"
__proto__
:
Object
4
:
borderColor
:
"rgb(255, 99, 132)"
data
:
[]
fill
:
false
label
:
"Courage"
yAxisID
:
"y-axis-1"

/**** EDIT *****/

When I do something like that:

var evaluationsByThemeDatasets = [];
var object = {};
$.each(evaluationsByThemeAndMonth, function (index, evaluationByTheme) {
    console.log(index);
    if(index!=0) {
        console.log(evaluationByTheme);
        object = {
            label: evaluationByTheme.title,
            borderColor: window.chartColors.red,
            backgroundColor: window.chartColors.red,
            fill: false,
            data: [],
            yAxisID: 'y-axis-1',
        };
        //evaluationsByThemeDatasets[index] = object;
        evaluationsByThemeDatasets = [object];
    }
});

The plugin works but the problem is that it keeps only last value.

When I do this:

var evaluationsByThemeDatasets = [];
var object = {};
$.each(evaluationsByThemeAndMonth, function (index, evaluationByTheme) {
    console.log(index);
    if(index!=0) {
        console.log(evaluationByTheme);
        object = {
            label: evaluationByTheme.title,
            borderColor: window.chartColors.red,
            backgroundColor: window.chartColors.red,
            fill: false,
            data: [],
            yAxisID: 'y-axis-1',
        };
        evaluationsByThemeDatasets[index] = object;
        //evaluationsByThemeDatasets = [object];
    }
});

The plugin doesn't work anymore.

I want my array "evaluationsByThemeDatasets" to looks like that:

At this moment it looks like that:

As previously said, you needed to move the `var array = [];` inside the loop. But yes, creating the object with a literal inside the loop, like in your last snippet, would work as well. What is unexpected about the result? — Bergi, Oct 08 '17 at 20:38
Btw, you should keep `var evaluationsByThemeDatasets = [];` as an array - `index` is an integer — Bergi, Oct 08 '17 at 20:39
Please be more specific about how "*The plugin doesn't work anymore*". Btw, if you use `if(index!=0)`, you won't create a `0` element in the array; not sure why you did that? — Bergi, Oct 09 '17 at 08:49

How to get the current value in a loop in Javascript when creating a new array?

0 Answers0