• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

148
Vistas
Cómo imprimir un objeto Java en modal usando jQuery

Estoy tratando de imprimir datos de objetos en modal usando jQuery. Cuando hago clic en el botón, envía el objeto Java a jQuery y luego lo imprime, pero lo imprime en este formato:

Viaje [tid=1, tname=Norte, tplace=Ladhak, tpackage=12000, tfrom=2022-05-21, tto=2022-05-31, lastdate=2021-12-22, tinfo=XYZ]

Quiero acceder a los datos del objeto y mostrarlo.

 <button class="btn btn-primary open" id="${t}" data-toggle="modal" style="color:white;" data-target="#infoModal">more info</button>

Código jQuery:

 < script type = "text/javascript" > $(document).ready(function() { $('.open').click(function() { var obj = $(this).attr('id'); $("#show-data").html(obj); }); }); < /script>
almost 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

  1. Divida sus datos para obtener la forma deseada usando .split(' ') .
  2. Eliminar caracteres innecesarios de los datos.
  3. El bucle interno genera marcado.
  4. Agregue marcado en el div del deseo.

 $('.open').click(function() { var html = ""; var obj = "Trip [tid=1, tname=North, tplace=Ladhak, tpackage=12000, tfrom=2022-05-21, tto=2022-05-31, lastdate=2021-12-22, tinfo=XYZ]"; var data = obj.substr(obj.indexOf(' ') + 1).replace('[', '').replace(']', '').split(' '); $.each(data, function(index, value) { var key = value.split('=')[0]; // format these data on your desire shape var val = value.split('=')[1]; html += '<span class="key">' + key + ' </span>'; html += '<span class="val">' + val + ' </span>'; html += '</br>'; }); $("#show-data").html(html); });
 .key { color: red } .val { color: green }
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="btn btn-primary open" id="${t}" data-toggle="modal" style="color:white;" data-target="#infoModal">more info</button> <div id="show-data"></div>

almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda