如何仅在循环的第一次迭代中插入字符串？

Question

Okay so I have this array of objects which are dynamic. It can have 100 objects inside or only one . I have been rendering html from server side by iterating through the array. That part works fine but what I want to do is I want to insert a piece of string to the first iteration only. Which means I want the value of power to be in the first iteration, which is Steve Rogers and I want the value of power to be in the first td just before the anchor tag.

Please note again that arr can have any amount of objects.

Here's the code:

const arr = [ 
    {
        "name": 'Steve Rogers',
        "age": 90,
        "bio": 'https://www.boomboom.com'
    }, 
    {
        "name": 'Natasha Romanoff',
        "age": 30,
        "bio": 'https://www.bambam.com'
    }
];

const power = 'Super-Strength <br><br>';

const arrMap = arr.map(el => {
    return `
        <td>
            <a href="${el.bio}">Bio</a>
        </td>
        <td>${el.name}</td>
        <td>${el.age}</td>
    `;
});

Expected result is an array of two chunk of strings:

[
  '<td>
       Power: Super-Strength <br><br>
       <a href="https://www.boomboom.com">Bio</a>
   </td>
   <td>Steve Rogers</td>
   <td>90</td>',

   '<td><a href="https://www.bambam.com">Bio</a></td>
   <td>Natasha Romanoff</td>
   <td>30</td>'
]

Answer 1

Here you go:

 var arr = [ { "name": 'Steve Rogers', "age": 90, "bio": 'https://www.boomboom.com' }, { "name": 'Natasha Romanoff', "age": 30, "bio": 'https://www.bambam.com' } ]; var power = 'Super-Strength <br><br>'; var arrMap = arr.map((el,i) => { return `<td>${i==0 ? "Power: "+power : ""}<a href="${el.bio}">Bio</a></td><td>${el.name}</td><td>${el.age}</td>`; }); console.log(arrMap)

Answer 2

You just need pass index parameter to Array.prototype.map as follows:

 const arr = [ { "name": 'Steve Rogers', "age": 90, "bio": 'https://www.boomboom.com' }, { "name": 'Natasha Romanoff', "age": 30, "bio": 'https://www.bambam.com' } ]; const power = 'Super-Strength <br><br>'; const arrMap = arr.map((el, index) => { return ` <td> ${index === 0 ? "Power: " + power : ""}<a href="${el.bio}">Bio</a> </td> <td>${el.name}</td> <td>${el.age}</td> `; });