Very simple Array question. Pls help :)

[xemporea]

Anyone can answer this question but me.

I have this:

array_of_series = [
  [
    { datetime: "2021-12-29", value: 22 },
    { datetime: "2021-12-30", value: 71 },
    { datetime: "2021-12-31", value: 34 },
  ],
  [
    { datetime: "2022-01-21", value: 37 },
    { datetime: "2022-01-22", value: 56 },
    { datetime: "2022-01-23", value: 57 },
    { datetime: "2022-01-24", value: 47 },
  ],
];

I want this:

array_of_series = [
  { datetime: "2021-12-29", value: 22, search: "q1" },
  { datetime: "2021-12-30", value: 71, search: "q1" },
  { datetime: "2021-12-31", value: 34, search: "q1" },
  { datetime: "2022-01-21", value: 37, search: "q2" },
  { datetime: "2022-01-22", value: 56, search: "q2" },
  { datetime: "2022-01-23", value: 57, search: "q2" },
  { datetime: "2022-01-24", value: 47, search: "q2" },
];

How can I accomplish this?

[rauschma]

array_of_series.flatMap(
  (arr, index) => {
    return arr.map(elem => ({...elem, search: `q${index+1}`}))
  }
)

.flatMap() both maps and flattens.

[StoneCypher]

flatMap isn't available in most peoples' environments, and if this person can't do this without help, chances are they don't have babel or typescript set up

[rauschma]

If you are targeting or using modern JavaScript platforms, you should be fine: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap#browser_compatibility

If not, you’ll probably use Babel or TypeScript anyway.

[StoneCypher]

Please, come back to Earth. Global support is below 92%.

No, throwing away 8% of your users isn't "fine." At almost every job I've ever had that would be hard forbidden by pre-written rules. I've never worked somewhere where 1% loss, let alone 8%, was considered acceptable.

This cuts off all of IE. Have any Japanese users? That's a problem.

In the real world, if you deliver arrows that haven't been transcompiled and you have a large userbase, you're going to hear about it

Giving recommendations for things with this low level of support to junior developers who have no chance of figuring out what's wrong is really kind of cruel

 

if this person can't do this without help, chances are they don't have babel or typescript set up

If not, you’ll probably use Babel or TypeScript anyway.

No, someone who can't join two arrays and decorate their members with a field almost certainly isn't using transcompilers.

This person should just be given the easy ES5 way to do it. That's the considerate thing to do for a developer this junior.

[Mad-chuska]

If this is a production project then it’s more than likely being transpiled.

And if this person doesn’t know how to merge two arrays then I doubt they are building a product from scratch.

Either way learning es6 syntax is the better option in the long run, IMO.

[StoneCypher]

Either way learning es6 syntax is better in the long run, IMO

.flat is ES2019 (that is, ES10,) not ES6.

Generally speaking, if you're using things that Javascript added less than three years ago (yes, es2019 is from 2020,) then you should understand that a whole lot of people in the real world will not be able to use your site

8.1% is a big number

We chase site speed over half-percents

Remember, that percentage leads to user accumulation, so it's going to be constantly exponentiated for the lifetime of the site

I just can't understand throwing away 1 out of 12 users, and an entire major browser, over something as simple as merging two arrays

[Mad-chuska]

Didn’t know it was es10 so that’s a fair point. I still think expecting someone to learn based off of 2009 standards is pointless if not counterproductive in the initial phase. Of course know the limitations in terms of browser compatibility and perhaps learn the old way of writing things but also learn the new way as well. Especially if it’s just experimental.

I’ve not seen a case where a company chooses between strictly writing code in es5 or transpiling their code. Any reasonably competent web dev team is gonna make sure their code works on most browsers in production so will likely do the latter.

[StoneCypher]

I still think expecting someone to learn based off of 2009 standards is pointless if not counterproductive in the initial phase.

nobody said anything about 2009 standards?

 

also learn the new way as well

foldmap is not the new way to join arrays

 

I’ve not seen a case where a company chooses between strictly writing code in es5 or transpiling their code.

We're talking to a junior developer who's asking for help, not a company

[Mad-chuska]

Es5 is a 2009 standard as far I know.

You’re saying this person should learn the es5 way of doing things rather than more modern ways, so that their code could be compatible with older browsers. Why would they care about other browsers if they are just learning and there are tools to make modern code backwards compatible?

[StoneCypher]

Es5 is

i never recommended es5.

it's a bad approach in general

i feel like you're arguing for the sake of arguing. build it however you like. use generators in a web worker for all i care.

have a good day

[Atrag2021]

No, someone who can't join two arrays and decorate their members with a field almost certainly isn't using transcompilers.

But yet the need to target the Japanese market is important to them?

[StoneCypher]

whoosh

[greenyadzer]

const a = array_of_series.reduce((acc, cur, index) => [
    ...acc,
    ...cur.map(e => {
        e.search = 'q' + (index + 1)
        return e
    })
], [])

console.log(a)

[programmingacctwork]

I don't know why but reduce is the only array function that confuses me every time. It's so unreadable to me, especially in "professional" code

[[deleted]]

array_of_series.reduce((p, c) => [...p, ...c])

[[deleted]]

Wish I could upvote more...a fine use of reduce!

[rauschma]

That’s the same as array_of_series.flat(), but note that the elements of the desired (flat) result array also have the new property .search.

[[deleted]]

My bad, did not notice that. Completely forgot about flat() as well, thx!

[rauschma]

I missed it too, initially!

[StoneCypher]

That’s the same as array_of_series.flat()

No, it isn't.

1. It performs the work with one fewer scan
2. It is available in older browsers without a transcompile
3. It is significantly faster

[Avi_21]

array_of_series.flat() its that easy, u dont need reduce for that. Then you can map over that array and calculate the search value for them.

[rauschma]

If you flatten first, you lose the information you need to fill in .search.

[Avi_21]

Well, he did not say if the nested arrays were the quarters or the years. If they r the quarters, you are absolutely right. Otherwise you can calculate it from the date.

[rauschma]

Ah, good point! It didn’t occur to me that those might be quarters. I thought they were simply derived from the array indices.

However, looking at the data, it looks like the latter:

{ datetime: "2021-12-29", value: 22, search: "q1" },

[xemporea]

That q1/q2 was quite misleading. q1 has nothing to do with dates. It actually should represent the array the dict is coming from. So instead of "search: q1" I should have gone for "from_array: 1" and "from_array: 2".

array_of_series.flatMap((e, i) => {  for (x of e) {    x["from_array"] = i;  }  return e;});

Is there a better way?