Join first two elements and create new array?

Question

After playing around with the join() and slice() functions for hours, I have just found that you can't use either function on complex arrays. So I've come to get some help here.

I'm trying to get my data below:

 var data = [
            ["North", "Tennis",37, 25, 11, 9, 42, 13],
            ["East", "Football", 41, 2, 3, 26, 47, 21],
            ["South", "Rugby", 7, 22, 35, 45, 11, 46],
            ["West", "Rugby", 30, 21, 44, 23, 4, 47],
            ["North East", "Football", 35, 27, 12, 39, 34, 13],
            ["North West", "Football", 23, 4, 41, 35, 9, 47]
        ];

To look like this (output):

var result = [
    ["North: Tennis", 37, 25, 11, 9, 42, 13],
    ["East: Football", 41, 2, 3, 26, 47, 21],
    ["South: Rugby", 7, 22, 35, 45, 11, 46],
    ["West: Rugby", 30, 21, 44, 23, 4, 47],
    ["North East: Football", 35, 27, 12, 39, 34, 13],
    ["North West: Football", 23, 4, 41, 35, 9, 47]
];

Any help would be appreciated

@MohammadUsman Not at all, the rest of my code will use an array. I just want to reformat it and by appending a colon just after the first index and remove the comma — user10230515, Aug 18 '18 at 11:06
So you want to get one string as output? Or an array of strings? Or an array of arrays where the first two elements get joined by `:` ? Or ... ? — Jonas Wilms, Aug 18 '18 at 11:14
An array of arrays where the first to elements are joined by `:` — user10230515, Aug 18 '18 at 11:16

score 4 · Accepted Answer · edited Aug 18 '18 at 11:31

As you want to turn one array into another array, it makes sense to .map the original array to another array by taking the first two elements of each subarray and concatenating them together, then building a new subarray by adding the rest of the elements (which we get with the rest parameter during the array destructuring) to a new array that contains the joined string.

let data = [
  ["North", "Tennis",37, 25, 11, 9, 42, 13],
  ["East", "Football", 41, 2, 3, 26, 47, 21],
  ["South", "Rugby", 7, 22, 35, 45, 11, 46],
  ["West", "Rugby", 30, 21, 44, 23, 4, 47],
  ["North East", "Football", 35, 27, 12, 39, 34, 13],
  ["North West", "Football", 23, 4, 41, 35, 9, 47]
];

let result = data.map(([s1, s2, ...rest]) => [`${s1}: ${s2}`, ...rest]);

console.log(result);

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

References:

Arup Rakshit · Answer 2 · 2018-08-18T11:21:58.670

0

I'd write your code.

var data = [
  ["North", "Tennis", 37, 25, 11, 9, 42, 13],
  ["East", "Football", 41, 2, 3, 26, 47, 21],
  ["South", "Rugby", 7, 22, 35, 45, 11, 46],
  ["West", "Rugby", 30, 21, 44, 23, 4, 47],
  ["North East", "Football", 35, 27, 12, 39, 34, 13],
  ["North West", "Football", 23, 4, 41, 35, 9, 47]
];

// Final resulting array is created by concatenating the first and
// second index elements of each inner array of data. The rest data
// is being copied as it is using slice and spread operator.
const result = data.reduce(
  (mem, cur) => [...mem, [`${cur[0]}: ${cur[1]}`, ...cur.slice(2)]],
  []
);

console.log(result);

edited Aug 18 '18 at 11:21

answered Aug 18 '18 at 11:10

Arup Rakshit

116,827
30
260
317

1

IMO: `reduce` overcomplicates things here, why not just `map` ? Why I downvoted: *I'd write your code.* is *not* a description of whats going on. – Jonas Wilms Aug 18 '18 at 11:16
@JonasWilms Here is nothing to explain, each line is pretty self explnatory. Want me to explain each line? Only one method I used `.reduce` here. What should I explain about the `reduce`? – Arup Rakshit Aug 18 '18 at 11:17
@JonasWilms What explanation you got from `You can use .map() and some array destructuring`... from here? Nothing.. But I am ok with this line.. – Arup Rakshit Aug 18 '18 at 11:19
It doesnt matter if the explanation is good or not, but he at least tried to explain whats going on. You just dumped code. (Removed my downvote due to the edit) – Jonas Wilms Aug 18 '18 at 11:25
1

@JonasWilms That is not an explation.. It was mentioned like that for to make happy people like you.. which I skip. I don't bother people who argues for no reasons.. – Arup Rakshit Aug 18 '18 at 11:26
1

@JonasWilms What kind of answer [is this](https://stackoverflow.com/questions/51903116/run-a-function-every-time-any-function-in-class-is-called-using-js/51903233#51903233) mate ? Did you put any effort here to explain instead of writing the code itself? Make yourself first presentable, then comment on others.. That said, I will stop commenting here.. I just try to ignore crap.. – Arup Rakshit Aug 18 '18 at 11:29

score 0 · Answer 3 · answered Aug 18 '18 at 11:14

If I understand your question correctly, you are looking for the following output. I've used JavaScript's .map() function to restructure the data slightly. More information on .map here.

var data = [
  ["North", "Tennis", 37, 25, 11, 9, 42, 13],
  ["East", "Football", 41, 2, 3, 26, 47, 21],
  ["South", "Rugby", 7, 22, 35, 45, 11, 46],
  ["West", "Rugby", 30, 21, 44, 23, 4, 47],
  ["North East", "Football", 35, 27, 12, 39, 34, 13],
  ["North West", "Football", 23, 4, 41, 35, 9, 47]
];

const formattedData = data.map(row => {

  return [
    [row[0] + ': ' + row[1]],
    row[2],
    row[3],
    row[4],
    row[5],
    row[6],
    row[7]
  ];
});

console.log(formattedData);

score 0 · Answer 4 · answered Aug 18 '18 at 12:14

You could use map method. It takes a callback which is executed for every element. It then returns a new array with the new data in each index. For example:

var data = [
            ["North", "Tennis",37, 25, 11, 9, 42, 13],
            ["East", "Football", 41, 2, 3, 26, 47, 21],
            ["South", "Rugby", 7, 22, 35, 45, 11, 46],
            ["West", "Rugby", 30, 21, 44, 23, 4, 47],
            ["North East", "Football", 35, 27, 12, 39, 34, 13],
            ["North West", "Football", 23, 4, 41, 35, 9, 47]
        ];
        
        
newData = data.map((el, i, arr) => {
  el[0] = `${el[0]}: ${el[1]}`   // reassinging el[0]
  el.splice(1, 1);               // removing 2 array element
 });

Join first two elements and create new array?

4 Answers4