JSFiddle - React, Tailwind, and code Playground

by Monsur Hoq

HTML

<div id="jqTableContainer"></div>

JavaScript

var contacts = [{
    name: "John Doe",
    number: "432-234-5432",
    address: "1234 Some Street Austin, Texas",
    notes: ""
}, {
    name: "Sam Clark",
    number: "321-876-1454",
    address: "4322 Some Other Street Austin, Texas",
    notes: "Old high school buddy."
}, {
    name: "Ryan Smith",
    number: "433-123-8900",
    address: "8093 Some Lane Austin, Texas",
    notes: ""
}, {
    name: "Sally Jane",
    number: "938-783-5099",
    address: "4893 Some Circle Austin, Texas",
    notes: ""
}, {
    name: "Nicole Smith",
    number: "432-132-4032",
    address: "2980 Some Place Austin, Texas",
    notes: "Friend from college."
}];

if (typeof contacts == 'object') {
    if (contacts.length) {
        var newTABLE = $('<table></table>'); //create new table
        var newTR;
        var newTD;
        for (indx = 0; indx < contacts.length; indx++) {
            newTR = $('<tr></tr>'); //create new row

            newTD = $('<td></td>'); //create new name cell
            if (typeof contacts[indx].name != 'undefined') { //name found
                newTD.text(contacts[indx].name);
            }
            newTR.append(newTD); //insert name cell into row

            newTD = $('<td></td>'); //create new number cell
            if (typeof contacts[indx].number != 'undefined') { //number found
                newTD.text(contacts[indx].number);
            }
            newTR.append(newTD); //insert number cell into row

            newTD = $('<td></td>'); //create new address cell
            if (typeof contacts[indx].address != 'undefined') { //address found
                newTD.text(contacts[indx].address);
            }
            newTR.append(newTD); //insert address cell into row

            newTD = $('<td></td>'); //create new notes cell
            if (typeof contacts[indx].notes != 'undefined') { //address found
                newTD.text(contacts[indx].notes);
            }
            newTR.append(newTD); //insert notes cell into row

      ...