CODEWITHSUNDEEP
javascriptjavajsonleaflet
0x45
0x45

Reputation: 819

Conditionally add custom coloring to JSON Object

I'm setting custom properties for each element in java to a JSONArray which is then added to the JSONObject.

But now, on some condition I have to add custom "properties" to display a marker in a different color.

What is the best approach to conditionally color a leaflet marker.

Notice

This is basically a design question. Should I filter/modify/indicate it already in the backend, where I build my JSONObject or should I iterate over the built Object in JavaScript and find the oldest Date there and give it custom coloring?

Example

properties.put("popupContent", //
            bold("gps_popup_fztz_label").append(fZ).append(" / ").append(tZ).append(BR)//
                    .append(bold("gps_popup_code_label")).append(code).append(BR)//
                    .append(bold("gps_popup_text_label")).append(text).append(BR)//
                    .append(bold("gps_popup_status_label")).append(status).append(BR)//
                    .append(bold("gps_popup_zeit_label").append(ereignisZeit).toString()));

If ereignisZeit is highest, then marker is red, if lowest, green else blue.

Extra

I thought about sorting the List, and the first item is red and last one green, rest blue. But maybe there is a better, without need to modify existing JSON to give it custom coloring.

Upvotes: 0

Views: 186

Answers (1)

CodeSmith
CodeSmith

Reputation: 3197

Can you give me a good reason to do it in front, after you already made your JSON in the backend? Just make it like you need it in the 1st place, where you are making it instead reworking it later.

Unless you are talking about colors in a sense of designing the UI? Then it should be done on frontend if not for anything else then to keep the separation of concerns and keep the styling where it should be.

You might wanna change styling later, you don't wanna rebuild your JSON data because of that.

From the question, it's hard to tell what exactly do the colors symbolize. If it's data - backend, if it's UI design - frontend.

Upvotes: 1

Related Questions