json数据的Javascript数据结构

Question

嗨，我有詹金斯的一些JSON数据。我获取JSON并获得如下所示的作业对象：

{
     color: "#FF4136"
     name: "XXX-tomcat-accept"
     url: "http://1.1.7.9:8080/job/xxx-tomcat-verify/"
}

对于每个作业流，有三个作业

• -verify
• -accept
• -delivery

我要做的是构建一个数据结构，即数组或数组哈希，其中第一个元素被验证，然后接受，然后传递(与上面的列表相同的顺序)。

所以像这样的事情

0[xxx-tomcat-verify,xxx-tomcat-accept,xxx-tomcat-delivery]
1[xxx-linux-verify,xxx-linux-accept,xxx-linux-delivery]
2
3
......

我只是不能把我的头脑围绕在逻辑上来重新组装上述结构中的数据。我想要做的是使用d3为Jenkins构建一个轻量级的构建仪表板。下面的代码构建作业并给它们贴上标签。只需要让他们按正确的顺序。

因此，我的代码是

d3.json("data.json", function(error, data) {

    job.forEach(function(d){

        //green balls !
        if (d.color === "blue") {
            d.color = "#2ECC40";
        }   else if(d.color === "notbuilt"){
            d.color = "#AAAAAA";

        } else if(d.color === "aborted"){
            d.color = "#0074D9";
        } else if(d.color === "red"){
            d.color = "#FF4136"

        }


        var svgContainer = d3.select("body").append("svg")
                            .attr("width", 460)
                            .attr("height", 110);

        var rectangle = svgContainer.append("rect")
                            .attr("x", 5)
                            .attr("y", 5)
                            .attr("width", 450)
                            .attr("height", 100)
                            .attr("text", d.name)
                            .attr("rx", 10)
                            .attr("ry", 10)
                            .attr("xlink:href", d.url)
                            .attr("fill", d.color);

        var text = svgContainer.selectAll("text")
                        .data(rectangle)
                        .enter()
                        .append("text");

        var textLabels = text
                 .attr("x", 20)
                 .attr("y", 60)
                 .text(d.name)
                 .attr("font-family", "Avro")
                 .attr("font-size", "30px")
                 .attr("fill", "#2f2f2f");



        });

});

Answer 1

您可以使用d3.nest()。

https://jsfiddle.net/ermineia/jz293y70/1/

var jobs = [{
     color: "#FF4136",
     name: "XXX-tomcat-verify",
     url: "http://1.1.7.9:8080/job/xxx-tomcat-verify/"
},
{
     color: "#FF4136",
     name: "XXX-tomcat-accept",
     url: "http://1.1.7.9:8080/job/xxx-tomcat-accept/"
},
{
     color: "#FF4136",
     name: "XXX-tomcat-delivery",
     url: "http://1.1.7.9:8080/job/xxx-tomcat-delivery/"
},
{
     color: "#FF4136",
     name: "XXX-linux-verify",
     url: "http://1.1.7.9:8080/job/xxx-tomcat-verify/"
},
{
     color: "#FF4136",
     name: "XXX-linux-accept",
     url: "http://1.1.7.9:8080/job/xxx-tomcat-accept/"
},
{
     color: "#FF4136",
     name: "XXX-linux-delivery",
     url: "http://1.1.7.9:8080/job/xxx-tomcat-delivery/"
}];

console.log( jobs );
var formatted_map = d3.nest().key( function( d ) { return d.name.substr( 0, d.name.lastIndexOf( '-' ) ); } ).map( jobs );
console.log( formatted_map );
console.log( JSON.stringify( formatted_map ))
var formatted_array = d3.nest().key( function( d ) { return d.name.substr( 0, d.name.lastIndexOf( '-' ) ); } ).entries( jobs );
console.log( formatted_array );
console.log( JSON.stringify( formatted_array ))

写出：

[Object, Object, Object, Object, Object, Object]
(index):78 Object {XXX-tomcat: Array[3], XXX-linux: Array[3]}
(index):79 {"XXX-tomcat":[{"color":"#FF4136","name":"XXX-tomcat-verify","url":"http://1.1.7.9:8080/job/xxx-tomcat-verify/"},{"color":"#FF4136","name":"XXX-tomcat-accept","url":"http://1.1.7.9:8080/job/xxx-tomcat-accept/"},{"color":"#FF4136","name":"XXX-tomcat-delivery","url":"http://1.1.7.9:8080/job/xxx-tomcat-delivery/"}],"XXX-linux":[{"color":"#FF4136","name":"XXX-linux-verify","url":"http://1.1.7.9:8080/job/xxx-tomcat-verify/"},{"color":"#FF4136","name":"XXX-linux-accept","url":"http://1.1.7.9:8080/job/xxx-tomcat-accept/"},{"color":"#FF4136","name":"XXX-linux-delivery","url":"http://1.1.7.9:8080/job/xxx-tomcat-delivery/"}]}
(index):81 [Object, Object]
(index):82 [{"key":"XXX-tomcat","values":[{"color":"#FF4136","name":"XXX-tomcat-verify","url":"http://1.1.7.9:8080/job/xxx-tomcat-verify/"},{"color":"#FF4136","name":"XXX-tomcat-accept","url":"http://1.1.7.9:8080/job/xxx-tomcat-accept/"},{"color":"#FF4136","name":"XXX-tomcat-delivery","url":"http://1.1.7.9:8080/job/xxx-tomcat-delivery/"}]},{"key":"XXX-linux","values":[{"color":"#FF4136","name":"XXX-linux-verify","url":"http://1.1.7.9:8080/job/xxx-tomcat-verify/"},{"color":"#FF4136","name":"XXX-linux-accept","url":"http://1.1.7.9:8080/job/xxx-tomcat-accept/"},{"color":"#FF4136","name":"XXX-linux-delivery","url":"http://1.1.7.9:8080/job/xxx-tomcat-delivery/"}]}]