Is it not possible to get a parent field in a datatable column specification, for a Lightning Web Component?












5















Working with a prototype of a lightning web component, I get that the datatable, just like its Aura brother, needs the columns to be manually specified.



That being said, I have the following specification for a datatable that receives pricebook entries:



const columns = [
{ label: 'Name', fieldName: 'Product2.Name' }
]


The names do not display on the component, but if I use a forEach to list the data retrieved by the component, I get the products names, like in:



connectedCallback() {
getProducts({ pricebookId: this.pricebookId, countLimit: 4 })
.then(result => {
this.products = result
this.products.forEach(p => {
console.log(p.Product2) // Proxy {} object is displayed
console.log(p.Product2.Name) // The name is displayed
});
this.tableIsLoading = false
})
.catch(error => {
console.error(error)
})
}




If the datatable component does not support this, then the correct way of dealing with this is to work with the retrieved data, and build a new list with direct access to the data (no parent-child objects), or to edit the current data and include fields that I can access?



For example, should I iterate the result data and add a productName attribute to the elements, and then set 'productName' as the attribute on the column variable?



Edit: just noticed that you can't iterate the data list and create a new productName property. You end up with a TypeError: 'set' on proxy: trap returned falsish for property 'productName'.










share|improve this question





























    5















    Working with a prototype of a lightning web component, I get that the datatable, just like its Aura brother, needs the columns to be manually specified.



    That being said, I have the following specification for a datatable that receives pricebook entries:



    const columns = [
    { label: 'Name', fieldName: 'Product2.Name' }
    ]


    The names do not display on the component, but if I use a forEach to list the data retrieved by the component, I get the products names, like in:



    connectedCallback() {
    getProducts({ pricebookId: this.pricebookId, countLimit: 4 })
    .then(result => {
    this.products = result
    this.products.forEach(p => {
    console.log(p.Product2) // Proxy {} object is displayed
    console.log(p.Product2.Name) // The name is displayed
    });
    this.tableIsLoading = false
    })
    .catch(error => {
    console.error(error)
    })
    }




    If the datatable component does not support this, then the correct way of dealing with this is to work with the retrieved data, and build a new list with direct access to the data (no parent-child objects), or to edit the current data and include fields that I can access?



    For example, should I iterate the result data and add a productName attribute to the elements, and then set 'productName' as the attribute on the column variable?



    Edit: just noticed that you can't iterate the data list and create a new productName property. You end up with a TypeError: 'set' on proxy: trap returned falsish for property 'productName'.










    share|improve this question



























      5












      5








      5


      1






      Working with a prototype of a lightning web component, I get that the datatable, just like its Aura brother, needs the columns to be manually specified.



      That being said, I have the following specification for a datatable that receives pricebook entries:



      const columns = [
      { label: 'Name', fieldName: 'Product2.Name' }
      ]


      The names do not display on the component, but if I use a forEach to list the data retrieved by the component, I get the products names, like in:



      connectedCallback() {
      getProducts({ pricebookId: this.pricebookId, countLimit: 4 })
      .then(result => {
      this.products = result
      this.products.forEach(p => {
      console.log(p.Product2) // Proxy {} object is displayed
      console.log(p.Product2.Name) // The name is displayed
      });
      this.tableIsLoading = false
      })
      .catch(error => {
      console.error(error)
      })
      }




      If the datatable component does not support this, then the correct way of dealing with this is to work with the retrieved data, and build a new list with direct access to the data (no parent-child objects), or to edit the current data and include fields that I can access?



      For example, should I iterate the result data and add a productName attribute to the elements, and then set 'productName' as the attribute on the column variable?



      Edit: just noticed that you can't iterate the data list and create a new productName property. You end up with a TypeError: 'set' on proxy: trap returned falsish for property 'productName'.










      share|improve this question
















      Working with a prototype of a lightning web component, I get that the datatable, just like its Aura brother, needs the columns to be manually specified.



      That being said, I have the following specification for a datatable that receives pricebook entries:



      const columns = [
      { label: 'Name', fieldName: 'Product2.Name' }
      ]


      The names do not display on the component, but if I use a forEach to list the data retrieved by the component, I get the products names, like in:



      connectedCallback() {
      getProducts({ pricebookId: this.pricebookId, countLimit: 4 })
      .then(result => {
      this.products = result
      this.products.forEach(p => {
      console.log(p.Product2) // Proxy {} object is displayed
      console.log(p.Product2.Name) // The name is displayed
      });
      this.tableIsLoading = false
      })
      .catch(error => {
      console.error(error)
      })
      }




      If the datatable component does not support this, then the correct way of dealing with this is to work with the retrieved data, and build a new list with direct access to the data (no parent-child objects), or to edit the current data and include fields that I can access?



      For example, should I iterate the result data and add a productName attribute to the elements, and then set 'productName' as the attribute on the column variable?



      Edit: just noticed that you can't iterate the data list and create a new productName property. You end up with a TypeError: 'set' on proxy: trap returned falsish for property 'productName'.







      javascript lightning-web-components






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited 8 hours ago







      Renato Oliveira

















      asked 8 hours ago









      Renato OliveiraRenato Oliveira

      5,02211955




      5,02211955






















          1 Answer
          1






          active

          oldest

          votes


















          4














          The lightning:datatable assumes that the field name is not an object, but you can have a period in a field name.



          Consider this data:



          [{ 'Product.Name': 'Hello' }, 'Product': { 'Name': 'World' }}]


          If you had data like this, the output in lightning:datatable would be "Hello", not "World".



          Here's a copy-paste example for you:



          <aura:application extends="force:slds">
          <!-- attributes -->
          <aura:attribute name="data" type="List" default="[{'Product.Name':'Hello', 'Product':{'Name':'World'},'id':'5'}]"/>
          <aura:attribute name="columns" type="List" default="[{ 'label':'Product Name','fieldName':'Product.Name'}]" />

          <!-- the container element determine the height of the datatable -->
          <div style="height: 300px">
          <lightning:datatable
          keyField="id"
          data="{! v.data }"
          columns="{! v.columns }"
          hideCheckboxColumn="true"/>
          </div>

          </aura:application>


          This is true for both the Aura and Web component versions.



          So, to answer your question, yes, you will need to do some post-processing on your data. It can be as simple as:



          this.products = result.map(
          record => Object.assign(
          { "Product2.Name": record.Product2.Name },
          record
          )
          );





          share|improve this answer


























          • That doesn't seem to work. I get a TypeError: 'set' on proxy: trap returned falsish for property 'Product2.Name' inside the forEach.

            – Renato Oliveira
            8 hours ago











          • @RenatoOliveira My aura demo works correctly; let me set up a lwc real quick, I'll be back.

            – sfdcfox
            8 hours ago






          • 1





            @RenatoOliveira Network issues, but I came up with a working demo for LWC-style JS as well. Let me know if that helps.

            – sfdcfox
            7 hours ago






          • 2





            That worked. That's really nice, using map and assign to avoid the proxy issues.

            – Renato Oliveira
            7 hours ago











          Your Answer








          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "459"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          autoActivateHeartbeat: false,
          convertImagesToLinks: false,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: null,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });














          draft saved

          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fsalesforce.stackexchange.com%2fquestions%2f255418%2fis-it-not-possible-to-get-a-parent-field-in-a-datatable-column-specification-fo%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown

























          1 Answer
          1






          active

          oldest

          votes








          1 Answer
          1






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes









          4














          The lightning:datatable assumes that the field name is not an object, but you can have a period in a field name.



          Consider this data:



          [{ 'Product.Name': 'Hello' }, 'Product': { 'Name': 'World' }}]


          If you had data like this, the output in lightning:datatable would be "Hello", not "World".



          Here's a copy-paste example for you:



          <aura:application extends="force:slds">
          <!-- attributes -->
          <aura:attribute name="data" type="List" default="[{'Product.Name':'Hello', 'Product':{'Name':'World'},'id':'5'}]"/>
          <aura:attribute name="columns" type="List" default="[{ 'label':'Product Name','fieldName':'Product.Name'}]" />

          <!-- the container element determine the height of the datatable -->
          <div style="height: 300px">
          <lightning:datatable
          keyField="id"
          data="{! v.data }"
          columns="{! v.columns }"
          hideCheckboxColumn="true"/>
          </div>

          </aura:application>


          This is true for both the Aura and Web component versions.



          So, to answer your question, yes, you will need to do some post-processing on your data. It can be as simple as:



          this.products = result.map(
          record => Object.assign(
          { "Product2.Name": record.Product2.Name },
          record
          )
          );





          share|improve this answer


























          • That doesn't seem to work. I get a TypeError: 'set' on proxy: trap returned falsish for property 'Product2.Name' inside the forEach.

            – Renato Oliveira
            8 hours ago











          • @RenatoOliveira My aura demo works correctly; let me set up a lwc real quick, I'll be back.

            – sfdcfox
            8 hours ago






          • 1





            @RenatoOliveira Network issues, but I came up with a working demo for LWC-style JS as well. Let me know if that helps.

            – sfdcfox
            7 hours ago






          • 2





            That worked. That's really nice, using map and assign to avoid the proxy issues.

            – Renato Oliveira
            7 hours ago
















          4














          The lightning:datatable assumes that the field name is not an object, but you can have a period in a field name.



          Consider this data:



          [{ 'Product.Name': 'Hello' }, 'Product': { 'Name': 'World' }}]


          If you had data like this, the output in lightning:datatable would be "Hello", not "World".



          Here's a copy-paste example for you:



          <aura:application extends="force:slds">
          <!-- attributes -->
          <aura:attribute name="data" type="List" default="[{'Product.Name':'Hello', 'Product':{'Name':'World'},'id':'5'}]"/>
          <aura:attribute name="columns" type="List" default="[{ 'label':'Product Name','fieldName':'Product.Name'}]" />

          <!-- the container element determine the height of the datatable -->
          <div style="height: 300px">
          <lightning:datatable
          keyField="id"
          data="{! v.data }"
          columns="{! v.columns }"
          hideCheckboxColumn="true"/>
          </div>

          </aura:application>


          This is true for both the Aura and Web component versions.



          So, to answer your question, yes, you will need to do some post-processing on your data. It can be as simple as:



          this.products = result.map(
          record => Object.assign(
          { "Product2.Name": record.Product2.Name },
          record
          )
          );





          share|improve this answer


























          • That doesn't seem to work. I get a TypeError: 'set' on proxy: trap returned falsish for property 'Product2.Name' inside the forEach.

            – Renato Oliveira
            8 hours ago











          • @RenatoOliveira My aura demo works correctly; let me set up a lwc real quick, I'll be back.

            – sfdcfox
            8 hours ago






          • 1





            @RenatoOliveira Network issues, but I came up with a working demo for LWC-style JS as well. Let me know if that helps.

            – sfdcfox
            7 hours ago






          • 2





            That worked. That's really nice, using map and assign to avoid the proxy issues.

            – Renato Oliveira
            7 hours ago














          4












          4








          4







          The lightning:datatable assumes that the field name is not an object, but you can have a period in a field name.



          Consider this data:



          [{ 'Product.Name': 'Hello' }, 'Product': { 'Name': 'World' }}]


          If you had data like this, the output in lightning:datatable would be "Hello", not "World".



          Here's a copy-paste example for you:



          <aura:application extends="force:slds">
          <!-- attributes -->
          <aura:attribute name="data" type="List" default="[{'Product.Name':'Hello', 'Product':{'Name':'World'},'id':'5'}]"/>
          <aura:attribute name="columns" type="List" default="[{ 'label':'Product Name','fieldName':'Product.Name'}]" />

          <!-- the container element determine the height of the datatable -->
          <div style="height: 300px">
          <lightning:datatable
          keyField="id"
          data="{! v.data }"
          columns="{! v.columns }"
          hideCheckboxColumn="true"/>
          </div>

          </aura:application>


          This is true for both the Aura and Web component versions.



          So, to answer your question, yes, you will need to do some post-processing on your data. It can be as simple as:



          this.products = result.map(
          record => Object.assign(
          { "Product2.Name": record.Product2.Name },
          record
          )
          );





          share|improve this answer















          The lightning:datatable assumes that the field name is not an object, but you can have a period in a field name.



          Consider this data:



          [{ 'Product.Name': 'Hello' }, 'Product': { 'Name': 'World' }}]


          If you had data like this, the output in lightning:datatable would be "Hello", not "World".



          Here's a copy-paste example for you:



          <aura:application extends="force:slds">
          <!-- attributes -->
          <aura:attribute name="data" type="List" default="[{'Product.Name':'Hello', 'Product':{'Name':'World'},'id':'5'}]"/>
          <aura:attribute name="columns" type="List" default="[{ 'label':'Product Name','fieldName':'Product.Name'}]" />

          <!-- the container element determine the height of the datatable -->
          <div style="height: 300px">
          <lightning:datatable
          keyField="id"
          data="{! v.data }"
          columns="{! v.columns }"
          hideCheckboxColumn="true"/>
          </div>

          </aura:application>


          This is true for both the Aura and Web component versions.



          So, to answer your question, yes, you will need to do some post-processing on your data. It can be as simple as:



          this.products = result.map(
          record => Object.assign(
          { "Product2.Name": record.Product2.Name },
          record
          )
          );






          share|improve this answer














          share|improve this answer



          share|improve this answer








          edited 7 hours ago

























          answered 8 hours ago









          sfdcfoxsfdcfox

          261k12209453




          261k12209453













          • That doesn't seem to work. I get a TypeError: 'set' on proxy: trap returned falsish for property 'Product2.Name' inside the forEach.

            – Renato Oliveira
            8 hours ago











          • @RenatoOliveira My aura demo works correctly; let me set up a lwc real quick, I'll be back.

            – sfdcfox
            8 hours ago






          • 1





            @RenatoOliveira Network issues, but I came up with a working demo for LWC-style JS as well. Let me know if that helps.

            – sfdcfox
            7 hours ago






          • 2





            That worked. That's really nice, using map and assign to avoid the proxy issues.

            – Renato Oliveira
            7 hours ago



















          • That doesn't seem to work. I get a TypeError: 'set' on proxy: trap returned falsish for property 'Product2.Name' inside the forEach.

            – Renato Oliveira
            8 hours ago











          • @RenatoOliveira My aura demo works correctly; let me set up a lwc real quick, I'll be back.

            – sfdcfox
            8 hours ago






          • 1





            @RenatoOliveira Network issues, but I came up with a working demo for LWC-style JS as well. Let me know if that helps.

            – sfdcfox
            7 hours ago






          • 2





            That worked. That's really nice, using map and assign to avoid the proxy issues.

            – Renato Oliveira
            7 hours ago

















          That doesn't seem to work. I get a TypeError: 'set' on proxy: trap returned falsish for property 'Product2.Name' inside the forEach.

          – Renato Oliveira
          8 hours ago





          That doesn't seem to work. I get a TypeError: 'set' on proxy: trap returned falsish for property 'Product2.Name' inside the forEach.

          – Renato Oliveira
          8 hours ago













          @RenatoOliveira My aura demo works correctly; let me set up a lwc real quick, I'll be back.

          – sfdcfox
          8 hours ago





          @RenatoOliveira My aura demo works correctly; let me set up a lwc real quick, I'll be back.

          – sfdcfox
          8 hours ago




          1




          1





          @RenatoOliveira Network issues, but I came up with a working demo for LWC-style JS as well. Let me know if that helps.

          – sfdcfox
          7 hours ago





          @RenatoOliveira Network issues, but I came up with a working demo for LWC-style JS as well. Let me know if that helps.

          – sfdcfox
          7 hours ago




          2




          2





          That worked. That's really nice, using map and assign to avoid the proxy issues.

          – Renato Oliveira
          7 hours ago





          That worked. That's really nice, using map and assign to avoid the proxy issues.

          – Renato Oliveira
          7 hours ago


















          draft saved

          draft discarded




















































          Thanks for contributing an answer to Salesforce Stack Exchange!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fsalesforce.stackexchange.com%2fquestions%2f255418%2fis-it-not-possible-to-get-a-parent-field-in-a-datatable-column-specification-fo%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          Popular posts from this blog

          Усть-Каменогорск

          Халкинская богословская школа

          Высокополье (Харьковская область)