Getting specific color for specific value using JSON data

Question

I would like to identity incoming data and needs to apply exactly the same color for the same.

Data sequence is in fixed order (but all may be present or not) and need to apply fixed color mentioned like below.

For e.g. expected data sequence and color sequence is like below:

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

So whenever CLOSED comes GREEN color should be applied, for RESOLVED -> YELLOW and .... for UNCONFIRMED -> BROWN.

Now the problem is all data may come and may not come for e.g.

CLOSED
VERIFIED
IN_PROGRESS
UNCONFIRMED

So written basic logic in Java script like:

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

This will work for above sequence but whenever data would be different for e.g.

IN_PROGRESS
NEW

OR

RESOLVED
REOPENED
NEW

OR

CLOSED
IN_PROGRESS

OR

RESOLVED
NEW

etc.. many many combinations...

Then this will fail and apply wrong color to data. If i write condition of each and every data and respective sequence then i will become mad and its completely ineffective, tedious and very complex too.

Here are the sample json data:

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

Can someone thinks about effective logic rather than writing individual data+color for exact sequence like mentioned?

Please let me know if any questions or i missed anything.

why cant you process each and every line of data separately instead of treating it as a sequence. — Shubham Khatri
– Shubham Khatri, Commented Jul 30, 2016 at 9:29
Because i want to apply color based on sequence. How will you know by processing data separately ? — Jitesh Sojitra
– Jitesh Sojitra, Commented Jul 30, 2016 at 9:37
Alex, thanks! I have added sample JSON data where all data having different status to apply colors. — Jitesh Sojitra
– Jitesh Sojitra, Commented Jul 30, 2016 at 9:44
should all those lines within your sample json data be processed at one time or separately? — RomanPerekhrest
– RomanPerekhrest, Commented Jul 30, 2016 at 10:28

Alex M · Accepted Answer · 2016-07-30 09:58:02Z

1

Taking into account that data sequence is in fixed order and you treat JSON as String, I'd suggest the following solution:

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

Please look at the jsFiddle.

answered Jul 30, 2016 at 9:58

Alex M

2,8467 gold badges31 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jitesh Sojitra Over a year ago

Hi Alex, thanks; accepted your answer! Extending to this, when i'm putting data in google chart. It doesn't accept the colors from data map. Can you please help me in stackoverflow.com/questions/38673317/… ?

Alex M Over a year ago

@Jits I'll definitely take a look soon.

Jitesh Sojitra Over a year ago

can you please help me in stackoverflow.com/questions/38816339/… as well ? Thanks in advance!

Collectives™ on Stack Overflow

Getting specific color for specific value using JSON data

Here are the sample json data:

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Here are the sample json data:

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related