text 'Undefined' displayed when try access json list

Question

In one of the jsp pages from my project, I have to work with this json lists:

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"}]}" );

I try read each item of the list this way:

for(var item in obj_tipo.Tipo)
    select.append('<option value="'+item.nome+'">'+item.nome+'</option>');

and

for(var item in obj_campo.Key)
    $("table.cadastro").append('<tr> <td> '+item.nome+' : </td> <td> <input type="text" name="'+item.nome+'" size=20 maxlenght=40> </td> <tr>');

But I am getting the text 'undefined' when I display the page, instead of the corret text, despite the fact that the right amount of itens are being displayed.

Someone knows how to fix that? What the right way to access each item from my json list? the list is well formed, right?

Double quotes in double quotes, object iteration on an array... — Oleg, Apr 08 '14 at 09:36

score 1 · Answer 1 · edited May 23 '17 at 12:13

1

As @Oleg said, it should be more like:

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"}]}' );

I basically just changed the wrapping quotes, to '

Also, you may want to consider looping through the JSON using $.each, if you are using jQuery. See this question here for some clarification: jquery loop on Json data using $.each

edited May 23 '17 at 12:13

Community

1
1

answered Apr 08 '14 at 09:39

Andrew Newby

4,941
6
40
81

Please read http://www.json.org/ on JSON syntax. You cannot omit double quotes around strings inside JSON. – Oleg Apr 08 '14 at 09:50

Oleg · Answer 2 · 2014-04-08T10:25:41.507

1

Using for in on arrays is not a good idea. Either use for (var i = 0; i < arr.length; i++) {... or native forEach or jQuery's each...

var obj = $.parseJSON('{"Tipo":[{...},{...},{...}]}'); // mind the quotes

$.each(obj.Tipo, function (index, item) {
    select.append('<option value="' + item.nome + '">' + item.nome + '</option>');
});

edited Apr 08 '14 at 10:25

answered Apr 08 '14 at 09:43

Oleg

9,341
2
43
58

Satpal · Accepted Answer · 2014-04-08T09:44:58.777

0

Use

for(var item in obj_tipo.Tipo) {
    var nome= obj_tipo.Tipo[item].nome;
    select.append('<option value="'+nome+'">'+ nome +'</option>');
}

instead of

for(var item in obj_tipo.Tipo)
    select.append('<option value="'+item.nome+'">'+item.nome+'</option>');

For more info visit for...in

variable: A different property name is assigned to variable on each iteration.

edited Apr 08 '14 at 09:44

answered Apr 08 '14 at 09:39

Satpal

132,252
13
159
168

Read your own link: "`for..in` should not be used to iterate over an Array where index order is important. Array indexes are just enumerable properties with integer names and are otherwise identical to general Object properties." – Oleg Apr 08 '14 at 09:45
@Oleg, His problem is not index its currently he is getting undefined and If index is required then I would suggest `for (var i = 0; i < arr.length; i++) ` – Satpal Apr 08 '14 at 09:47

score 0 · Answer 4 · answered Apr 08 '14 at 09:43

I don't have any idea about Java language. But you can get the Nome and id field by using below code snippet.

Please try with the below code snippet. Let me know if any concern.

var tipo = obj_tipo.Tipo;

for(var i = 0; i < tipo.Length; i++)
{
    select.append('<option value="'+tipo[i].id+'">'+tipo[i].nome+'</option>');
}

score 0 · Answer 5 · answered Apr 08 '14 at 09:53

The item in your code returns the index of the array. I updated your code to get to a solution. Please find the fiddle here

$("table.cadastro").append('<tr> <td> '+obj_campo.Key[item].nome+' : </td> <td> <input type="text" name="'+obj_campo.Key[item].nome+'" size=20 maxlenght=40> </td> <tr>');

or

for(var item in obj_tipo.Tipo)
    $('select').append('<option value="'+obj_tipo.Tipo[item].nome+'">'+obj_tipo.Tipo[item].nome+'</option>');

text 'Undefined' displayed when try access json list

5 Answers5