bugTest.html

<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.js"></script>
<script type="text/javascript">
    var listItemCollection;
    var listFields;
    $(document).ready(function () {
        var clientContext = new SP.ClientContext(_spPageContextInfo.webAbsoluteUrl);
        var oList = clientContext.get_web().get_lists().getByTitle('TestThisBug');
        var query = SP.CamlQuery.createAllItemsQuery();

        listItemCollection = oList.getItems(query);
        listFields = oList.get_fields();

        clientContext.load(listItemCollection, 'Include(Title, DisplayName, FooDisplayName, Created, Modified, GUID)');
        clientContext.load(listFields);

        clientContext.executeQueryAsync(onQuerySucceeded, onQueryFailed);

        function onQuerySucceeded() {
            var fieldEnumerator = listFields.getEnumerator();
            while (fieldEnumerator.moveNext()) {
                var field = fieldEnumerator.get_current();
                $('#jsomFields').append('<li>' + field.get_title() + '(' + field.get_internalName() + ') </li>');
            }


            var listItemEnumerator = listItemCollection.getEnumerator();
            var listItem;
            var gotFieldNames = false;
            while (listItemEnumerator.moveNext()) {
                listItem = listItemEnumerator.get_current();

                var myFieldValues = listItem.get_fieldValues();

                if (!gotFieldNames) {
                    var fields = Object.keys(myFieldValues);
                    for (var i = 0; i < fields.length; i++) {
                        $('#fieldNames').append('<td>' + fields[i] + '</td>')
                    }
                    gotFieldNames = true;
                }

                var tableRow = $('#fieldValues').append('<tr></tr>');

                for (var j = 0; j < fields.length; j++) {
                    tableRow.append('<td>' + myFieldValues[fields[j]] + '</td>');
                }


            }

        }

        function onQueryFailed(sender, args) {
            $('#errorArea').text('Error: ' + args.get_message());
        }

        var newListItem;
        $('#addItemButton').click(function () {
            var createItemInfo = new SP.ListItemCreationInformation();
            newListItem = oList.addItem(createItemInfo);
            newListItem.set_item('Title', 'A JSOM Created Item');
            newListItem.set_item('FooDisplayName', 'A JSOM Created Foo Display Name');
            newListItem.set_item('DisplayName', 'A JSOM Created Display Name');
            newListItem.update();

            clientContext.executeQueryAsync(onAddItemSucceeded, onQueryFailed);

        });

        function onAddItemSucceeded() {
            $('#successArea').text('Successfully added item via JSOM');
        }

    });


</script>
<button type="button" id="addItemButton">Add an Item</button>
<h1>Field Values</h1>
<table border="1">
    <thead>
        <tr id="fieldNames">
        </tr>
    </thead>
    <tbody id="fieldValues">
    </tbody>
</table>
<h1>All Fields from JSOM</h1>
<ul id="jsomFields"></ul>
<div id="successArea"></div>
<div id="errorArea"></div>