Problem with scope of internal loop variables for JavaScript

Question

Problem with scope of internal loop variables for JavaScript

Navigation

#1 by (1 votes)

1

My function gerarContatosChamado returns an HTML table formatted with the values it receives from parameter records , this works correctly the table is all formatted with the correct data of all the contacts.

The problem happens at line href where I call the function: gerenciarContatosChamado(\'atualizar\',resposta.contato,\'table\')

The console claims that the response variable is undefined, which is strange because I can use it inside the entire after it is returned from the immediate execution function.

The code:

function gerarContatosChamado(records)
{
var contatosTable = '';
    contatosTable += 
    '<tr>'+
    '<td>'+
        'Nome'+
    '</td>'+
    '<td style="text-align:center !important;">'+
        'Telefones'+
    '</td>'+
    '<td style="text-align:center !important;">'+
        'Email'+
    '</td>'+
    '<td style="text-align:center !important;">'+
        'Horários para contato'+
    '</td>'+
    '<td style="text-align:center !important;">'+
        'Opções do contato'+
    '</td>'+
'</tr>';

    var Contatos = records.get('Contatos');
    for (var i=0;i < Contatos.length;i++)
    { 
        var resposta = function(j)
        {
            var objeto = {};
            var contatoChamadoModel = Ext.create('contatoChamado.Model', {
            idContato : records.get('Contatos')[j].idContato,
            nomeContato : records.get('Contatos')[j].nomeContato,
            telefonesContato  : records.get('Contatos')[j].telefonesContato,
            emailContato: records.get('Contatos')[j].emailContato, 
            horariosContato: records.get('Contatos')[j].horariosContato,
            tipoHorarioContato: records.get('Contatos')[j].tipoHorarioContato      
            });
            objeto.contato = contatoChamadoModel;
            return objeto;
        }(i);

//  protocoloChamado: records.get('protocoloChamado')


        //var aux_TelefonesContato=itensContato[1].split(",");
        //var aux_TiTleTelefonesContato='Telefones: \n';
    //  var horariosContato;
    //  if(contato.tipoHorarioContato == 1)
        //horariosContato = '24 horas';
        //else if (contato.tipoHorarioContato == 2)
        //horariosContato = 'horário comercial';
        //else
        //horariosContato = 'personalizado: '+contato.horariosContato;



        contatosTable +=
        '<tr>'+
        '<td>'+
            resposta.contato.get('nomeContato')+
        '</td>'+
        '<td>'+
            resposta.contato.get('telefonesContato')+
        '</td>'+
        '<td>'+
            resposta.contato.get('emailContato')+
       '</td>'+
        '<td style="text-align:center !important">'+
            resposta.contato.get('horariosContato')+
        '</td>'+
        '<td style="text-align:center !important">'+
            '<a href="javascript:gerenciarContatosChamado(\'atualizar\',resposta.contato,\'table\')">Modificar</a> <img src="../extjs/shared/icons/fam/user_edit.png"> <a href="javascript:void(0)"'+ 
        '</td>'+
    '</tr>';
    }

    return '<div class="CSSTableGenerator" >'+
            '<table >'+
               '<tr>'+
                    '<td colspan=5>'+
                        'Contatos'+
                    '</td>'+                        
                '</tr>'+
                contatosTable
            + '</table>'+
        '</div>';

}

javascript extjs

asked by anonymous 15.05.2014 / 16:01

1 answer

How to integrate SlmQueueSqs and SlmMail into a ZF2 application? jQuery Mobile: page events

score 1 · Answer 1

The "response" function is inside a loop, every loop iteration of the function is recreated and can not be accessed outside the loop. You can put it out of the loop. Going deeper, the "answer" function is unnecessary in this case because you could execute the entire procedure in sequence without the need for the function. But I do not think this is the problem.

There are other apparent issues that need to be verified, I noticed that you are using ExtJS (I also use this excellent framework). I noticed that you are creating the model but in the creation the namespace of your APP is missing and the logic is reversed, you put Ext.create('contatoChamado.Model') should be something like: Ext.create('APPNAMESPACE.model.contatoChamado', {});

Another thing var Contatos = records.get('Contatos'); returns a contact only, not a list, the loop does not make sense next. Use the filter instead of get.

Other points to check:

Use Ext.xtemplate to compose html, it gets much better and efficient.
Use the loops provided by EXT, (store.for_each) they are optimized for stores.
Separate pieces of code to improve reading.

Finally, I suggest you review the ExtJS documentation on models and stores.