0

I am learning LWC and trying to display a simple JSON. I am able to console.log the data but the table is blank and here is the code.

HTML

<template>
<template if:true={data}>
    <lightning-datatable data={data} columns={columns} key-field="identity.caseId">
    </lightning-datatable>
</template>

js

    import { LightningElement, api } from "lwc";

const columns = [
  { label: "Case ID", fieldName: "identity.caseId" },
  { label: "Case Type", fieldName: "identity.caseType" },
  { label: "Create Date", fieldName: "policy.createDate", type: "date" },
  { label: "Modify Date", fieldName: "policy.modifyDate", type: "date" },
  { label: "Status Code", fieldName: "policy.statusCode" },
  { label: "Customer ID", fieldName: "customer.customerId" },
  { label: "Name", fieldName: "customer.name" },
  { label: "Registration Number", fieldName: "vehicle.registrationNumber" },
  { label: "Vehicle ID", fieldName: "vehicle.vehicleId" }
];

export default class accContacts extends LightningElement {
  @api jsonData =
    '{"content":[{"identity":{"caseId":"7546040","caseType":"SMR"},"policy":{"createDate":"1669620011000","modifyDate":"1670398216000","statusCode":"NI"},"customer":{"customerId":"865208","name":"KE PROTEZIONI SOLARI S.R.L."},"vehicle":{"registrationNumber":"FX446DX","vehicleId":"AAFN3045"}},{"identity":{"caseId":"7546042","caseType":"SMR"},"policy":{"createDate":"1669620011000","modifyDate":"1670398216000","statusCode":"NI"},"customer":{"customerId":"865209","name":"KE PROTEZIONI SOLARI S.R.L."},"vehicle":{"registrationNumber":"FX446DY","vehicleId":"AAFN3046"}}],"first":true,"numberOfElements":2}';
  data;

  connectedCallback() {
    this.data = JSON.parse(this.jsonData).content;
  }

  get columns() {
    return columns;
  }
}

Data logged

Blank Table

2 Answers 2

0

Data table properties do not support any dot reference. All the attributes must be directly on the rows. You can, however, alias each property so it conforms to this requirement. For example:

data = data.map(row => {
    row.caseId = row.identity.caseId,
    // other attributes to alias
});
3
  • 1
    Since the JSON is received as an API property it will be immutable. It will be necessary to create new row objects to hold these "aliases".
    – Phil W
    Apr 2, 2023 at 7:22
  • Only jsonData is annotated. Not data.
    – Adrian Larson
    Apr 2, 2023 at 19:29
  • Fair comment; I missed the JSON bit when I looked earlier.
    – Phil W
    Apr 2, 2023 at 19:38
0

yes Phil I have updated the block and the issue is resolved.

 connectedCallback() {
    this.data = JSON.parse(this.jsonData).content;
    this.data = this.data.map((row) => {
      return {
        ...row,
        caseId: row.identity.caseId,
        caseType: row.identity.caseType,
        createDate: row.policy.createDate,
        modifyDate: row.policy.modifyDate,
        statusCode: row.policy.statusCode,
        customerId: row.customer.customerId,
        name: row.customer.name,
        registrationNumber: row.vehicle.registrationNumber,
        vehicleId: row.vehicle.vehicleId
      };
    });
  }
1
  • You can consolidate to one line. this.data = JSON.parse(this.jsonData).content.map(...);.
    – Adrian Larson
    Apr 2, 2023 at 22:01

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .