Specific format using Javascript arrays (map)?

JavaScript
1

Hello guys, I’m trying to do something, and I’m not even sure that is possible.

I have these arrays and titles:

var data_1 = ["23","11","4","77","9","123"];
var data_2 = ["5","4","122","41","74","61"];
var data_3 = ["6","55","14","12","75","9"];
var data_4 = ["8","5","5","3","1","7"];
var data_5 = [];
var data_6 = ["25","63","31","53","21","64"];
var data_7 = [];
var data_8 = ["74","41","64","51","23","36"];
var data_9 = [];
var data_10 = ["7","75","34","99","74","15"];

var title_1 = "Title_1";
var title_2 = "Title_2";
var title_3 = "Title_3";
var title_4 = "Title_4";
var title_5 = "";
var title_6 = "Title_6";
var title_7 = "";
var title_8 = "Title_8";
var title_9 = "";
var title_10 = "Title_10";

And I would like this format:

[
        {
        		title: "Title_1",
            data: [23, 11, 4, 77, 9, 123]
        },
        {
        		title: "Title_2",
            data: [5, 4, 122, 41, 74, 61]
        },
        {
        		title: "Title_3",
            data: [6, 55, 14, 12, 75, 9]
        },
        {
        		title: "Title_4",
            data: [8, 5, 5, 3, 1, 7]
        },
        {
        		title: "Title_6",
            data: [25, 63, 31, 53, 23, 36]
        },
        {
        		title: "Title_8",
            data: [74, 41, 64, 51, 23, 36]
        },
        {
        		title: "Title_10",
            data: [7, 75, 34, 99, 74, 15]
        }
]

As you can see 5, 7 and 9 are not added because they are empty. But maybe in the next search they contain data and other different “number” would be empty, so it would be great to make sure it only will add the fields that not empty.

Is this possible to do? I have seen some examples using .map but not sure how to remove the [] first and then add { } for every entry.

JSFIDDLE DEMO: JSFiddle - Code Playground

Thanks.

2

The following where we map and the filter, seems to do the job.

var data = [data_1, data_2, data_3, data_4, data_5, data_6, data_7, data_8, data_9, data_10];
var title = [title_1, title_2, title_3, title_4, title_5, title_6, title_7, title_8, title_9, title_10];

var combined = data.map(function combineTitleData(dataItem, index) {
  return {
      title: title[index],
      data: dataItem
  };
}).filter(function removeEmpty(item) {
  return item.data.length;
});
1 Like
3

Awesome, works like a chant. Thank you so much.
Just an optional question, what part of the code “formats” the order?

[{
  data: ["23", "11", "4", "77", "9", "123"],
  title: "Title_1"
}, {
  data: ["5", "4", "122", "41", "74", "61"],
  title: "Title_2"
}, {
  data: ["6", "55", "14", "12", "75", "9"],
  title: "Title_3"
}, {
  data: ["8", "5", "5", "3", "1", "7"],
  title: "Title_4"
}, {
  data: ["25", "63", "31", "53", "21", "64"],
  title: "Title_6"
}, {
  data: ["74", "41", "64", "51", "23", "36"],
  title: "Title_8"
}, {
  data: ["7", "75", "34", "99", "74", "15"],
  title: "Title_10"
}]

The result output adds the data then the title. If I wanted to change that to add first the title and then the data what I should change?

It’s not important and the code will work with this format, just want to know and understand better how the code works to learn from it.

Thank you sooooo much! :heart:

4

When it comes to objects, there is no order to the properties that they contain. The data and title properties can be accessed without any reference to order.

For example, the first data is at combined[0].data and the first title for that data is combined[0].title

It is the data and title properties that let you access that information. No order is used for those.

5

not…strictly true, though it depends on your method of accessing them. a for...in of an object does have a defined order.

6

Is that browser dependent? The MDN for…in page states that it iterates over the properties in an arbitrary order.

7

Actually, there’s a defined order of traversal since ES6; and Object.keys() and friends also have respect the order of the for ... in loop.

3 Likes
8

odd…The MDN for getOwnPropertyNames implies there is a defined order… unless im misinterpreting their implication.

EDIT: i hate posting on a phone. also m3g4 beat me lol

1 Like
9

How does this help the OP though? Currently the code does title first then data:

  return {
      title: title[index],
      data: dataItem
  };

and in post #3 he’s getting data first then title, wanting the title first.

10

I would assume that this is due to the implementation of whatever they are using for the output… if you run

for (const item of combined) {
  console.log(Object.keys(item))
}

then you’ll indeed get ['title', 'data'] for each item, so internally the order is being kept.

1 Like
11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.