SharePoint 2013 sp.js Getting the column names of custom list

Question

*Edit* I have figured out how come the data returned for the columns was showing the wrong labels. The issue occurs when the list columns are created using the quick edit mode, as it allows you to create columns directly from that view. My issue did not occur when I manually created the columns from the web interface.

The backstory is that I am creating an app that will display any given list as displayed by the default view on SharePoint, only that the app uses a plain table.

So far I have managed to make the app fetch the list I wish to display, then fetch the columns, rows and views. It parses the data and finds the default view, gets the camlQuery and uses that when fetching the list items. In the end I am left with a table with identical columns and rows as the default view of the list is shown in SharePoint.

The problem is that I cannot find out how to display the name of the column in the header/footer of my table. Actually, I cannot find the proper column names in any of the data returned from the server.

Answer 1

You can make a request to the REST API and request metadata regarding the fields in the list.

For example, sending a GET request to the URL https://sharepoint.domain.com/_api/lists/getbytitle('Test List')?$select=Fields&$expand=Fields will return an array with all the metadata for the fields. Here is an example of one of the objects in the array:

{
    "__metadata": {
        "id": "https://sharepoint.domain.com/_api/Web/Lists(guid'efd16a43-aaf4-44fd-a9a1-4634afe328ac')/Fields(guid'e8f4448b-9204-488b-9857-878dc793637a')",
        "uri": "https://sharepoint.domain.com/_api/Web/Lists(guid'efd16a43-aaf4-44fd-a9a1-4634afe328ac')/Fields(guid'e8f4448b-9204-488b-9857-878dc793637a')",
        "type": "SP.FieldChoice"
    },
    "DescriptionResource": {
        "__deferred": {
            "uri": "https://sharepoint.domain.com/_api/Web/Lists(guid'efd16a43-aaf4-44fd-a9a1-4634afe328ac')/Fields(guid'e8f4448b-9204-488b-9857-878dc793637a')/DescriptionResource"
        }
    },
    "TitleResource": {
        "__deferred": {
            "uri": "https://sharepoint.domain.com/_api/Web/Lists(guid'efd16a43-aaf4-44fd-a9a1-4634afe328ac')/Fields(guid'e8f4448b-9204-488b-9857-878dc793637a')/TitleResource"
        }
    },
    "CanBeDeleted": true,
    "DefaultValue": null,
    "Description": "",
    "Direction": "none",
    "EnforceUniqueValues": false,
    "EntityPropertyName": "Test_x0020_Item",
    "Filterable": true,
    "FromBaseType": false,
    "Group": "Custom Columns",
    "Hidden": false,
    "Id": "e8f4448b-9204-488b-9857-878dc793637a",
    "Indexed": false,
    "InternalName": "Test_x0020_Item",
    "JSLink": "clienttemplates.js",
    "ReadOnlyField": false,
    "Required": false,
    "SchemaXml": "<Field Type=\"Choice\" DisplayName=\"Test Item\" Required=\"FALSE\" EnforceUniqueValues=\"FALSE\" Indexed=\"FALSE\" Format=\"Dropdown\" FillInChoice=\"FALSE\" ID=\"{e8f4448b-9204-488b-9857-878dc793637a}\" SourceID=\"{efd16a43-aaf4-44fd-a9a1-4634afe328ac}\" StaticName=\"Test_x0020_Item\" Name=\"Test_x0020_Item\" ColName=\"nvarchar3\" RowOrdinal=\"0\" Version=\"1\"><CHOICES><CHOICE>Enter Choice #1</CHOICE><CHOICE>Enter Choice #2</CHOICE><CHOICE>Enter Choice #3</CHOICE></CHOICES></Field>",
    "Scope": "/Lists/Test List",
    "Sealed": false,
    "Sortable": true,
    "StaticName": "Test_x0020_Item",
    "Title": "Test Item",
    "FieldTypeKind": 6,
    "TypeAsString": "Choice",
    "TypeDisplayName": "Choice",
    "TypeShortDescription": "Choice (menu to choose from)",
    "ValidationFormula": null,
    "ValidationMessage": null,
    "FillInChoice": false,
    "Mappings": null,
    "Choices": {
        "results": [
            "Enter Choice #1",
            "Enter Choice #2",
            "Enter Choice #3"
        ]
    },
    "EditFormat": 0
}

If you used this query string, though, ?$select=Fields/Title,Fields/InternalName&$expand=Fields/Title,Fields/InternalName it would only return the the Title (label) and InternalName along with the associated __metadata object..

{
"__metadata":{
"id":"https://sharepoint.domain.com/_api/Web/Lists(guid'efd16a43-aaf4-44fd-a9a1-4634afe328ac')/Fields(guid'e8f4448b-9204-488b-9857-878dc793637a')",
"uri":"https://sharepoint.domain.com/_api/Web/Lists(guid'efd16a43-aaf4-44fd-a9a1-4634afe328ac')/Fields(guid'e8f4448b-9204-488b-9857-878dc793637a')",
"type":"SP.FieldChoice"
},
"InternalName":"Test_x0020_Item",
"Title":"Test Item"
}

Once you have that data you should be able to display the correct label in your UI.