Convert between a string and Object properties in Litlement

Question

The custom element below gets the value of the code in the JSON passed to the observation-status tag and displays it as the selected option. The challenge is that I get the error "observation-category.js:42 Uncaught (in promise) TypeError: Cannot read property '0' of undefined" when the element renders.

<observation-category value ='[ {
    "coding": [ {
      "system": "http://terminology.hl7.org/CodeSystem/observation-category",
      "code": "imaging",
      "display": "vital-signs"
    } ]
  }]'></observation-category>

import { LitElement, html } from "lit-element";
import "@material/mwc-select";
import '@material/mwc-list/mwc-list-item';
import '@material/mwc-formfield';

export class FObservationCategory extends LitElement {

    static get properties() {
        return {
            value: { type: Object },
            obsCat: { type: String }
        };
    }
    constructor() {
        super();
        this.value = [{}]
        this.obsCat = "true"
    }

    render() {
        return html`
        <mwc-formfield label= "OBSERVATION STATUS" alignEnd>
        ${this.obsCat !== "false" ?
                html` <mwc-select value = ${this.value[0].coding[0].code} @change = '${this.changeValue}'> 
                <mwc-list-item value ="social-history"> Social History</mwc-list-item>
                <mwc-list-item value = "vital-signs">Vital Signs</mwc-list-item>
                <mwc-list-item value = "imaging">Imaging</mwc-list-item>
                <mwc-list-item value = "laboratory">Laboratory</mwc-list-item>
                <mwc-list-item value = "procedure">Procedure</mwc-list-item>
                <mwc-list-item value = "survey">Survey</mwc-list-item>
                <mwc-list-item value = "exam">Exam</mwc-list-item>
                <mwc-list-item value = "therapy">Therapy</mwc-list-item>
                <mwc-list-item value ="activity">Activity</mwc-list-item>     
        </mwc-select>`: ""}
        </mwc-formfield>
        `
    }
  changeValue(e){
      this.value = e.target.value
      console.log(this.value) 
  }

}
customElements.define('fhir-observation-category', FhirObservationCategory);

How can I modify the element above to get the display of the option by simply providing the value of the code instead of passing the whole JSON without changing the property of the value to a string?

<observation-category value ="imaging"></observation-category>

score 0 · Answer 1 · answered May 06 '21 at 20:58

You're passing the value as a JSON string - either add a type converter to parse it back to an object, or use the .property notation to set the property (which can hold anything) rather than the attribute (which is always passed as a string):

const valueToPass = [ 
    {
        coding: [{
            system: "http://terminology.hl7.org/CodeSystem/observation-category",
            code: "imaging",
            display: "vital-signs"
        }]
    }];

html`
<observation-category 
    .value=${valueToPass}></observation-category>`;

Convert between a string and Object properties in Litlement

1 Answers1