Can't parse array of JSON objects

Question

I damaged my brain by parse of JSON objects. I have this js:

function get_cities(id) 
 {
    $('#def').hide();
    $('#cities').html('');
    $.get('/emprego/index.php/add/get_cities/'+id, null, onAjaxSuccess, "JSON" );
}
function onAjaxSuccess(data)
{
  $.each(data, function(key, val)
  {
    data.push("<option value='"+key+"'>"+val+"</option>");
  });
  $('#cities').append(data.join(''));
}

This code returns:

<select id="cities" name="cities">
[object Object],[object Object]
<option value="0">[object Object],[object Object]</option>
</select>

But server response is (i mean response of function with parameter):

[[{"id":"1","name":"Lisboa"},{"id":"2","name":"Cascais"}]]

How to parse this response to this html:

<select id="cities" name="cities">
<option value="1">Lisboa</option>
<option value="2">Cascais</option>
</select>

Thanks!

Your issue is the double enclosed array(s) "[[]]", seems like it should be "[]". Remove one set of outside array brackets and all your code starts working, or use mVChr solution below. — Zachary
– Zachary, Commented Jun 9, 2011 at 22:40

mVChr · Accepted Answer · 2011-06-09 22:36:52Z

2

Since data is a double enclosed array, you'll have to run your $.each on data[0]. You'll also want to push the results to a holder array instead of data itself. Then you'll want to pass the appropriate key of the val parameter:

function onAjaxSuccess(data) {
    var holder = [];
    $.each(data[0], function(key, val) {
        holder.push("<option value='" + val.id + "'>" + val.name + "</option>");
    });
    $('#cities').append(holder.join(''));
}

See example →

answered Jun 9, 2011 at 22:36

mVChr

50.3k11 gold badges111 silver badges105 bronze badges

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

1 Comment

metamarket Over a year ago

Thank you very much! Holder solved problem. Code works just perfect.

bdparrish · Accepted Answer · 2011-06-09 22:34:09Z

0

first off, you are trying to iterate over the data array, but at the same time in each iteration you are trying to push a new item onto the data (array i am guessing?). this is a no go.

var newOptions = new Array();

$.each(data, function(key, val) {
    newOptions.push("<option value='" + key + "'>" + val + "</option");
});

see what that does for you.

answered Jun 9, 2011 at 22:34

bdparrish

2,7844 gold badges40 silver badges62 bronze badges

Comments

guzart · Accepted Answer · 2011-06-09 22:38:15Z

0

If what you pasted for the server response is accurate, it means that you have two arrays.

So you should do

var result = [];
$.each(data[0], function(opt) { // Get the info from the array inside the array
  // opt contains {id:1, name:'Lisboa'}
  result.push('<option value="' + opt.id + '">' + opt.name + '</option>');
});
$('#cities').append(result.join(''));

And finally, store the process info in a different array (result).

answered Jun 9, 2011 at 22:38

guzart

3,73030 silver badges23 bronze badges

Comments

c-smile · Accepted Answer · 2011-06-09 22:40:12Z

0

I believe that server response is wrong, too many '[' and ']'.

Should be like this:

[{"id":"1","name":"Lisboa"},{"id":"2","name":"Cascais"}]

And this line:

data.push("<option value='"+key+"'>"+val+"</option>");

is also wrong, val there is an object. Should be:

data.push("<option value='"+key+"'>"+val.name+"</option>");

answered Jun 9, 2011 at 22:40

c-smile

27.6k8 gold badges66 silver badges91 bronze badges

Collectives™ on Stack Overflow

Can't parse array of JSON objects

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related