Ojet binding from json to string

Question

I am leaning OJET. I want to display value from a JSON but I am not able to do it. Below is html file below and JS:

<oj-bind-text value="[[cardData.agent_ID]]"></oj-bind-text>

  this.cardData = ko.observable();

  this.fetchAgentDetails = async function () {
  try {
       const response = await fetch('http://localhost:8080/cardData);
       const data = await response.json();
       console.log(data)
       this.cardData(data);
       } catch (error) {
           // Handle errors
       }
   };
   this.fetchAgentDetails();

The value fo console statement is:

{
    "agent_ID": "12",
    "first_NAME": "M*****e",
    "last_NAME": "R****s",
    "middle_NAME": null,
    "status": "Online      "
}

I know we have to pass value as a string in <oj-bind-text> but I don't know how to do it. Can anyone help?

Answer 1

The observable stores the object as the value: "this.cardData(data);" Thus, to get the value stored in this observable, we do this "this.cardData()."

So, try this

oj-bind-text value="[[cardData().agent_ID]]"

Please check the brackets added after cardData