I want to give each of my array element a number

Question

I have this code, a problem with is that it lists numbers for individual array elements instead of a whole array.

I did try other methods including .map but I failed.

let names = 'Bilbo, Gandalf, Nazgul, Bob, Grim, Laniakea, Dzevid, Levan, George, What';

let arr = names.split(', ');

for (let name of arr) {
for(let i =1; i < arr.length; i++)
  document.write( i + ` A message to ${name}.` + `<br>` ); // A message to Bilbo  (and other names)

}

1. My results with this code is this:

   1 A message to Bilbo.
   2 A message to Bilbo.
   3 A message to Bilbo.
   4 A message to Bilbo.
   5 A message to Bilbo.
   6 A message to Bilbo.
   7 A message to Bilbo.
   8 A message to Bilbo.
   9 A message to Bilbo.
   1 A message to Gandalf.
   2 A message to Gandalf.
   3 A message to Gandalf.
   4 A message to Gandalf.
   5 A message to Gandalf.
   6 A message to Gandalf.
   7 A message to Gandalf.
   8 A message to Gandalf.
   9 A message to Gandalf.
   1 A message to Nazgul.
   2 A message to Nazgul.
   3 A message to Nazgul.
   4 A message to Nazgul.
   5 A message to Nazgul.
   6 A message to Nazgul.
   7 A message to Nazgul.
   8 A message to Nazgul.
   9 A message to Nazgul.
   1 A message to Bob.
   2 A message to Bob.
   3 A message to Bob.
   4 A message to Bob.
   5 A message to Bob.
   6 A message to Bob.
   7 A message to Bob.
   8 A message to Bob.
   9 A message to Bob.
   1 A message to Grim.
   2 A message to Grim.
   3 A message to Grim.
   4 A message to Grim.
   5 A message to Grim.
   6 A message to Grim.
   7 A message to Grim.
   8 A message to Grim.
   9 A message to Grim.
   1 A message to Laniakea.
   2 A message to Laniakea.
   3 A message to Laniakea.
   4 A message to Laniakea.
   5 A message to Laniakea.
   6 A message to Laniakea.
   7 A message to Laniakea.
   8 A message to Laniakea.
   9 A message to Laniakea.
   1 A message to Dzevid.
   2 A message to Dzevid.
   3 A message to Dzevid.
   4 A message to Dzevid.
   5 A message to Dzevid.
   6 A message to Dzevid.
   7 A message to Dzevid.
   8 A message to Dzevid.
   9 A message to Dzevid.
   1 A message to Levan.
   2 A message to Levan.
   3 A message to Levan.
   4 A message to Levan.
   5 A message to Levan.
   6 A message to Levan.
   7 A message to Levan.
   8 A message to Levan.
   9 A message to Levan.
   1 A message to George.
   2 A message to George.
   3 A message to George.
   4 A message to George.
   5 A message to George.
   6 A message to George.
   7 A message to George.
   8 A message to George.
   9 A message to George.
   1 A message to What.
   2 A message to What.
   3 A message to What.
   4 A message to What.
   5 A message to What.
   6 A message to What.
   7 A message to What.
   8 A message to What.
   9 A message to What.
   

I want it to work in the following way:

    1 A message to Bilbo
    2 A message to Gandalf
    3 A message to Nazgul
    4 A message to Bob
    5 A message to Grim
    6 A message to Laniakea
    7 A message to Dzevid
    8 A message to Levan
    9 A message to George
    10 A message to what

Answer 1

Actually there was no need to add for (let name of arr) { .... }. You can just remove that line. Other than that, you need to start for loop from i = 0, as an array starts from index 0,

let names = 'Bilbo, Gandalf, Nazgul, Bob, Grim, Laniakea, Dzevid, Levan, George, What';
let arr = names.split(', '); 

for(let i = 0; i < arr.length; i++){
  document.write( `${i+1}`  + ` A message to ${arr[i]}.` + `<br>` );
}

Answer 2

You can use the map for looping and you do not need second loop because arr is one-dimensional array

let names = 'Bilbo, Gandalf, Nazgul, Bob, Grim, Laniakea, Dzevid, Levan, George, What';

let arr = names.split(', ');



arr.map((d, i)=>{
  document.write( i+1 + ` A message to ${d}.` + `<br>` ); // A message to Bilbo  (and other names)
})

Answer 3

Not sure what you are trying to achieve. But here is the code which can help.

let names = 'Bilbo, Gandalf, Nazgul, Bob, Grim, Laniakea, Dzevid, Levan, George, What';\
names = names.split(',');

names.forEach((name, index) => {
    document.write(`${index} A message to ${name.trim()}`);
})

In this example we firstly transform that long string into array of names. Then using simple forEach handle each name. Note that I use name.trim() for removing unnecessary spaces left after splitting.

Answer 4

Why do you use a second loop ? just set a counter like

let names = 'Bilbo, Gandalf, Nazgul, Bob, Grim, Laniakea, Dzevid, Levan, George, What';

let arr = names.split(', ');
let count = 1;
for (let name of arr) {
 document.write( count + ` A message to ${name}.` + `<br>` );
 count++;
}

Or

for (i = 1; i < arr.length; i++) { 
    document.write( i + ` A message to ${name}.` + `<br>` );
}