在 For 循环中创建键值对数组

Question

I have this response from my ajax

and this is my configs.objects

configs.objects    = ['Mexico','Brazil','Spain','Italy','USA'];

(7) [19, 51, 40, 69, 15, 77, 40]

I created a for-loop

var datasets = [];

for (i = 0; i < configs.objects.length; i++) {

    console.log(i);

    datasets[i]['borderWidth']      = 1;
    datasets[i]['hoverBorderWidth'] = 2;
    datasets[i]['hoverBorderColor'] = '#fff';
    datasets[i]['data']             = response[i];
    datasets[i]['label']            = configs.objects[i];


    // debugger;

}


console.log(datasets);

I kept getting

Uncaught TypeError: Cannot set property 'borderWidth' of undefined

Why ? Am I doing anything wrong ? I've been staring at this codes for the last 2 hours.

I can't tell why I kept getting that error.

Answer 1

datasets is an empty array with no elements, and you never add any. Simply ensure that the i th element is initialized as an object fist:

datasets[i] = {};

You could also restructure your code a bit and instead push object literals to datasets for the same result:

datasets.push({
    borderWidth: 1,
    hoverBorderWidth: 2,
    hoverBorderColor: #fff,
    data: response[i],
    label: configs.objects[i]
});

Answer 2

Before you set values, you need to initialize it to an object first:

datasets[i] = {};
datasets[i]['key'] = 'value';

Further reading: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer

Answer 3

var datasets = []; for (i = 0; i < configs.objects.length; i++) { let obj = {} obj['borderWidth'] = 1; obj['hoverBorderWidth'] = 2; obj['hoverBorderColor'] = '#fff'; obj['data'] = response[i]; obj['label'] = configs.objects[i]; datasets[i] = obj; // debugger; }

Answer 4

It's because by using datasets[i] you're approaching it as if that object already exists to grab out of the array and modify; when you're really trying to store those values in that empty array as objects.

The way you handle that is to create a variable to store those properties into then push that object to your array which can look like this.

var datasets = [];

for(i = 0; i < configs.object.length; i++){
    var dataObject = {
        borderWidth: 1,
        hoverBorderWidth: 2,
        hoverBorderColor: '#fff',
        data: response[i],
        label: configs.objects[i]
    };

    datasets.push(dataObject);
}

console.log(datasets);

Now the datasets variable will have objects with those properties and values which you can now index into.