How to format correctly this array (titles)

[Raiikou]

Hello, guys. I’m trying to “format” one array of objects correctly, but the title item one is not working as I want.

Code:

var title1 = "title1";

var title2 = "";

var title3 = "title3";

var title4 = "";

var title5 = "title5";

var titles = [title1, title2, title3, title4, title5];

var data1 = [10.0, 8.04, 11.0, 8.33, 9.01, 5.10, 3.59, 4.58, 9.18, 10.84];

var data2 = [];

var data3 = [7.1, 9.1, 3.7, 8.6, 8.3, 7.1, 7.0, 8.2];

var data4 = [];

var data5 = [6.12, 18.1, 12.1, 48.1, 8.3, 3.9, 6.2, 9.9];

var comb = [].concat(data1, data2, data3, data4, data5);

const rows = comb.reduce(function (rows, key, index) {

  return (index % 2 == 0 ? rows.push([key])

    : rows[rows.length - 1].push(key)) && rows;

}, []);

var combined = rows.map(function combineTitleData(dataItem, index) {

  return {

    name: titles[dataItem.lenght],

    data: dataItem

  };

}).filter(function removeEmpty(item) {

  return item.data.length;

});

console.log(combined);

Everything is working fine but the titles, Instead of adding title 1 to all arrays created from data1, title 2… for data2… << >> title5 for data5 the titles[dataItem.lenght] returns the same title for all the objects.

Where I’m messing it, or what’s missing in the code to format properly the title according to that array data?

JSFIDDLE: https://jsfiddle.net/9uxpw53q/

Any help would be very appreciated,
Thanks.

[Raiikou]

I think I have found a bug in the code, but it doesn’t seem to fix the issue:

var titles = [title1, title2, title3, title4, title5];

Is adding some "" empty values to the array (because title2, title4 is empty).

So:
var titles = [title1, title2, title3, title4, title5].filter(item => item);

[m_hutley]

…ow.

Right… so… you’ve got a multidimensional array of data, and an array of titles. I’m… going to gloss over how you got there, because that hurt my head.

You take… every even row, and…for an odd row, you take … what?

I really, really don’t like saying this but… what is it you’re actually trying to do? What’s your input, and whats your desired output? Your code is basically nonsensical to me.

[Raiikou]

@m_hutley thanks for the answer, I’m sorry maybe I didn’t explain enough what I’m trying to do.

I want to use one library chart that uses arrays of x-axis and y-axis data. [number, number].
E.g:

The examples use “pre-defined” numbers as the data source. But I’m implementing this into my website with dynamic data.

The only way to “create a similar scenario as it’s in my website” it’s with those pre-defined vars:

(As said, this represents the data pulled from my host database).

Title1,2,3,4,5 represents how many titles are created for that chart.
Data1,2,3,4,5 represents how many “number” entries exist for that chart.
(To make it more realistic to my website scenario, some entries are empty/no data).

Now I need to take the values inside the data,1,2,3,5 and format them to split every two numbers.
e.g. for data1 = [10.0, 8.04, 11.0, 8.33, 9.01, 5.10, 3.59, 4.58, 9.18, 10.84]

should be like this:
[10.0, 8.04], [11.0, 8.33], [9.01, 5.10], [3.59, 4.58], [9.18, 10.84]

To do that using all the “data entries” (data1,2,3,4,5): I’m using this code:

var comb = [].concat(data1, data2, data3, data4, data5);

const rows = comb.reduce(function (rows, key, index) {
  return (index % 2 == 0 ? rows.push([key])
    : rows[rows.length - 1].push(key)) && rows;
}, []);

It combines data,1,2,3,4,5 and then split into one array for every two entries that comb contains.

Last step it’s to format the data like this:

series: [
{
            data: [10.0, 8.04],
            name: 'title',
            type: 'scatter'
},
{
            data: [11.0, 8.33],
            name: 'title',
            type: 'scatter'
},
{
            data: [9.01, 5.10],
            name: 'title',
            type: 'scatter'
}
//<....... same until the end..........>
]

And for that I need to use this code:

var combined = rows.map(function combineTitleData(dataItem, index) {
  return {
    data: dataItem,
    name: titles[dataItem.length],
    type: 'scatter'
  };
}).filter(function removeEmpty(item) {
  return item.data.length;
});

My issue is that titles aren’t formatted as I’m trying to do, and I don’t know how or what I’m doing wrong, that’s why I’m opening this thread.

But just to understand all the objects created from data1 should assign title1 to them in the last part, title2 for data2, title3 for data3… etc…

Not sure if this helps to understand better?
Thanks.

[m_hutley]

okay, making more sense now. Let’s just… take it from the top, so to speak.

Let me just… for the sake of my own sanity.

var titles = ["title1","","title3","","title5"];
var data = [[10.0, 8.04, 11.0, 8.33, 9.01, 5.10, 3.59, 4.58, 9.18, 10.84],[],[7.1, 9.1, 3.7, 8.6, 8.3, 7.1, 7.0, 8.2],[],[6.12, 18.1, 12.1, 48.1, 8.3, 3.9, 6.2, 9.9]];

(How you get to this state, is up to you; we’re here to debug the processing, not the creation.)

We don’t want to reduce data, we want to map it.

data.map((x,i) => {
  let out = [];
   while(x.length) {
      out.push(x.splice(0,2));
   }
   return {"name":titles[i],"data":out,"type":"scatter"};
});

result:

(Note: This will destroy the data elements in the process, so you may want to copy the variable out if you need to keep a copy of the original data for whatever reason)

[m_hutley]

@Raiikou

name: titles[dataItem.length],

Your problem in the original code is that you’re not using index here, you’re using the size of hte array, which will always be 5.