映射 - 单独的JavaScript对象，然后附加最后一个对象

Question

处理以下问题存在很大的挑战。

我有以下数组和JavaScript对象：

输入：

我有三种不同的颜色(blue,green,yellow)和JavaScript对象中的三种不同尺寸(sz=9,11,13)并尝试映射它们。

color=["blue","green","yellow"];
myObj=[{x:0,y:1,sz:9},{x:4,y:11,sz:9},{x:11,y:17,sz:11},{x:29,y:18,sz:13}];

输出：

data1:[{x:0,y:1,sz:9,color:"blue"},{x:4,y:11,sz:9,color:"blue"}];
data2:[{x:4,y:11,sz:9,color:"green"},{x:11,y:17,sz:11,color:"green"}];
data3:[{x:11,y:17,sz:11,color:"yellow"},{x:29,y:18,sz:13,color:"yellow"}];

这是JSFIDDLE，它基于其sz属性映射对象并添加color属性。唯一缺少的是添加最后一个对象并更改颜色。

例如：

data2的第一个对象来自 data1的最后一个对象，除了绿色。

这是我拥有的：

data2:[{x:11,y:17,sz:11,color:"green"}];

这是我需要的：

data2:[{x:4,y:11,sz:9,color:"green"},{x:11,y:17,sz:11,color:"green"}];

Answer 1

我认为您需要这样的东西：

对不起，我删除了旧代码。

更新3：

https://jsfiddle.net/kxhsapad/3/

旧请求：

var size = [9, 11, 13, 15];
var colorA = ["blue", "green", "yellow", "red"];
var myObj = [{x:0,y:1,sz:9},{x:4,y:11,sz:9},{x:11,y:17,sz:11},{x:29,y:18,sz:13},{x:39,y:15,sz:15}];
var d1 = [];
var d2 = [];
for (var i = 0; i < size.length; i++) {
    d1 = [];  
    d1[0] = myObj[i];
    d1[0].color = colorA[i];
    d1[1] = myObj[i + 1];
    d1[1].color = colorA[i];
    d2.push(d1);
}
for (var i = 0; i < d2.length; i++) {
    for (var j = 0; j < d2[i].length; j++) {
        var html = '<div id="' + i + '_' + j + '"';
        if (j%2==0) html += ' style="float:left;"';
        html += '>x=' + d2[i][j].x + ';y=' + d2[i][j].y + ';sz=' + d2[i][j].sz + ';color=' + d2[i][j].color + ';</div>';
        $('#container').append(html);
    }
}

请检查jsfiddle以获取完整代码https://jsfiddle.net/kxhsapad/