javascript - 在单个函数中处理多个对象

Question

我有一个 json 文件，其中包含类似的数据集但不同的对象。

{
    "AP": [{
            "name": "Autogen Program"
        }, {
            "status": "Completed"
        }, {
            "start": "2014-05-05"
        }, {
            "end": "2014-05-05"
        }],
    "BP": [{
            "name": "Backend Program"
        }, {
            "status": "In Progress"
        }, {
            "start": "2014-05-05"
        }, {
            "end": ""
        }],
    "AP": [{
            "name": "Capital Program"
        }, {
            "status": "Pending"
        }, {
            "start": ""
        }, {
            "end": ""
    }]
}

我有一个函数可以单独调用每个函数。

$(function() {
    $.getJSON('http://localhost:8080/GChartServlet/data1.json', function(statusDataSet) {
        $.each(statusDataSet.AP, function(i, f) {
            var color;
            switch(f.status) {
                case "In Progress":
                    color = "yellow";
                    break;
                case "Pending": 
                    color = "red";
                    break;
                case "Completed": 
                    color = "green";
                    break;
            }

            $("#stat1").append(f.value).css('background-color', color);
        });
    });
});

是否可以在单个函数中调用所有状态值？或者，如何将颜色大小写保留在单独的函数中，以便我可以调用该函数，而不是为每个函数编写颜色切换大小写？

类似这样的:--

$("#stat1").append(AP.status).css('background-color', color);
$("#stat2").append(BP.status).css('background-color', color);

Answer 1

如果您有兴趣关注DRY (Don't Repeat Yourself)原则上，我建议创建一个包装函数来处理所有类型，并传递一个参数来指示要处理的类型，另一个参数来传递要附加的元素。

还将开关更改为简单的对象映射器，原因是因为每种情况下的逻辑都是相同的，所以开关并不是真正必要的。

function myCall(type, statElement){
    $.getJSON('http://localhost:8080/GChartServlet/data1.json', function(statusDataSet) {
        $.each(statusDataSet[type], function(i, f) {
            var colorMap = {
                "In Progress" : "yellow",
                "Pending"     : "red",
                "Completed"   : "green"
            };

            statElement.append(
                $('<span />', { text : f.value })
                    .css('background-color', colorMap[f.status]);
            );
    });
}

用法:

myCall('AP', $('#stat1'));
myCall('BP', $('#stat2'));