javascript 使用 $.each 解析内容并创建一个数组以发送到函数

Question

我正在尝试解决从 json 格式数据创建数组的问题。

这是我一直尝试以正确格式发送到函数的数据示例。

{"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"}]}

数据可以重新排列/更改/并使其不同，这只是我一直在努力工作的一个例子。我用数字来表示 X 和 Y 坐标。我真的不知道还有什么其他方式可以表示多个 x 和 y 坐标的数据，因此我使用奇数和偶数来表示它们。

我试图创建的数组是这样的

[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 为 X，1 为 Y

正如您在数据中看到的，有 2 行，我需要将 2 行中的 X 和 Y 坐标分别发送到函数。

这是我当前的来源

$.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);
});
});

我已经尝试解决这个问题很多个小时了。我现在已经没有想法了。

我真的很想知道如何做到这一点..

Answer 1

您可以像下面这样创建 json(对象数组)，而不是奇数/偶数组合

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

然后使用循环对其进行处理并访问正确的坐标。

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

如果您在服务器端使用 MVC 和 C#，您可以像下面一样创建该 json

坐标类

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

您的 Controller 操作代码将类似于:-

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;

然后在 View 部分中，访问此 json，如下所示；

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