Question

I need to format an array from a list of values.

Currently I have the following hard-coded points:

points = [
{x: 20, y: 112},
{x: 23, y: 101},
{x: 51, y: 89},
{x: 63, y: 89},
{x: 84, y: 129},
{x: 64, y: 153},
{x: 45, y: 151},
{x: 38, y: 140},
{x: 28, y: 150},
{x: 10, y: 144},
{x: 0, y: 130},
{x: 10, y: 114}
];

The resulting array is to be passed to a function.

I now need to pass another array to the same function but I cannot hard-coded them as above. Instead, I am using a JS framework to grab the points dynamically using, for example, $(#container).get(‘points’);

How do I convert the new array so that it is formatted similarly to the x: | y: structure as above?

points="20,112, 23,101, 51,89, 63,89, 84,129, 64,153, 45,151, 38,140, 28,150, 10,144, 0,130, 10,114"

I found the following in MooTools:

Array.each([1, 2, 3], function(number, index)
{
    alert('x:' + number + ', y: ' + index);
});

…but somehow that doesn’t seem like the correct way to do this.

Can I get a little guidance please?

Answer 1

You can split ^[docs] the string and iterate over it, taking two values in each iteration:

var parts = points.split(',');
var pointsArray = [];

for(var i = 0, l = parts.length; i < l; i += 2) {
    pointsArray.push({x: +parts[i], y: +parts[i+1]});
}