I have a json file in which I am storing my data to generate some kind of a diagram. I want to be able to change the colour of the diagram conditionally according to an attribute in json. When it is false the colours should be red, when it's true it should be green. This is my json file:
"children": [
{
"children": [
{
"children": [],
"id": 50,
"name": "gfj",
"checked": true
}
],
"id": 51,
"name": "malek"
},
{
"children": [
{
"children": [
{
"children": [],
"id": 49,
"name": "nice",
"checked": true
}
],
"id": 48,
"name": "amira",
"checked": false
}
],
"id": 47,
"name": "mahdi"
}
],
I am able to get the attribute "checked" from the json file into my js file but I don't know how to change the colour because the colour is changed in the css file.
_checked = function(d){ return d.checked; },
This is the css file :
/*
Example fishbone styling... note that you can't actually change
line markers here, which is annoying
*/
html, body{ margin: 0; padding: 0; overflow: hidden;}
/* get it? gill? */
*{ font-family: "serif", "serif"; }
.label-0{ font-size: 2em }
.label-1{ font-size: 1.5em; fill: #06405a; }
.label-2{ font-size: 1em; fill: #06405a; }
.label-3{ font-size: .9em; fill: #888; }
.label-4{ font-size: .8em; fill: #aaa; }
.link-0{ stroke: #188fc6; stroke-width: 3px}
.link-1{ stroke: #188fc6; stroke-width: 2px}
.link-2, .link-3, .link-4{ stroke: #188fc6; stroke-width: 2px; }
The links are the arrows in the diagram and every arrow has its own colour and size. My question is: how do I use the attribute "checked" that I am getting in the js file and change the colour dynamically in the css file. Thank you so much.
you can dynamically set the class value to html element based on what you get returned from json file.
for example:
Javascript File
//grab your html element
const htmlElement = document.getElementById('id_here');
if (_checked === true) {
htmlElement.removeClass('true_case')
htmlElement.addClass('false_case')
} else {
htmlElement.removeClass('true_case')
htmlElement.addClass('false_case')
}
And accordinlgy set the css styles for these classes.
.true_case {
color: green;
}
.false_case {
color: red;
}
this solution might show some error [this error can be solved easily] but the approach is perfectly correct and can help you.
I guess you can't change dinamically your css file. However, you can get the behavior you want by doing something similar to the scheme I propose below.
The point is to change your style dinamically, depending on the "checked" attribute of each of the items in your json. To do this, you can use, for instance, the Angular directive ngClass
CSS
istrueclass {
color:green;
}
isfalseclass {
color:red;
}
...
HTML
<div *ngFor="child1 of children">
<div *ngFor="child2 of child1">
<div *ngFor="lastChild of child2">
<span [ngClass]="{
'istrueclass': lastChild.checked,
'isfalseclass': lastChild.checked,
}">
{{ lastChild.name }}
</span>
</div>
</div>