JSON can’t read value of field [Vue.js]

 data() {
    return {
        message: null,
        currentMessage: 'test',
   }

I have function

valueOfMeasurement(measurement) {
        if (this.message instanceof Uint8Array) {
            var enc = new TextDecoder("utf-8");
            this.currentMessage = enc.decode(this.message);
            console.log("current message: ");
            console.log(this.currentMessage); //only this console.log returns value
            console.log(this.currentMessage["field" + measurement.fieldId]);
            console.log(this.currentMessage["field1"]);
            console.log(this.currentMessage[0]["field1"]);
            return currentMessage["field" + measurement.fieldId];
        } 

        else 
         return this.message.feeds[0]["field" + measurement.fieldId];
    }

Short explanation of function:

I call it in <child-component :value=valueOfMeasurement(measurement)></child-component> to pass it value to child component. measurement is JSON object that I use to identify which component and data is used,

measurement.fieldId have values 1,2,3…

message is JSON array which I get via REST and MQTT Api.I use REST to get current values (because MQTT has few minutes delay before reading any data, and then MQTT to get new values without refreshing page. I call REST first to get initial value in beforeMounted and then my message have value:

  {
   "channel":{
      "id":1500203,
      "name":"PlastenikDemo",
      "description":"Demo kanal za sistem nadzora plastenika",
      "latitude":"0.0",
      "longitude":"0.0",
      "field1":"TemperaturaVazduha",
      "field2":"VlaznostVazduha",
      "field3":"TemperaturaZemlje",
      "field4":"VlaznostZemlje",
      "field5":"IntenzitetSvjetla",
      "field7":"VerzijaPrograma",
      "field8":"Vrijemems",
      "created_at":"2021-09-08T07:37:06Z",
      "updated_at":"2021-09-28T12:51:38Z",
      "last_entry_id":17901
   },
   "feeds":[
      {
         "created_at":"2021-11-28T00:11:38Z",
         "entry_id":17901,
         "field1":"16.40000",
         "field2":"45.50000",
         "field3":"16.06250",
         "field4":"5.20000",
         "field5":"49.79300",
         "field7":"1",
         "field8":"390267909"
      }
   ]
}

This is used in else part of function above, and it pass values normally.

After that, in my mounted() I call another functions that get message from MQTT protocol. It has delay of about 5 mins before it get any message from this protocol. Now this is where problems begin. If I put <div> {{this.message}} </div> I get normal message from MQTT as JSON object:

    {
   "channel_id":1500203,
   "created_at":"2021-11-28T02:09:39Z",
   "entry_id":17924,
   "field1":"16.30000",
   "field2":"45.50000",
   "field3":"15.93750",
   "field4":"5.20000",
   "field5":"49.79300",
   "field6":null,
   "field7":"1",
   "field8":"397348953",
   "latitude":null,
   "longitude":null,
   "elevation":null,
   "status":null
}

But if I console.log(this.message) inside function valueOfMeasurement(measurement) I get arrays of Uint8Array. That’s why I did this.currentMessage = enc.decode(this.message); and when I console.log(this.currentMessage) I get normal JSON object but, in same function, line under it, I try console.log(this.currentMessage["field1"] and I get undefined.

Also, in my <div>this.currentMessage</div> when I restart page I get test on my screen, which is ok, because I set it in data, but when code gets into this function valueOfMeasurement(measurement) and into if-loop I get error in console Reference error: currentMessage is not defined and in same console, next 5 lines are:

current message:

 {
   "channel_id":1500203,
   "created_at":"2021-11-28T02:09:39Z",
   "entry_id":17924,
   "field1":"16.30000",
   "field2":"45.50000",
   "field3":"15.93750",
   "field4":"5.20000",
   "field5":"49.79300",
   "field6":null,
   "field7":"1",
   "field8":"397348953",
   "latitude":null,
   "longitude":null,
   "elevation":null,
   "status":null
}

undefined undefined undefined.

These 5 console.logs are from valueOfMeasurement(measurement).

Answer

Problem is that enc.decode() returns string and not JSON, so I need to add JSON.parse

 if (this.message instanceof Uint8Array) {
            var enc = new TextDecoder("utf-8");
            this.currentMessage = JSON.parse(enc.decode(this.message));
            
            return this.currentMessage["field" + measurement.fieldId];
        }

Advertisement

Answer