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'));

Answer 2

您可以使用以下内容：

 var color = {"In Progress": "yellow", "Pending": "red", "Completed": "green"};
 $("#stat2").append(BP.status).css('background-color', color[BP.status]);

对于完整循环，我建议按照

 var color = {"In Progress": "yellow", "Pending": "red", "Completed": "green"};
 $.getJSON('http://localhost:8080/GChartServlet/data1.json', function(statusDataSet) {
    $.each(statusDataSet.AP, function(i, f) {
        if (f.status != undefined) {     // New Code after edit
             $("#stat1").append(f.status).css('background-color', color[f.status]);
        }
    });
  });
});

如果您在理解解决方案的任何部分方面需要帮助或者您遇到任何问题，请告诉我。

另外，我建议您将数据格式更改为以下内容，这样更容易理解：

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

如果您使用我建议的格式，该功能将变为如下：

 var color = {"In Progress": "yellow", "Pending": "red", "Completed": "green"};
 $(function() {
  $.getJSON('http://localhost:8080/GChartServlet/data1.json', function(index, statusDataSet) {
    $("#stat1").append(statusDataSet.status).css('background-color', color[statusDataSet.status]);
  });
});

Answer 3

您可以使用以下功能：

      function getColorForStatus(status) {
        var color;
        switch(status) {
            case "In Progress":
                color = "yellow";
                break;
            case "Pending": 
                color = "red";
                break;
            case "Completed": 
                color = "green";
                break;
        }
        return color;
    }

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

3 个答案: