JSON2html table rendered now trying to change text value color of a boolean cell-Twitter bootstrap

ErikaHarvey
October 16, 2017
173 views
1 vote
2 Answers

I am using JSON2html to parse dummy data into a table. The last td of each row is a boolean value. I realize that this probably a very easy thing to accomplish, but for some reason, nothing I’ve tried has worked. I am embedding my code.I am looking to make the text turn green if false and red if true.

var data = [{
    "id": 1,
    "first_name": "Lemar",
    "last_name": "Rutherfoord",
    "gender": "Male",
    "hr": 142,
    "resp": 86,
    "temp": 99.3,
    "wandering history": "true"
  }, {
    "id": 2,
    "first_name": "Jo-ann",
    "last_name": "Brack",
    "gender": "Female",
    "hr": 115,
    "resp": 22,
    "temp": 104.1,
    "wandering history": "true"
  }, {
    "id": 3,
    "first_name": "Ogdon",
    "last_name": "Reiach",
    "gender": "Male",
    "hr": 81,
    "resp": 16,
    "temp": 98.5,
    "wandering history": "false"
  },
  {
    "id": 4,
    "first_name": "Brigida",
    "last_name": "Puttan",
    "gender": "Female",
    "hr": 98,
    "resp": 60,
    "temp": 95.6,
    "wandering history": "true"
  },
  {
    "id": 5,
    "first_name": "Doretta",
    "last_name": "Limbourne",
    "gender": "Female",
    "hr": 87,
    "resp": 15,
    "temp": 96.5,
    "wandering history": "false"
  },
  {
    "id": 6,
    "first_name": "Coraline",
    "last_name": "Millen",
    "gender": "Female",
    "hr": 19,
    "resp": 19,
    "temp": 95.2,
    "wandering history": "false"
  },
  {
    "id": 7,
    "first_name": "Brian",
    "last_name": "Klampt",
    "gender": "Male",
    "hr": 144,
    "resp": 77,
    "temp": 102.2,
    "wandering history": true
  },
  {
    "id": 8,
    "first_name": "Pippy",
    "last_name": "Grieswood",
    "gender": "Female",
    "hr": 67,
    "resp": 50,
    "temp": 94.3,
    "wandering history": "false"
  }
];
var transform = {
  tag: 'tr',
  children: [{
    "tag": "td",
    "html": "${id}"
  }, {
    "tag": "td",
    "html": "${first_name} ${last_name}"
  }, {
    "tag": "td",
    "html": "${gender}"
  }, {
    "tag": "td",
    "html": "${hr}"
  }, {
    "tag": "td",
    "html": "${temp}"
  }, {
    "tag": "td",
    "html": "${resp}"
  }, {
    "tag": "td class = 'atRisk'",
    "html": "${wandering history}"
  }]
};

// 	if($('.atRisk') === "true"){

// 		$('.attRisk').addCss('color','red');

// 	} else {
// 		$('.atRisk').css('color','green');
// 	}
// 		});
// if($('.atRisk').val()){
// 	$('.atRisk').css('color','red');
// }else {
// 	$('.atRisk').addClass('green');
// }

$('#placar > tbody ').json2html(data, transform);
// var wander = document.querySelectorAll('history');

// console.log(wander);
// $.each(wander != true){
// 	console.log('not true');
// }

//alert(wander);
$('.atRisk').each(function() {
  if ($(this).val() != true) {
    $(this).css('color', 'green');
  }
});

.atRisk {
  color: red;
}

<head>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>

  <div class="container">
    <p></p>
    <table id="placar" class=" table table-bordered table-hover">
      <thead class="thead-inverse">
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Gender</th>
          <th>Heart Rate</th>
          <th>Temperature</th>
          <th>Respirations</th>
          <th>Previous Wandering Events</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/json2html/1.0.0/json2html.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.json2html/1.0.0/jquery.json2html.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
</body>

Answers

Two issues:

1 – you were looking for val() which doesn’t exist in the tag; I changed it to look for .text() instead.

2 – I still had to compare string-to-string. That might just be my code, you can probably work something more clear.

See my evaluation code at the end of the script.

