javascript parse contents using $.each and create an array to send to function

Question

I am trying to solve a problem of creating an array from json format data.

Here is an example of the data I have been trying to send to a function in the correct format.

{"polylines":[{"1":"-3555.00","2":"-2354.00","3":"-981.00","id":"1","text":"line1"},

{"1":"2564.25","2":"2566.00","3":"2664.50","id":"2","text":"line2"}]}

The data can be rearranged/changed/and made different, this just an example of what I have been trying to get to work. I used numbers to represent X and Y coordinates. I didn't really know what other way I could represent the data for multiple x and y coordinates, so I used odd and even to represent them.

The array I am trying to create is like this

[Array[4]]
    0: Array[4]
        0: Array[2]
            0: -82.1002847583325
            1: -98.19580078125
            length: 2
        1: Array[2]
            0: -82.1002847583325
            1: -98.19580078125
            length: 2
[Array[5]]
    0: Array[4]
        0: Array[2]
            0: -82.1002847583325
            1: -98.19580078125
            length: 2
        1: Array[2]
            0: -82.1002847583325
            1: -98.19580078125
            length: 2

0 is X and 1 is Y

As you see in the data, there is 2 lines and I need to send the X and Y coordinates from the 2 lines to the function separately.

This is my current source

$.getJSON("data.php", function(e) {
var x = [];
var y = [];
var xy = [];

// Get each polyline

$.each(e.polylines, function(t, n) {
//go through each x and y so we can convert the x and y in a separate function

   $.each(n, function(n, r) {
        // If odd
        if(n % 2 == 1){
        x.push(r);
         // If even
        } else if (n % 2 == 0){
            y.push(r);
            // Convert each coordinate
            xy[r] = convertPoint(x, y);
            x = []; // Clear x
            y = []; // Clear y
            xy.push(xy[r]);
        }
    });

    console.log(xy);
    // My problem is here, I cant seem to create the correct array 
    //because the code is just going through both lines and sending them together.
    //I need to somehow separate them And send both arrays to the line below 
    //using the above each function.
    var r = L.multiPolyline([xy], {
        color: n.color,
        clickable: false,
        lineCap: "round"
    }).addTo(map);
});
});

I have been trying to get my head round this for many many hours.. I have now ran out of ideas.

I would really like to know how to do this..

Answer 1

I have managed to solve this myself after thinking over a bite to eat. Even though I did that yesterday lol.

Here is the fix...

    var x = [];
    var y = [];
    var xy = [];
    var pushed = [];
    var pushed2 = [];
    $.each(e.polylines, function(t, n) {
        $.each(n, function(n, r) {
            if(n % 2 == 1){
                x.push(r);
            } else if (n % 2 == 0){
                y.push(r);
                xy = convertPoint(x, y);
                pushed.push(xy);
                x = [];
                y = [];
            }
        });
        pushed2 = [pushed];
        pushed = [];
        console.log(pushed2);
        var r = L.multiPolyline(pushed2, {
            color: "#ffffff",
            clickable: false,
            lineCap: "round"
        }).addTo(map);

I feel dumb sometimes... Lol Maybe I am.. After a little play with the arrays and understanding them ALOT more.

So basically xy is sent and converted, pushed saves xy into an array.. My problem was, I wasn't clearing the array after it had created the first line, so it was stacking the arrays up causing weird behaviour.

Its so annoying when its something so small lol. I knew I was on the right tracks... Thanks all.

Answer 2

Instead of odd/even combination, you can create your json like below (array of objects)

var json = [{"X":"100","Y":"100"},{"X":"200","Y":"200"},{"X":"300","Y":"300"}];

and then process it using loop on it and access proper coordinates.

$(json).each(function(i){
    var x = json[i].X;
    var y = json[i].Y;
});

If you're using MVC with C# at Server side, you can create that json like below

Coordinate class

public class Coordinates
{
    public string X { get; set; }
    public string Y { get; set; }
}

your controller action code would be something like:-

List<Coordinates> lst = new List<Coordinates>();
lst.Add(new Coordinates { X = "100", Y = "100" });
lst.Add(new Coordinates { X = "200", Y = "200" });
lst.Add(new Coordinates { X = "300", Y = "300" });
lst.Add(new Coordinates { X = "400", Y = "400" });
var json = new JavaScriptSerializer().Serialize(lst);
ViewBag.Coordinates = json;

then in view part, access this json like below;

//var json = [{"X":"100","Y":"100"},{"X":"200","Y":"200"},{"X":"300","Y":"300"}];
var json = JSON.parse('@ViewBag.Coordinates');