CODEWITHSUNDEEP
javascriptjqueryhtml
Jith
Jith

Reputation: 109

Getting a true or false (from JSON file) to show as a checkbox from a script

So I'm using this script to get values from a Google Sheet

$.getJSON("https://spreadsheets.google.com/feeds/list/1nPL4wFITrwgz2_alxLnO9VBhJQ7QHuif9nFXurgdSUk/1/public/values?alt=json", function(data) {

  var sheetData = data.feed.entry;

  var i;
  for (i = 0; i < sheetData.length; i++) {

    var timestamp = data.feed.entry[i]['gsx$timestamp']['$t'];
    var checkin = data.feed.entry[i]['gsx$checkin']['$t'];
    var teamname = data.feed.entry[i]['gsx$teamname']['$t'];
    var capdiscord = data.feed.entry[i]['gsx$captainsdiscord']['$t'];
    var adc = data.feed.entry[i]['gsx$adc']['$t'];
    var support = data.feed.entry[i]['gsx$support']['$t'];
    var mid = data.feed.entry[i]['gsx$mid']['$t'];
    var jungle = data.feed.entry[i]['gsx$jungle']['$t'];
    var solo = data.feed.entry[i]['gsx$solo']['$t'];
    var sub1 = data.feed.entry[i]['gsx$sub1']['$t'];
    var sub2 = data.feed.entry[i]['gsx$sub2']['$t'];
    var sub3 = data.feed.entry[i]['gsx$sub3']['$t'];
    var seeding = data.feed.entry[i]['gsx$seeding']['$t'];
    document.getElementById('demo').innerHTML += (
    '<tr>' + '<td>' + timestamp + 
    '</td>' + '<td>' + checkin +
    '</td>' + '<td>' + teamname +
    '</td>' + '<td>' + capdiscord +
    '</td>' + '<td>' + adc +
    '</td>' + '<td>' + support +
    '</td>' + '<td>' + mid +
    '</td>' + '<td>' + jungle +
    '</td>' + '<td>' + solo +
    '</td>' + '<td>' + sub1 +
    '</td>' + '<td>' + sub2 +
    '</td>' + '<td>' + sub3 +
    '</td>' + '<td>' + seeding +
    '</td>' + '</tr>');

  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="demo"></div>

checkin is a true or false value. I want it to be an actual checkbox with it being checked if true and not checked if false. How would I go about writing this?

Upvotes: 0

Views: 51

Answers (1)

Ram Segev
Ram Segev

Reputation: 2573

If true add checked to the input html

$.getJSON("https://spreadsheets.google.com/feeds/list/1nPL4wFITrwgz2_alxLnO9VBhJQ7QHuif9nFXurgdSUk/1/public/values?alt=json", function(data) {

  var sheetData = data.feed.entry;

  var i;
  for (i = 0; i < sheetData.length; i++) {

    var timestamp = data.feed.entry[i]['gsx$timestamp']['$t'];
    var checkin = data.feed.entry[i]['gsx$checkin']['$t'];
    var teamname = data.feed.entry[i]['gsx$teamname']['$t'];
    var capdiscord = data.feed.entry[i]['gsx$captainsdiscord']['$t'];
    var adc = data.feed.entry[i]['gsx$adc']['$t'];
    var support = data.feed.entry[i]['gsx$support']['$t'];
    var mid = data.feed.entry[i]['gsx$mid']['$t'];
    var jungle = data.feed.entry[i]['gsx$jungle']['$t'];
    var solo = data.feed.entry[i]['gsx$solo']['$t'];
    var sub1 = data.feed.entry[i]['gsx$sub1']['$t'];
    var sub2 = data.feed.entry[i]['gsx$sub2']['$t'];
    var sub3 = data.feed.entry[i]['gsx$sub3']['$t'];
    var seeding = data.feed.entry[i]['gsx$seeding']['$t'];
    if(checkin == 'TRUE'){
      checkin = 'checked';
    }else{
      checkin = '';
    }
    document.getElementById('demo').innerHTML += (
    '<table><tr>' + '<td>' + timestamp + 
    '</td>' + '<td><input type="checkbox" ' + checkin +' />' + 
    '</td>' + '<td>' + teamname +
    '</td>' + '<td>' + capdiscord +
    '</td>' + '<td>' + adc +
    '</td>' + '<td>' + support +
    '</td>' + '<td>' + mid +
    '</td>' + '<td>' + jungle +
    '</td>' + '<td>' + solo +
    '</td>' + '<td>' + sub1 +
    '</td>' + '<td>' + sub2 +
    '</td>' + '<td>' + sub3 +
    '</td>' + '<td>' + seeding +
    '</td>' + '</tr></table>');

  }
});
table, td, tr {
  border: 1px solid black;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th {
  height: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="demo"></div>

Upvotes: 1

Related Questions