Loop for Javascript internal variable scope problem

Asked

Viewed 199 times

1

My job gerarContatosChamado returns an HTML table formatted with the values it receives from the parameter records, This works properly the table comes all formatted with the right data from all contacts.

The problem happens on the 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 within the entire for 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

  • When you call gerenciarContatosChamado using Javascript inline, any reference to the variable needs to be global, and therefore resposta is out of scope. There is no way you can pass this object without a more radical change in this code.

  • About the formatting of the question, until it is reasonable :) Explain what you could not do that we teach you.

  • Thanks for the quick response. About the formatting, I don’t remember the code and I forgot to mention that there in the reply part.contact.get('variable') the answer is returned correctly, which can then be that it doesn’t work inside the href?

  • You’re welcome. I just didn’t post the same answer (in the field below) because I don’t have time to elaborate a complete solution.

  • That code in href only runs when you click on the link. And then it will look for a variable resposta global, which does not exist, when in fact you wanted a specific response object that you generate during the loop and is out of scope. Then I’ll see if I can give you a way if no one else does. About formatting, the site does not deal well with tabs, if you always use spaces to indent is ok.

  • Try to avoid javascript inline in html, think the solution would be more around.

Show 1 more comment

1 answer

1

The "answer" function is inside a loop, every loop iteration the function is recreated and cannot be accessed outside the loop. You can put her out of the loop. Going deeper, the "answer" function is unnecessary in this case as you could perform the entire procedure in sequence without the need for the function. But I don’t think that’s the problem.

There are other apparent problems that need to be checked, 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 lacks the namespace of your APP and the logic is reversed, you put Ext.create('contatoChamado.Model') should be something like: Ext.create('APPNAMESPACE.model.contatoChamado', {});

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

Other points for you to check:

  • Use Ext.xtemplate to compose html, it is 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.

Browser other questions tagged javascript extjs

You are not signed in. Login or sign up in order to post.