JSON to Html Table with Radio Buttons

Question

I have a JSON data in which Gender : 1 means Male and Gender : 2 means Female. I want to convert them into a radio button inside a html table within rowspan of 3 rows.

Let's say, the JS Array Of Object which is :

var data = 
[{
  "Gender": 1,
  "Height": [0,0,0],
  "Book": 3
},
{
  "Gender": 2,
  "Height": [0,0,0],
  "Book": 4
}];

How do I convert this JSON data to a html table like this with checked radio buttons?

Answer 1

Json2Html

You could use nested transform combined with multiple templates like this:

I will add a detailed explanation tomorrow ;-)

var data = [{
    "Gender": 1,
    "Height": [5, 6, 7],
    "Book": 3
  },
  {
    "Gender": 2,
    "Height": [8, 9, 10],
    "Book": 4
  }
];

let template = {
  "table": {
    "<>": "table",
    "border": "1",
    "html": [{
        "<>": "thead",
        "html": [{
          "<>": "tr",
          "html": [{
              "<>": "th",
              "html": "Gender"
            },
            {
              "<>": "th",
              "html": "Height"
            },
            {
              "<>": "th",
              "html": "Book"
            }
          ]
        }]
      },
      {
        "<>": "tbody",
        "html": function() {
          return json2html.transform(data, template.row);
        }
      }
    ]
  },
  "row": {
    "<>": "tr",
    "html": [{
      "<>": "td",
      "html": function() {
        return json2html.transform(this, template.gender);
      }
    }, {
      "<>": "td",
      "html": function() {
        return json2html.transform(this, template.height);
      }
    }, {
      "<>": "td",
      "html": function() {
        return json2html.transform(this, template.book);
      }
    }]
  },
  "gender": {
    "<>": "div",
    "html": function() {
      var t = this.Gender == 1 ? template.male : template.female;
      return json2html.transform({}, t);
    }
  },
  "male": {
    "<>": "form",
    "html": [{
        "<>": "input",
        "type": "radio",
        "name": "gender",
        "value": "male",
        "checked": "",
        "html": ""
      },
      {
        "<>": "label",
        "html": "male"
      },
      {
        "<>": "br",
        "html": ""
      },
      {
        "<>": "input",
        "type": "radio",
        "name": "gender",
        "value": "female",
        "html": ""
      },
      {
        "<>": "label",
        "html": "female"
      }
    ]
  },
  "female": {
    "<>": "form",
    "html": [{
        "<>": "input",
        "type": "radio",
        "name": "gender",
        "value": "male",
        "html": ""
      },
      {
        "<>": "label",
        "html": "male"
      },
      {
        "<>": "br",
        "html": ""
      },
      {
        "<>": "input",
        "type": "radio",
        "name": "gender",
        "checked": "",
        "value": "female",
        "html": ""
      },
      {
        "<>": "label",
        "html": "female"
      }
    ]
  },
  "height": {
    "<>": "ul",
    "class": "height",
    "html": function() {
      return json2html.transform(this.Height, template.heightItem);
    }
  },
  "heightItem": {
    "<>": "li",
    "html": function(val, idx) {
      return val;
    }
  },
  "book": {
    "<>": "span",
    "html": "${Book}"
  }
};

/* Transform using no data. So we get 1 single table.
 * Data is first introduced inside template's tbody.
 */
document.write(json2html.transform({}, template.table));

ul.height {
  list-style-type: none;
  padding: 0;
  border: 1px solid #ddd;
}

ul.height li {
  padding: 8px 16px;
  border-bottom: 1px solid #ddd;
}

ul.height li:last-child {
  border-bottom: none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/json2html/1.3.0/json2html.min.js"></script>

Answer 2

Hopes this will help you

var tbody = document.querySelector('#table tbody');
var data = 
[{
  "Gender": 1,
  "Height": [0,0,0],
  "Book": 3
},
{
  "Gender": 2,
  "Height": [0,0,0],
  "Book": 4
}];


for (var i = 0; i < data.length; i++) {
	for (var j = 0; j < 3; j++) {
		var row = document.createElement('tr');
		if (j === 0) {
			if (data[i].hasOwnProperty('Gender')) {
				row.appendChild(createGenderRadioCell(data[i]['Gender']))
			}
		}
		if (data[i].hasOwnProperty('Height')) {
			row.appendChild(createHeightCells(data[i]['Height'][j]))
		}
		if (j === 0) {
			if (data[i].hasOwnProperty('Book')) {
				row.appendChild(createBookCell(data[i]['Book']))
			}
		}
		tbody.appendChild(row);
	}
}


function createGenderRadioCell(gender) {
	var cell = document.createElement('td');
	cell.setAttribute('rowspan', 3);

	var male = document.createElement('input'),
		female = document.createElement('input');
	var malelabel = document.createElement('label'),
		femalelabel = document.createElement('label');

	male.name = 'gender' + i;
	male.type = 'radio';
	male.value = 1;
	if (gender ===1) {
		male.setAttribute('checked', '');
	}
	
	malelabel.appendChild(male);
	malelabel.innerHTML = malelabel.innerHTML + 'Male';
	female.name = 'gender' + i;
	female.type = 'radio';
	female.value = 2;
	if (gender=== 2) {
		female.setAttribute('checked', '')
	}
	femalelabel.appendChild(female);
  femalelabel.innerHTML = femalelabel.innerHTML + 'Female';
	cell.appendChild(malelabel);
	cell.appendChild(femalelabel);
	return cell;
}
function createHeightCells(val) {
	var cell = document.createElement('td');
	cell.innerHTML = val;
	return cell;
}

function createBookCell(val) {
	var cell = document.createElement('td');
	cell.innerHTML = val;
	cell.setAttribute('rowspan', 3);
	return cell;
}

#table {
  border: 1px solid black;
  border-collapse: separate;
  border-spacing: 2px;
}

#table td, #table th {
  border: 1px solid black;
}

<table id="table">
<thead>
	<tr>
		<th>
			Gender
		</th>
		<th>
			Height
		</th>
		<th>
			Book
		</th>
	</tr>
</thead>
<tbody>
	
</tbody>
</table>