How to get a value from a list

Question

I need to take the value generated in the ${stores.nmFrameLocator} field and display the value in Alert: lojaMapa()

<script>
    function lojaMapa() {
        var tc = document.getElementById("dados-frame-resultado");
        alert(tc);
    }
</script>
<c:forEach items="${listaLojas}" var="lojas">
    <div class="tabela-dados-resultado" align="center">
        <div class="dados-filial-resultado"><c:out value="${lojas.cdFilial}" /></div>
        <div class="dados-endereco-resultado"><c:out value="${lojas.dsEndereco}" /></div>
        <div class="dados-bairro-resultado"><c:out value="${lojas.dsBairro}" /></div>
        <div class="dados-cidade-resultado"><c:out value="${lojas.dsCidade}" /></div>
        <div class="dados-cep-resultado"><c:out value="${lojas.nrCep}"/></div>
        <div class="dados-btn-resultado"><a id="teste" href="javascript:lojaMapa();">Ver no mapa</a></div>
        <div id="dados-frame-resultado"><c:out value="${lojas.nmFrameLocator}"/></div> 
    </div>      
</c:forEach>

The code is generated through the following HQL

public List<FilialComplementoTO> findLojas(String dsBairro, String dsCidade, String sgEstado) throws IntegrationException {
    List<Object[]> listaLojas;
    List<FilialComplementoTO> listOk;
    System.out.println(dsBairro);

    try {
        Session session = InitSessionFactory.getInstance().getCurrentSession();
        StringBuffer hql = new StringBuffer();
        hql.append(" select e.cdFilial, e.dsEndereco, e.dsBairro, e.dsCidade, e.nrCep, e.nmFrameLocator from FilialComplementoTO e");
        hql.append(" where lower(e.dsBairro) = lower(:dsBairro)");
        hql.append(" and lower(e.dsCidade) = lower(:dsCidade)");
        Query objQuery = session.createQuery(hql.toString());
        objQuery.setString("dsBairro", dsBairro);
        objQuery.setString("dsCidade", dsCidade);
        listaLojas = (List<Object[]>) objQuery.list();
        listOk = new ArrayList<FilialComplementoTO>();

        for (Object[] obj: listaLojas) {
            FilialComplementoTO comple = new FilialComplementoTO();
            comple.setCdFilial(obj[0]!=null?Integer.parseInt(obj[0].toString()):null);
            comple.setDsEndereco(obj[1].toString());
            comple.setDsBairro(obj[2].toString());
            comple.setDsCidade(obj[3].toString());
            comple.setNrCep(obj[4].toString());
            comple.setNmFrameLocator(obj[5].toString());
            listOk.add(comple);
        }      
    } catch (Exception e) {
      Logger.getLogger(this.getClass().getName()).error(e.getMessage());
      throw new IntegrationException(e);
    }
    return listOk;
}

How could you get the list value?

Answer 1

First, don’t use the attribute id in repeating elements. In this case, it is best to use a specific value in the attribute class as you have done in the other elements.

Then, you should pass to your Javascript function which link was clicked, so that you can know relatively which is the result where to look for the values.

Example

I made a very simple example of how it would be using jQuery.

I assume the HTML generated in the browser is something like this:

<div class="tabela-dados-resultado" align="center">
    <div class="dados-filial-resultado">filial 1</div>
    <div class="dados-endereco-resultado">endereço 1</div>
    <div class="dados-bairro-resultado">bairro 1</div>
    <div class="dados-cidade-resultado">cidade 1</div>
    <div class="dados-cep-resultado">cep 1</div>
    <div class="dados-btn-resultado"><a href="#">Ver no mapa</a></div>
    <div class="dados-frame-resultado">frame resultado 1</div> 
</div> 
<div class="tabela-dados-resultado" align="center">
    <div class="dados-filial-resultado">filial 21</div>
    <div class="dados-endereco-resultado">endereço 1</div>
    <div class="dados-bairro-resulta do">bairro 2</div>
    <div class="dados-cidade-resultado">cidade 2</div>
    <div class="dados-cep-resultado">cep 2</div>
    <div class="dados-btn-resultado"><a href="#">Ver no mapa</a></div>
    <div class="dados-frame-resultado">frame resultado 2</div> 
</div> 

Then you can use the following code:

//executa apenas uma vez após a página ser carregada
$(function() {

    //adicionar manipulador de evento nos links dos resultados
    $('.dados-btn-resultado a').click(function(e) {

        //o this refere-se ao link
        //closest encontra o elemento pai conforme seletor
        var res = $(this).closest('.tabela-dados-resultado');

        //recupera conteúdo do item dentro daquele resultado
        var frameResultado = res.find('.dados-frame-resultado').text();

        //mostra valor
        alert(frameResultado);

        //evita que o clique no link execute alguma ação
        e.preventDefault();

    });

});

Demo at Jsfiddle

Example using data()

Another approach, which I consider more "clean" and organized, is to store the values that you intend to recover in Javascript in attributes data-*.

See this example HTML:

<div class="tabela-dados-resultado" align="center">
    <div class="dados-filial-resultado">filial 1</div>
    <div class="dados-endereco-resultado">endereço 1</div>
    <div class="dados-bairro-resultado">bairro 1</div>
    <div class="dados-cidade-resultado">cidade 1</div>
    <div class="dados-cep-resultado">cep 1</div>
    <div class="dados-btn-resultado"><a href="#" data-meuatributo="valor 1">Ver no mapa</a></div>
    <div class="dados-frame-resultado">frame resultado 1</div> 
</div> 
<div class="tabela-dados-resultado" align="center">
    <div class="dados-filial-resultado">filial 21</div>
    <div class="dados-endereco-resultado">endereço 1</div>
    <div class="dados-bairro-resulta do">bairro 2</div>
    <div class="dados-cidade-resultado">cidade 2</div>
    <div class="dados-cep-resultado">cep 2</div>
    <div class="dados-btn-resultado"><a href="#" data-meuatributo="valor 2">Ver no mapa</a></div>
    <div class="dados-frame-resultado">frame resultado 2</div> 
</div> 

And then your Javascript code would be simpler:

$(function() {

    //adicionar manipulador de evento nos links dos resultados
    $('.dados-btn-resultado a').click(function(e) {

        //o this refere-se ao link
        //data() retorna o valor de uma tributo "data-*"
        var valorAtributo = $(this).data('meuatributo');

        //mostra valor
        alert(valorAtributo);

        //evita que o clique no link execute alguma ação
        e.preventDefault();

    });

});

Demo at Jsfiddle