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

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>

Solution

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>