0

I am new to LWC and i have a Opportunity record which has a field, Vendor Field, having value as:

"Details":
[
    {
        "Vendor_Name": "Vendor",
        "URL": "https://www.vendorUrl.com",
        "V_Name": "Alaska"
    }
]

I want to fetch the JSON data from this field and display it in a table format or in a custom UI(using lightning card) table format using LWC. I have added my component in the record page but my data table is not getting reflected and i don't get anything in the console as well. Belows are the js and html files of my LWC:

JS File:

import{LightningElement, wire, api, track} from 'lwc';
import {getRecord,getFieldValue} from 'lightning/uiRecordApi';
import VENDOR_FIELD from '@salesforce/schema/Opportunity.Vendor_Field__c';

const FIELDS = [VENDOR_FIELD];

const vendordataTable = [
    { label: 'Vendor Name', fieldName: 'vName'},
    { label: 'Url', fieldName: 'url'},
    { label: 'Name', fieldName: 'name' }
    ];

export default class vendorDetails extends LightningElement {
   
  @api recordId;
  @track fieldResp = {};
  @track columns = vendordataTable;
   
  tableData = [];
  
  @wire(getRecord,{recordId: '$recordId',fields: FIELDS})
  opportunity;

  wiredRecord({error,data}){
  if(error){
           console.log(error); 
           }
  else if(data){
     getFieldValue(this.opportunity.data, JSON.stringify(VENDOR_FIELD))
     .then(response =>{
     if(response && response.length > 0){
          this.fieldResp = JSON.stringify(response);
          console.log('jsonresp++-->>', this.fieldResp);
          let vendorTableObj = {};
          var vendorData = [];
          for(const vendorVal of response){
              vendorTableObj.vName = vendorVal.Details.Vendor_Name;
              vendorTableObj.url = vendorVal.Details.URL;
              vendorTableObj.name = vendorVal.Details.V_Name;
              vendorData.push(JSON.parse(JSON.stringify(vendorTableObj)));
              this.tableData = vendorData;
              }
          }
     })
  }
 }
}

HTML File:


<template>
  <div class="slds-card__body">
    <div class="slds-m-bottom_medium">
      <lightning-card title="Vendor Details" icon-name="standard:user">
        <div class="slds-form_horizontal" >
            <lightning-datatable  key-field="id"  
                                  data={tableData}  
                                  columns={vendordataTable} 
                                  min-column-width="80">
            </lightning-datatable>
        </div>
      </lightning-card>
    </div>
  </div>
</template>

I have updated my code and the field value. I am stuck here and not able to udnerstand what i am doing wrong.

6
  • let parsedVeValue = JSON.parse(JSON.stringify(veValue)); is incorrect. Use just JSON.parse(veValue).
    – sfdcfox
    Mar 22 at 13:58
  • Hi sfdcfox, i tried JSON.parse(veValue) but it is showing undefined in for jsondata and nothing is reflecting for the parseddata in console Mar 22 at 14:39
  • 3
    Don't know if its related, but your JSON you've supplied is incorrect, it would need to be "Details": [ {} ] Mar 22 at 17:20
  • Hey Phil, i rechecked and my field has the value as mentioned in my post. Is there a workaround for this issue, after i fetch it , so as to convert it into the right format. Mar 22 at 17:30
  • 2
    It is almost always best in the long run to fix the bad data at the source (whatever is populating this field) rather than trying to fix broken, unparseable data. (I didn't say anything about the short run, though!)
    – David Reed
    Mar 23 at 4:31

1 Answer 1

1

JSON data needs an additional {} around it (or drop the "Details" key).

{
  "Details": [
    {
      "Vendor_Name": "Vendor",
      "URL": "https://www.vendorUrl.com",
      "V_Name": "Alaska"
    }
  ]
}

or

[
  {
    "Vendor_Name": "Vendor",
    "URL": "https://www.vendorUrl.com",
    "V_Name": "Alaska"
  }
]

The @wire method you've got is puzzling me. Where is wiredRecord being called?

I think you're trying to run the wire like this.

@wire(getRecord, { recordId: '$recordId', fields: FIELDS })
wiredRecord({ error, data }) {
  if (error) {
    console.log(error)
  } else if (data) {
    const valueString = getFieldValue(data, VENDOR_FIELD)

    try {
      const valueJson = JSON.parse(valueString)

      // assumes the JSON is just the array
      // if you want to keep "Details" at the top, it will be `valueJson.Details valueJson.Details.length > 0`
      if (valueJson && valueJson.length > 0) {
        valueJson.forEach((vendorVal) => {
          vendorData.push({
            vName: vendorVal.Vendor_Name,
            url: vendorVal.URL,
            name: vendorVal.V_Name,
          })
        })
        this.tableData = vendorData
      }
    } catch (error) {
      console.error('Error parsing JSON value ', error)
      // TODO: other error functionality
    }
  }
}

the try/catch will catch out any invalid JSON data so you can alert the user.

3
  • 1
    Hi lu_ke____ , thanks a lot !!! I included the braces in my field value and updated my code as you had suggested and made couple of other tweaks and now the data table is reflecting in my record page. Thanks a lot! Mar 24 at 10:10
  • Hi lu_ke____, I was told that i cannot modify the VENDOR_FIELD field value manually. So, instead of manually fixing the JSON data how can i fix it in my JS file in my LWC? The best would be if i am able to drop the details key but i am not sure how to do it. Mar 28 at 10:46
  • 1
    Hi lu_ke____ , i was able to fix the invalid json using replace in my js file ! Mar 28 at 10:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.