CODEWITHSUNDEEP
javascriptarrays
oak99
oak99

Reputation: 49

Remove commas from arrays located inside an array

I have the following array, containing smaller arrays:

var fruits = [["Bananas", "2"], ["Apples", "4"], ["Oranges", "5"]];

I would like to display them like this, removing the comma inside the smaller arrays and adding a hyphen:

Bananas - 2

Apples - 4

Oranges - 5

I have tried the following, however it's still not working:

var fruits = [
  ["Bananas", "2"],
  ["Apples", "4"],
  ["Oranges", "5"]
];
var fruitsToday = [];
for (i = 0; i < fruits.length; i++) {
  fruitsToday += fruits[i].join(" - ");
}
document.getElementById("today").innerHTML = fruitsToday.join("<br>");

Any assistance would be greatly appreciated!

Upvotes: 2

Views: 84

Answers (6)

Mohsen Alyafei
Mohsen Alyafei

Reputation: 5577

Similar to the below using map() but creating the required new array "fruitsToday" with the new elements. You can then use the new array as you wish.

var fruits = [["Bananas", "2"],  ["Apples", "4"],  ["Oranges", "5"]];
var fruitsToday = [];

fruits.map(function(e) {fruitsToday.push(e[0]+" - "+ e[1]);})

console.log(fruitsToday);

Upvotes: 0

user120242
user120242

Reputation: 15268

Edit to add additional explanation and reading:

Implicit coercion is triggered by the binary + operator, when any operand is a string

You need to use an array and push to it. Using the + operator will coerce the array into a string and concatenate the strings.

var fruits = [["Bananas", "2"], ["Apples", "4"], ["Oranges", "5"]];
var fruitsToday = [];
  for (i=0; i < fruits.length; i++) {
    fruitsToday.push(fruits[i].join(" - "));
  }
  document.getElementById("today").innerHTML = fruitsToday.join("<br>");
<div id="today"></div>

Upvotes: 2

Ele
Ele

Reputation: 33736

The problem is the implicit string concatenation between the array fruitsToday and the array at index i -> fruits[i].

fruitsToday += fruits[i].join(" - ");
            ^

Change that concatenation by the call of function Array.prototype.push

let fruits = [
  ["Bananas", "2"],
  ["Apples", "4"],
  ["Oranges", "5"]
];
let fruitsToday = [];
for (let i = 0; i < fruits.length; i++) {
  fruitsToday.push(fruits[i].join(" - "));
}
document.getElementById("today").innerHTML = fruitsToday.join("<br>");
<div id="today"></div>

Upvotes: 1

Jax-p
Jax-p

Reputation: 8593

Your code works well. Problem is fruitsToday.join("<br>"); because fruitsToday is string and join() works only with array. 

var fruits = [["Bananas", "2"], ["Apples", "4"], ["Oranges", "5"]];
var fruitsToday = [];
for (i=0; i < fruits.length; i++) {
  fruitsToday += (fruits[i].join(" - ") + '<br/>');
}
document.getElementById("today").innerHTML = fruitsToday;
<div id=today></div>

Upvotes: 1

Balastrong
Balastrong

Reputation: 4474

Should be doable in one line :)

var fruits = [["Bananas", "2"], ["Apples", "4"], ["Oranges", "5"]];

document.getElementById("today").innerHTML = fruits.map(f => f.join(" - ")).join("<br>");
<span id="today"><span>

Upvotes: 2

Nina Scholz
Nina Scholz

Reputation: 386883

You could map the joined items and use the array for the output.

var fruits = [["Bananas", "2"], ["Apples", "4"], ["Oranges", "5"]],
    fruitsToday = fruits.map(a => a.join(' - '));

document.getElementById("today").innerHTML = fruitsToday.join('<br>');
<div id="today"></div>

Upvotes: 2

Related Questions