How to repeat part of JavaScript

Question

I want to create a loop for part of my JavaScript code, I tried several methods, but they only return i=0 , my js code is

    function format ( a ) {
    var i;
    
    for (i = 0; i <a.hr.length; i++) {

    return '<table cellpadding="5" cellspacing="0" border="0" class="table">'+
    '<thead>'+
        '<tr>'+
            '<th data-sortable="true">Full name:</th>'+
            '<th>Extension number:</th>'+
            '<th>Extra info:</th>'+
            '<th>Extra info:</th>'+
        '</tr>'+
    '</thead>'+
    '<tbody>'+
        '<tr>'+
        '<td>'+a.hr[i].position+'</td>'+
        '<td>'+a.hr[i].salary+'</td>'+
        '<td>'+a.hr[i].start_date+'</td>'+
        '<td>'+a.hr[i].position+'</td>'+
        '</tr>'+
    '</tbody>'+
    '</table>';
    }
}

also I try:

            function format ( a ) {
        var i;
        
        for (i = 0; i <a.hr.length; i++) {
    
        return '<table cellpadding="5" cellspacing="0" border="0" class="table">'+
        '<thead>'+
            '<tr>'+
                '<th data-sortable="true">Full name:</th>'+
                '<th>Extension number:</th>'+
                '<th>Extra info:</th>'+
                '<th>Extra info:</th>'+
            '</tr>'+
        '</thead>'+
        '<tbody>'+
for (i = 0; i <a.hre.length; i++) {
            '<tr>'+
            '<td>'+a.hr[i].position+'</td>'+
            '<td>'+a.hr[i].salary+'</td>'+
            '<td>'+a.hr[i].start_date+'</td>'+
            '<td>'+a.hr[i].position+'</td>'+
            '</tr>'+
}
        '</tbody>'+
        '</table>';
        
    }

both methods return just i=0 , even I use for (i = 0; i <4 ; i++) { but still I get i=0. Would you please give me some tips in order to solve this problem?

I use datatables.net and just a parameter to collect the key in JSON file. and it can be anything. datatables.net/examples/server_side/row_details — Sallar Rabiei
– Sallar Rabiei, Commented Nov 6, 2020 at 7:45

audzzy · Accepted Answer · 2020-11-06 07:31:44Z

You return from the function in the for loop, so it never gets to the second iteration.. Try creating a variable outside the loop, appending to it in the loop and returning after:

function format ( a ) {
    var i;
    let res = '<table cellpadding="5" cellspacing="0" border="0" class="table">'+
    '<thead>'+
        '<tr>'+
            '<th data-sortable="true">Full name:</th>'+
            '<th>Extension number:</th>'+
            '<th>Extra info:</th>'+
            '<th>Extra info:</th>'+
        '</tr>'+
    '</thead>'+
    '<tbody>';

    for (i = 0; i <a.hr.length; i++) {
        res +=
        '<tr>'+
        '<td>'+a.hr[i].position+'</td>'+
        '<td>'+a.hr[i].salary+'</td>'+
        '<td>'+a.hr[i].start_date+'</td>'+
        '<td>'+a.hr[i].position+'</td>'+
        '</tr>';
    
    }
    res += '</tbody>'+
    '</table>';
    return res;
}

Wakeel · Accepted Answer · 2020-11-06 07:25:53Z

1

The problem is that you use a return in the middle of your loop and this means your loop access the first element only. To solve this you can do the following:

function format ( a ) { 
    var i, result = ''; 
    for (i = 0; i <a.hr.length; i++) { 
        result += '<table cellpadding="5" cellspacing="0"  bo'...
    }
    return result;
}

answered Nov 6, 2020 at 7:25

Wakeel

5,2602 gold badges16 silver badges14 bronze badges

Comments

Sarun UK · Accepted Answer · 2020-11-06 07:29:32Z

1

Simple solution is use map instead of for-loop.

function format(a) {
      return a.hr.map(val => 
    
       '<table cellpadding="5" cellspacing="0" border="0" class="table">'+
        '<thead>'+
            '<tr>'+
                '<th data-sortable="true">Full name:</th>'+
                '<th>Extension number:</th>'+
                '<th>Extra info:</th>'+
                '<th>Extra info:</th>'+
            '</tr>'+
        '</thead>'+
        '<tbody>'+
            '<tr>'+
            '<td>'+val.position+'</td>'+
            '<td>'+val.salary+'</td>'+
            '<td>'+val.start_date+'</td>'+
            '<td>'+val.position+'</td>'+
            '</tr>'+
        '</tbody>'+
        '</table>');     
}

const a = {
hr: [{position: 2, salary: 2000, start_date: '10/10/2020'},{position: 2, salary: 2000, start_date: '10/09/2020' }]
}
        
document.getElementById('root').innerHTML = format(a).join('');

<div id='root'>

</div>

edited Nov 6, 2020 at 7:29

answered Nov 6, 2020 at 7:14

Sarun UK

6,7667 gold badges26 silver badges51 bronze badges

1 Comment

Sallar Rabiei Over a year ago

Thanks UKS, I use datatables.net and I had to use function format ( a ) {}, I just need to repeat <tr> and I can not remove function format ( a ) {}

Abhi · Accepted Answer · 2020-11-06 07:32:51Z

I guess this is what you want. Use string concatenation, until all your HTML is formed, then return the final HTML string.

function format ( a ) {
    var str = "";

    for (var i = 0; i <a.hr.length; i++) {
      str += '<table cellpadding="5" cellspacing="0" border="0" class="table">'+
        '<thead>'+
          '<tr>'+
            '<th data-sortable="true">Full name:</th>'+
            '<th>Extension number:</th>'+
            '<th>Extra info:</th>'+
            '<th>Extra info:</th>'+
          '</tr>'+
        '</thead>'+
        '<tbody>'+
          '<tr>'+
            '<td>'+a.hr[i].position+'</td>'+
            '<td>'+a.hr[i].salary+'</td>'+
            '<td>'+a.hr[i].start_date+'</td>'+
            '<td>'+a.hr[i].position+'</td>'+
          '</tr>'+
        '</tbody>'+
      '</table>';
    }

    return str;
}

NOTE: If you return inside the loop, then it will only run once in your case, because that will be considered as return value of enclosing function.

Collectives™ on Stack Overflow

How to repeat part of JavaScript

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related