Attribute from nested object as column in DataTable

UI Components for Vue
Post Reply
Posts: 1
Joined: 17 Dec 2019, 00:02

17 Dec 2019, 00:12

Hey gus, i'd like to build a table where one of my columns is the username or Id of an assigned item.
Json looks like:

Code: Select all

        "id": 2,
        "itemType": "a",
        "name": "a",
        "description": "a",
        "lastEditDate": "16.12.2019 21:37:19",
        "user": {
            "id": 1,
            "userName": "admin",
            "password": "***",
            "passwordRetype": null,
            "role": "ADMIN",
            "deactivated": false
my DataTable looks like

Code: Select all

<DataTable :value="itemList" :selection.sync="selectedItem" selection-mode="single">
            <column field="id" header="ID"></column>
            <column field="name" header="Kennummer / Name"></column>
            <column field="itemType" header="Item Typ"></column>
            <column field="description" header="Description"></column>
            <column field="lastEditDate" header="Last Edit Date"></column>
            <column field="" header="Assigned User"></column>
giving me error:

Code: Select all

Vue warn]: Error in render: "TypeError: Cannot read property 'id' of null"

found in

---> <DataTable> at node_modules/primevue/components/datatable/DataTable.vue
         <App> at src/App.vue
and not displaying the list in my Datatable.

Is there a way to access the nested object "user" with its attributed as column? If not - is there a different way to do this?

Posts: 18183
Joined: 05 Jan 2009, 00:21
Location: Cybertron

30 Dec 2019, 11:20

Try templating, maybe user is null.

Code: Select all

    <Column field="user" header="User Id">
        <template #body="slotProps">
            {{ ? : 'No User'}}
This works for me though;

Code: Select all

<DataTable :value="cars">
                <Column field="vin" header="Vin"></Column>
                <Column field="year" header="Year"></Column>
                <Column field="brand" header="Brand"></Column>
                <Column field="color" header="Color"></Column>
                <Column field="" header="User Id"></Column>

    "cars": [
        {"brand": "Volkswagen", "year": 2012, "color": "Orange", "vin": "dsad231ff", "user": {"id": 1}},
        {"brand": "Audi", "year": 2011, "color": "Black", "vin": "gwregre345", "user": {"id": 2}},
        {"brand": "Renault", "year": 2005, "color": "Gray", "vin": "h354htr", "user": {"id": 3}},
        {"brand": "BMW", "year": 2003, "color": "Blue", "vin": "j6w54qgh", "user": {"id": 4}},
        {"brand": "Mercedes", "year": 1995, "color": "Orange", "vin": "hrtwy34", "user": {"id": 5}},
        {"brand": "Volvo", "year": 2005, "color": "Black", "vin": "jejtyj", "user": {"id": 6}},
        {"brand": "Honda", "year": 2012, "color": "Yellow", "vin": "g43gr", "user": {"id": 7}},
        {"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34", "user": {"id": 8}},
        {"brand": "Ford", "year": 2000, "color": "Black", "vin": "h54hw5", "user": {"id": 9}},
        {"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s", "user": {"id": 10}}

Post Reply

Return to “PrimeVue”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest