javascript response does not appear on the page, only on the console

Question

Good night,

I’m using codeigniter, I’m implementing the pagseguro api, and I’m using a javascript to set the session id and call the payment methods, so far it’s all working, only in one function listMeiosPag() in javascript, it brings the result only in console.log, if I have it show the result in a page div, it simply does not show, nor does Alert display tb, but if I put Alert right in the page script it displays, I do not know how to solve it, if anyone can help me thank.

My javascript is like this:

   var pg = function (){


             var setSessionId = function(){

                  $.ajax({
                     url: 'http://[::1]/teste/pg_session_id',
                     dataType: 'json',
                     success: function(res){

                        if (res.erro == 0) {
                           var id_sessao = res.id_sessao;
                           PagSeguroDirectPayment.setSessionId(id_sessao);
                        } else {
                           alert('Erro: '+ res.erro +' '+res.msg);
                        }
                     }

                  });
             }



                   //Mostrar Métodos do pagamento
                   function listarMeiosPag(){

                      $('.btn-pagamento').on('click', function(e){

                         PagSeguroDirectPayment.getPaymentMethods({
                         amount: 500.00,
                         sucess:function(res){
                            if (res.erro == 0) {

                              $.each(res.paymentMethods.CREDIT_CARD.options, function(i, obj){
                               console.log(res); //aqui exibe a respota certa
                           $('meio-pag').append("<span>"+ obj.name +"</span>"); </div>');
                          //na div da pagina fica em branco a resposta
                            });

                      /*   console.log(res);*/
                            } else {
                               alert('Erro: '+ res.erro +' '+res.msg);
                            }
                         },
                         error: function(res){
                          console.log(res);
                         }
                      });
                   });
                }



             return {
                 init:function(){
                   listarMeiosPag()
                  setSessionId();
                 }
             }

          }();

          jQuery(document).ready(function(){
             pg.init();
          });   

My page looks like this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--Chama o  jQuery -->
<script src="<?php echo base_url('public/js/pagamentos.js') ?>"></script> 

//aqui é o botão que chama os métodos de pagamento
<button class="btn btn-primary btn-pagamento"> Pagar </button>

//aqui era a div que ele deveria exibir a resposta
 <div class="meio-pag"> </div>

The function listMeiosPag, should show the result in the div, but it does not work, and I do not know the pq, if you can help me thank.

Answer 1

If the

console.log(res);

Displays the right answer, "res" is the answer, so:

$('meio-pag').append("<span>"+ res +"</span>"); </div>');

Just watch out for the possibility of res be an object and need the property, type, res.qualquerCoisa

Answer 2

Hi @Ragnar

I was seeing that you are assigning in the function a parameter "res", it is an object? If yes, where is being called?

Within the structure of its code, the res is behaving like an object that has attributes, check whether this function is treating correctly or whether the parameter received by the function is actually receiving an object with the properties it is trying to access.

res = { 
erro: "algum erro",
msg: "alguma mensagem de erro
 }

If res.error gets string, then in comparison if(res.erro == 0) should be some other validation as if(res.erro == "") which would indicate that the error attribute is empty. If it is to count, some get method should be used.

function(res){

                        if (res.erro == 0) {
                           var id_sessao = res.id_sessao;
                           PagSeguroDirectPayment.setSessionId(id_sessao);
                        } else {
                           alert('Erro: '+ res.erro +' '+res.msg);
                        }
                     }

Make sure you are accessing the properties correctly. This parameter apparently seems sufficient for what you are needing.

if (res.erro == 0) {

   $.each(res.paymentMethods.CREDIT_CARD.options, function(i, obj){
         console.log(res); //aqui exibe a respota certa
         $('meio-pag').append("<span>"+ obj.name +"</span>"); </div>');
         //na div da pagina fica em branco a resposta
   });

You could try putting $('meio-pag').append("<span>"+ res.PROPRIEDADE.name +"</span>"); </div>');