Json string aren't being displayed on my jsp page

Question

In one of the pages from my project, I have this jquery code, which receive two json strings and should add some fields to my form:

<script>
$("document").ready(function(){
    var obj_tipo = jQuery.parseJSON( "${lista_tipos}" );
    var obj_campo = jQuery.parseJSON( "${lista_campos}" );

    var newRow = $('<tr>');
    col_1 = '<td> Tipo: </td>';
    col_2 = '<td> <select name="tipo"> </select> </td> </tr>';
    for(var nome in obj_tipo)
        col_2.append('<option value="'+nome+'">'+nome+'</option>');

    newRow.append(col_1);
    newRow.append(col_2);

    $("table.cadastro").append(newRow);

    col_3 = '';
    for(var nome in obj_campo)
        col_3 += '<tr> <td> '+nome+' : </td> <td> <input type="text" name="'+nome+'" value="'+nome+'" size=20 maxlenght=40> </td> <tr>';

    $("table.cadastro").append(col_3);
});
</script>

But nothing is being displayed in my page. I check the developer tool from Chrome, and this is being read by the browser:

<script>
$("document").ready(function(){
    var obj_tipo = jQuery.parseJSON( "{"Tipo":[{"id":3,"nome":"gerente"},{"id":4,"nome":"supervisor"},{"id":5,"nome":"analista"},{"id":6,"nome":"tecnico"},{"id":7,"nome":"secretaria"},{"id":8,"nome":"seguranca"}]}" );
    var obj_campo = jQuery.parseJSON( "{"Key":[{"id":1,"nome":"e-mail"},{"id":2,"nome":"cidade"}]}" );

    var newRow = $('<tr>');
    col_1 = '<td> Tipo: </td>';
    col_2 = '<td> <select name="tipo"> </select> </td> </tr>';
    for(var nome in obj_tipo)
        col_2.append('<option value="'+nome+'">'+nome+'</option>');

    newRow.append(col_1);
    newRow.append(col_2);

    $("table.cadastro").append(newRow);

    col_3 = '';
    for(var nome in obj_campo)
        col_3 += '<tr> <td> '+nome+' : </td> <td> <input type="text" name="'+nome+'" value="'+nome+'" size=20 maxlenght=40> </td> <tr>';

    $("table.cadastro").append(col_3);
});
</script>

Someone can point me What's wrong with this code?

ps.: the full code for this page is this:

https://github.com/klebermo/webapp_horario_livre/blob/master/WebContent/WEB-INF/jsp/usuario/cadastra.jsp

the json string is sent to page from the method 'cadastra' of this class:

https://github.com/klebermo/webapp_horario_livre/blob/master/src/com/horariolivre/controller/UsuarioController.java

Satpal · Accepted Answer · 2014-04-08 08:59:49Z

3

You need to use document instead of "document". Read docs.
Also wrap your json string in ''

Use

$(document).ready(function(){
   var obj_tipo = jQuery.parseJSON('${lista_tipos}' );
   var obj_campo = jQuery.parseJSON( '${lista_campos}' );
 ......

answered Apr 8, 2014 at 8:59

Satpal

134k13 gold badges168 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Anthony Grist Over a year ago

It may be useful to explain why they need to use single quotes rather than double quotes for wrapping the JSON string, just in case it's not immediately obvious.

Kleber Mota Over a year ago

thanks by the answer. I did the fixes you suggest, but the fields still don't be displayed on my page. maybe there is some error in the part of the code where I append the html tags?

Satpal Over a year ago

@KleberMota, See Anthony Grist answer He has very well pointed out mistakes which I missed

Anthony Grist · Accepted Answer · 2014-04-08 09:07:17Z

There's some major issues with this section of the code (in addition to the issues in Satpal's answer):

var newRow = $('<tr>');
col_1 = '<td> Tipo: </td>';
col_2 = '<td> <select name="tipo"> </select> </td> </tr>';
for(var nome in obj_tipo)
    col_2.append('<option value="'+nome+'">'+nome+'</option>');

newRow.append(col_1);
newRow.append(col_2);

$("table.cadastro").append(newRow);

You start off well, creating a jQuery object containing a brand new <tr> element inside it. That next line just initialises a variable with a string, which is ok so far.

That next line also initialises a variable col_2 with a string, which is technically okay. Except next you try to call .append() (a jQuery function) on it, even though it's not a jQuery object. Even if it were, you'd be appending them to the <td>, not the <select>, which is what you actually want. You also have a closing </tr> tag in col_2, which is incorrect; you're not working with HTML strings when you use .append() (this seems to be a common misconception), you're working with actual DOM elements - that <tr> is already closed the moment it's created.

It should probably look something more like this:

var newRow = $('<tr>');
col_1 = '<td> Tipo: </td>';
col_2 = $('<td></td>');
var select = $('<select name="tipo">');
for(var nome in obj_tipo)
    select.append('<option value="'+nome+'">'+nome+'</option>');

select.appendTo(col_2);
newRow.append(col_1);
newRow.append(col_2);

$("table.cadastro").append(newRow);

Collectives™ on Stack Overflow

Json string aren't being displayed on my jsp page

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related