CODEWITHSUNDEEP
javascriptarrays
Jitesh Sojitra
Jitesh Sojitra

Reputation: 4043

Getting specific color for specific value using JSON data

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.

Upvotes: 1

Views: 772

Answers (1)

Alex M
Alex M

Reputation: 2836

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.

Upvotes: 1

Related Questions