javascript - 映射 - 分离 Javascript 对象然后附加最后一个对象

Question

处理以下问题有相当大的挑战。

我有以下数组和 javascript 对象:

输入:

我在 javascript 对象中有三种不同的颜色 (blue,green,yellow) 和三种不同的大小 (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/