JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
    <div class="profile">
        <table id="userdata" border="2">
            <thead>
                <th>FirstName</th>
                <th>LastName</th>
                <th>EmailAddress</th>
                <th>City</th>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</div>

JavaScript

var data = {
    "person": [{
        "firstName": "Clark",
        "lastName": "Kent",
        "Email Address": "Reporter",
        "City": 20
    }, {
        "firstName": "Bruce",
        "lastName": "Wayne",
        "Email Address": "Playboy",
        "City": 30
    }, {
        "firstName": "Peter",
        "lastName": "Parker",
        "Email Address": "Photographer",
        "City": 40
         }, {
        "firstName": "Bruce",
        "lastName": "Wayne",
        "Email Address": "Playboy",
        "City": 30
    }]
}

 //$.getJSON('new4.json', function(data) {
    $.each(data.person, function(i, person) {
        var tblRow = "<tr><td>" + person.firstName + "</td><td>" + person.lastName + "</td><td>" + person['Email Address'] + "</td><td>" + person.City + "</td></tr>"
        $(tblRow).appendTo("#userdata tbody");
    });
//});