(Also, I wouldn’t be surprised if I got red/green reversed.

var data = [{
    "id": 1,
    "first_name": "Lemar",
    "last_name": "Rutherfoord",
    "gender": "Male",
    "hr": 142,
    "resp": 86,
    "temp": 99.3,
    "wandering history": "true"
  }, {
    "id": 2,
    "first_name": "Jo-ann",
    "last_name": "Brack",
    "gender": "Female",
    "hr": 115,
    "resp": 22,
    "temp": 104.1,
    "wandering history": "true"
  }, {
    "id": 3,
    "first_name": "Ogdon",
    "last_name": "Reiach",
    "gender": "Male",
    "hr": 81,
    "resp": 16,
    "temp": 98.5,
    "wandering history": "false"
  },
  {
    "id": 4,
    "first_name": "Brigida",
    "last_name": "Puttan",
    "gender": "Female",
    "hr": 98,
    "resp": 60,
    "temp": 95.6,
    "wandering history": "true"
  },
  {
    "id": 5,
    "first_name": "Doretta",
    "last_name": "Limbourne",
    "gender": "Female",
    "hr": 87,
    "resp": 15,
    "temp": 96.5,
    "wandering history": "false"
  },
  {
    "id": 6,
    "first_name": "Coraline",
    "last_name": "Millen",
    "gender": "Female",
    "hr": 19,
    "resp": 19,
    "temp": 95.2,
    "wandering history": "false"
  },
  {
    "id": 7,
    "first_name": "Brian",
    "last_name": "Klampt",
    "gender": "Male",
    "hr": 144,
    "resp": 77,
    "temp": 102.2,
    "wandering history": true
  },
  {
    "id": 8,
    "first_name": "Pippy",
    "last_name": "Grieswood",
    "gender": "Female",
    "hr": 67,
    "resp": 50,
    "temp": 94.3,
    "wandering history": "false"
  }
];
var transform = {
  tag: 'tr',
  children: [{
    "tag": "td",
    "html": "${id}"
  }, {
    "tag": "td",
    "html": "${first_name} ${last_name}"
  }, {
    "tag": "td",
    "html": "${gender}"
  }, {
    "tag": "td",
    "html": "${hr}"
  }, {
    "tag": "td",
    "html": "${temp}"
  }, {
    "tag": "td",
    "html": "${resp}"
  }, {
    "tag": "td class='atRisk'",
    "html": "${wandering history}"
  }]
};

// 	if($('.atRisk') === "true"){

// 		$('.attRisk').addCss('color','red');

// 	} else {
// 		$('.atRisk').css('color','green');
// 	}
// 		});
// if($('.atRisk').val()){
// 	$('.atRisk').css('color','red');
// }else {
// 	$('.atRisk').addClass('green');
// }

$('#placar > tbody ').json2html(data, transform);
// var wander = document.querySelectorAll('history');

// console.log(wander);
// $.each(wander != true){
// 	console.log('not true');
// }

//alert(wander);
$('.atRisk').each(function() {
  if ($(this).text().toLowerCase() != "true") {
    $(this).css('color', 'green');
  }
});

.atRisk {
  color: red;
}

<head>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>

  <div class="container">
    <p></p>
    <table id="placar" class=" table table-bordered table-hover">
      <thead class="thead-inverse">
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Gender</th>
          <th>Heart Rate</th>
          <th>Temperature</th>
          <th>Respirations</th>
          <th>Previous Wandering Events</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/json2html/1.0.0/json2html.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.json2html/1.0.0/jquery.json2html.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
</body>

- ChadBrown
- October 30, 2017 at 6:54 pm
- 0 votes
0
Just to add to this answer a bit: you can actually embed this logic within the transform. Also here are a few other points
- “children” has been deprecated for “html”
- “tag” has been deprecated for “<>”
- “class” can be added as a property to the transform (rather than doing “td class=’something'” You can also use an inline function to return the value of the class which can change the colour of the cell. My example will change the class name of the last cell based on the “wandering history”
PS also try not to use spaces in a JSON key name 🙂
var transform = { "<>": "tr", "html": [{ "<>": "td", "html": "${id}" }, { "<>": "td", "html": "${first_name} ${last_name}" }, { "<>": "td", "html": "${gender}" }, { "<>": "td", "html": "${hr}" }, { "<>": "td", "html": "${temp}" }, { "<>": "td", "html": "${resp}" }, { "<>": "td", "class":function(){ if(this["wandering history"] === "true") return("atRisk"); else return("notAtRisk"); }, "html": "${wandering history}" }] };
Login or Signup to reply.

Please signup or login to give your own answer.

Click here to cancel reply.