javascript - 使用 JSON 数据获取特定值的特定颜色

Question

我想识别传入的数据，并且需要为其应用完全相同的颜色。

数据序列是固定顺序的(但所有数据都可能存在或不存在)并且需要应用下面提到的固定颜色。

例如预期的数据顺序和颜色顺序如下:

CLOSED           GREEN
VERIFIED         GREEN
RESOLVED         YELLOW
REOPENED         RED
IN_PROGRESS      BLUE
ASSIGNED         BROWN
NEW              BROWN
UNCONFIRMED      BROWN

因此，每当 CLOSED 出现时，都应应用 GREEN 颜色，对于 RESOLVED -> YELLOW 和 ... .对于未确认 -> 棕色。

现在的问题是所有数据可能会出现，也可能不会出现，例如

CLOSED
VERIFIED
IN_PROGRESS
UNCONFIRMED

所以用 Java 脚本编写基本逻辑，例如:

if ( jsonData.search("CLOSED") != -1 
   && jsonData.search("VERIFIED") != -1 
   && jsonData.search("IN_PROGRESS") != -1 
   && jsonData.search("UNCONFIRMED") != -1 ) {

   colors: ['green', 'green', 'blue', 'brown'],

} else if (jsonData.search("IN_PROGRESS")
   && jsonData.search("ASSIGNED") != -1 ) {

   colors: ['blue', 'brown'],

} else if (jsonData.search("IN_PROGRESS")) {

   colors: ['blue'],

} else if (jsonData.search("CLOSED") != -1 
   || jsonData.search("VERIFIED") != -1) {

   colors: ['green'],
}

这适用于上述序列，但每当数据不同时，例如

IN_PROGRESS
NEW

或者

RESOLVED
REOPENED
NEW

或者

CLOSED
IN_PROGRESS

或者

RESOLVED
NEW

等等..很多很多组合...

然后这将失败并对数据应用错误的颜色。如果我写下每个数据的条件和各自的序列，那么我会发疯，而且它完全无效、乏味且非常复杂。

以下是示例 json 数据:

{"cols":[{"label":"status","type":"string"},{"label":"count","type":"string"}],"rows":[{"c":[{"v":"VERIFIED"},{"v":16}]},{"c":[{"v":"RESOLVED"},{"v":1}]},{"c":[{"v":"IN_PROGRESS"},{"v":14}]},{"c":[{"v":"ASSIGNED"},{"v":39}]},{"c":[{"v":""},{"v":0}]}]}

{"cols":[{"label":"status","type":"string"},{"label":"count","type":"string"}],"rows":[{"c":[{"v":"CLOSED"},{"v":3}]},{"c":[{"v":"VERIFIED"},{"v":13}]},{"c":[{"v":"RESOLVED"},{"v":2}]},{"c":[{"v":"IN_PROGRESS"},{"v":26}]},{"c":[{"v":"ASSIGNED"},{"v":2}]},{"c":[{"v":""},{"v":0}]}]}

{"cols":[{"label":"status","type":"string"},{"label":"count","type":"string"}],"rows":[{"c":[{"v":"IN_PROGRESS"},{"v":3}]},{"c":[{"v":"NEW"},{"v":8}]},{"c":[{"v":""},{"v":0}]}]}

{"cols":[{"label":"status","type":"string"},{"label":"count","type":"string"}],"rows":[{"c":[{"v":"RESOLVED"},{"v":12}]},{"c":[{"v":"IN_PROGRESS"},{"v":9}]},{"c":[{"v":"ASSIGNED"},{"v":15}]},{"c":[{"v":""},{"v":0}]}]}

{"cols":[{"label":"status","type":"string"},{"label":"count","type":"string"}],"rows":[{"c":[{"v":"VERIFIED"},{"v":6}]},{"c":[{"v":"IN_PROGRESS"},{"v":40}]},{"c":[{"v":"ASSIGNED"},{"v":7}]},{"c":[{"v":"NEW"},{"v":8}]},{"c":[{"v":""},{"v":0}]}]}

{"cols":[{"label":"status","type":"string"},{"label":"count","type":"string"}],"rows":[{"c":[{"v":"CLOSED"},{"v":3}]},{"c":[{"v":"VERIFIED"},{"v":35}]},{"c":[{"v":"RESOLVED"},{"v":15}]},{"c":[{"v":"IN_PROGRESS"},{"v":92}]},{"c":[{"v":"ASSIGNED"},{"v":63}]},{"c":[{"v":"NEW"},{"v":16}]},{"c":[{"v":""},{"v":0}]}]}

有人可以考虑有效的逻辑，而不是像上面提到的那样为精确序列编写单独的数据+颜色吗？

如果有任何问题或我错过了什么，请告诉我。

Answer 1

考虑到数据序列是固定顺序的，并且您将 JSON 视为字符串，我建议采用以下解决方案:

const DataMap = {
  CLOSED: 'green',
  VERIFIED: 'green',
  RESOLVED: 'yellow',
  REOPENED: 'red',
  IN_PROGRESS: 'blue',
  ASSIGNED: 'brown',
  NEW: 'brown',
  UNCONFIRMED: 'brown'
};

let colors = [];

Object.keys(DataMap).forEach((key, index) => {
  if (jsonData.search(key) !== -1) {
    colors.push(DataMap[key]);
  }
});

请查看 jsFiddle .