显示 JSON 字符串的 Lightning Web 组件不起作用

Question

I have the following lightning web component to read a JSON string and display them in Contact record Details page. Please note that I am new to lighting web components and making a considerable amount of effort to learn.

MyComponent.html

---

<template>
  <lightning-record-form
        object-api-name={contactObject}
        fields={myFields}
        onsuccess={handleContactCreated} onload={handleContactInitialized} >
  </lightning-record-form>
</template>

MyComponent.js

---

 import { LightningElement, wire, track } from 'lwc';
 import findDetails from 
        '@salesforce/apex/JSONDemoController.getContactWithRelatedDataById';
 import CONTACT_OBJECT from '@salesforce/schema/Contact';
 import NAME_FIELD from '@salesforce/schema/Contact.Name';
 import TEST_FIELD from '@salesforce/schema/Contact.TestField__c';
 import SPOUSE_FIELD from '@salesforce/apex/ResponseJSONWrapper.spouse';
 import ADDRESS_FIELD from 
    '@salesforce/apex/ResponseJSONWrapper.mailingAddress';


export default class ContactCreator extends LightningElement {

contactObject = CONTACT_OBJECT;

myFields = [SPOUSE_FIELD,ADDRESS_FIELD];
@track contacts;
@track error;

handleContactCreated(){
    // Run code when account is created.
}

handleContactInitialized(){
  findDetails()
      .then(result => {
          var responseObj = JSON.parse(result.getReturnValue());
          this.SPOUSE_FIELD = responseObj.spouse;
          this.ADDRESS_FIELD = responseObj.mailingAddress;
      })
      .catch(error => {
          this.error = error;
      });
      myFields = [SPOUSE_FIELD,ADDRESS_FIELD];
    }
 }

JSONDemoController.cls

---

public class JSONDemoController {
   @AuraEnabled
   public static String getContactWithRelatedDataById() {

    String response = '';
    ResponseJSONWrapper wrapper = new ResponseJSONWrapper();
    wrapper.spouse = 'Test Spouse';
    wrapper.mailingAddress = 'Test Address';
    response = JSON.serialize(wrapper);
    return response;
}

}

ResponseJSONWrapper.cls

---

  public with sharing class ResponseJSONWrapper {
     public String spouse;
     public String contactRecordType;
     public Date birthDate;
     public String mobile;
     public String mailingAddress;
     public String otherAddress;
     public String languages;
     public String level;
     public String Description;
}

But I don't get the values I have hard coded in the lightning component when it is rendered. Nothing is there it's empty. Can someone help to point out where I am going wrong ?

Answer 1

Change this line:

var responseObj = JSON.parse(result.getReturnValue());

To:

var responseObj = JSON.parse(result);

getReturnValue() is for Aura components.

Answer 2

You don't actually need to serialize the wrapper in apex and then parse in the component explicitly, the framework does the job by itself!

public class JSONDemoController {
   @AuraEnabled   //change return type to ResponseJSONWrapper 
   public static ResponseJSONWrapper getContactWithRelatedDataById() {

    String response = '';
    ResponseJSONWrapper wrapper = new ResponseJSONWrapper();
    wrapper.spouse = 'Test Spouse';
    wrapper.mailingAddress = 'Test Address';
    return wrapper;   //return the wrapper itself
}

and in .js file

findDetails()
  .then(result => {
      var responseObj = result;
      ...
  })

This way the code will be less cluttered with not-needed code :)