Converting array of data to strings

Question

I have data in the following format:

[
    {
      "id": 1,
      "cost": 323,
      "comparison": "High",
      "flag": "Alert"
    }
    ...
]

I am trying to prepare this data for Google charts, more specifically to make a Histogram. The format required is like on next example:

var data = google.visualization.arrayToDataTable([
    ['Name', 'Number'],
    ['Name 1', number1],
    ['Name 2', number2],
    ['Name 3', number3],
    ...
]);

So, from my input data, I want to use the id and cost properties. To approach this, I have implemented next code:

const keys = Object.keys(this.data[0]).filter(e => !(["comparison","flag"].includes(e)));
const values = this.data.map(e => Object.entries(e).filter(([k]) => keys.includes(k)).map(([, v]) => v));
const formattedArray = [keys, ...values];

This somewhat gives me the data I require, I am seeing something like this:

var data = google.visualization.arrayToDataTable([
    ['id', 'cost'],
    [1, 323]
    ...
]);

But my chart is not displaying correctly, and the problem I think I am facing is that I am passing id's as an int, whereby Google charts expects column one to be a string.

How can I convert all the values that are placed into column one, so they are strings?

Thanks!

I really don't get why you use const keys = Object.keys(this.data[0]).filter(e => !(["comparison","flag"].includes(e))); to just get an array like ["id", "cost"]. Why not just declare it like that explicitly? Also, using that approach, and in the case the first object of the array have other keys besides id and cost, those will be included on the keys array. — Shidersz
– Shidersz, Commented Jun 10, 2019 at 21:57

Yannick K · Accepted Answer · 2019-06-10 21:53:52Z

1

You can use Number.isInteger() to check whether the variable is a number, and then use the toString() method to convert it. You can use the index parameter from the map to only stringify the first column. You could change your code like so:

const data = [{ "id": 1, "cost": 323, "comparison": "High", "flag": "Alert"}]

const keys = Object.keys(data[0]).filter(e => !(["comparison","flag"].includes(e)));
const values = data.map(e => Object.entries(e).filter(([k]) => keys.includes(k)).map(([, v], i ) => {
  if ( i === 0 && Number.isInteger( v ) ) {
    return v.toString();
  }
  return v;
}));
const formattedArray = [keys, ...values];

console.log( formattedArray );

edited Jun 10, 2019 at 21:53

answered Jun 10, 2019 at 21:48

Yannick K

5,5223 gold badges13 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

katie hudson Over a year ago

The problem with that is that it turns both columns to a string. I need the second column to remain an int.

Shidersz · Accepted Answer · 2019-06-10 22:18:39Z

If I have understood correctly, to proceed in this case you can create a method that receives the data, the parameter to use as key (x-axis) and the parameter to use as value (y-axis) as arguments. Then, you can use a simple Array.map() over the input data to generate the array of pairs and finally return the desired output. Something like this:

const data = [
  {"id": 1, "cost": 323, "comparison": "High", "flag": "Alert"},
  {"id": 2, "cost": 745, "comparison": "Low", "flag": "Warning"},
  {"id": 3, "cost": 122, "comparison": "Medium", "flag": "Info"}
];

function getHistogram(data, keyParam, valParam)
{
    return [
        [keyParam, valParam],
        ...data.map(o => ["" + o[keyParam], o[valParam]])
    ];
}

console.log(getHistogram(data, "id", "cost"));

.as-console {background-color:black !important; color:lime;}
.as-console-wrapper {max-height:100% !important; top:0;}

Collectives™ on Stack Overflow

Converting array of data to strings

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related