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

时间:2016-07-30 09:26:04

标签: javascript arrays

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

数据序列是固定顺序(但可能都存在或不存在),需要应用如下所述的固定颜色。

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

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

每当CLOSED出现GREEN时,应该应用RESOLVED - >颜色。 YELLOW和.... UNCONFIRMED - > BROWN

现在问题是所有数据都可能出现,而且可能不会出现这种情况。

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

OR

RESOLVED
REOPENED
NEW

OR

CLOSED
IN_PROGRESS

OR

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}]}]}

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

如果有任何问题或错过任何问题,请告诉我。

1 个答案:

答案 0 :(得分: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