Cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

Issues with settings and the Select component

ANSWERED

I am trying to use the select component and basing my work off of the settings demo. I am getting a more complicated data structure than from what the ColorSelect returns. 

 

Here is my debugging log:

[8:40:28 PM]App received: {"data":{"key":"color","newValue":"\"olivedrab\""}}app://app/index.js:96
[8:40:28 PM]Setting Seperator Bar color: olivedrab
[8:39:40 PM]App received: {"data":{"key":"schedule","newValue":"{\"selected\":[0],\"values\":[{\"name\":\"Regular\"}]}"}}app://app/index.js:96 [8:39:40 PM]Schedule starts at: {selected:[0],values:[{name:Regular}]}app://app/index.js:104

It seems that I get the newValue as a string; and I have been able to parse it as such; but I feel like there must be a better way. I'm sure I'm just being dumb.

 

Here is my code:

// Message is received
messaging.peerSocket.onmessage = evt => {
  console.log(`App received: ${JSON.stringify(evt)}`);
  if (evt.data.key === "color" && evt.data.newValue) {
    let color = util.stripQuotes(evt.data.newValue);
    console.log(`Setting Seperator Bar color: ${color}`);
    seperatorBar.style.fill = color;
  }
  if (evt.data.key === "schedule" && evt.data.newValue) {
    sched = util.stripQuotes(evt.data.newValue);
    console.log(`Schedule starts at: ${sched}`);
    sched = sched.substring(sched.indexOf("name")+5);
    console.log(`Schedule is now: ${sched}`);
    sched = sched.substring(0, sched.indexOf("}"));
    console.log(`Schedule is finally: ${sched}`);
  }
};

For the full source: https://github.com/cmspooner/Kearsarge-Time-for-Fitbit-Ionic

 

Best Answer
0 Votes
1 BEST ANSWER

Accepted Solutions

The newValue returned is a stringify JSON object, so you need to convert the string using the JSON.parse function.

 

In your code, the line about the color would become

let color = JSON.parse(evt.data.newValue);

and the entire if about your schedule will be

shed = JSON.parse(evt.data.newValue).values[0].name;

as the select element returns an array.

 

View best answer in original post

Best Answer
3 REPLIES 3

The newValue returned is a stringify JSON object, so you need to convert the string using the JSON.parse function.

 

In your code, the line about the color would become

let color = JSON.parse(evt.data.newValue);

and the entire if about your schedule will be

shed = JSON.parse(evt.data.newValue).values[0].name;

as the select element returns an array.

 

Best Answer

That is way nicer then the Settings sample code. Any plans to update the examples?

Best Answer
0 Votes

Yes, I'll update the documentation.

Best Answer