0

I'm doing Android PhoneGap project in my company. I have a JSON file and want to get it into my HTML select box. As I am still newbie, I haven't understand about JSON parsing mostly.

Here's my JSON File (city.json) :

[{"CityID":1,"CityName":"Magelang"},{"CityID":2,"CityName":"Jayapura"},{"CityID":3,"CityName":"Aceh"}]

I really didn't know whether it's needed to parsed or not. I have followed RaYell answer in this thread. Jquery getJSON populate select menu question

So, I code these to populate the result into the option in select box.

$.getJSON('city.json', function(data){
var html = '';
var len = data.length;
for (var i = 0; i< len; i++) {
    html += '<option value="' + data[i].CityID + '">' + data[i].CityName + '</option>';
}
$('#city').append(html);
});

But it didn't worked on my code. My select box has none options :( Any solutions? Thanks before.

Community
  • 1
  • 1
eldy.agustius
  • 1
  • 2

2 Answers2

0

Try doing $('#city').html(html); to see what the error is:

EDIT: Add this to the end of the $.getJSON call:

    $(document).ready(function(){
        $.getJSON(. . .).fail(function( jqxhr, textStatus, error ) {
             var err = textStatus + ', ' + error;
             alert( "Request Failed: " + err);
             });
    });
TheDude
  • 3,796
  • 2
  • 28
  • 51
  • still didn't work :( just for info, #city is the id for my select box.. anyway, what's the different between .html and .append? – eldy.agustius May 14 '13 at 04:56
  • `html` will replace the inner html of `#city`. `append` will append the results. If it is empty already, I imagine it would just do the same thing. – TheDude May 14 '13 at 05:09
  • Can you do `alert(data)` inside your function to make sure data contains info? – TheDude May 14 '13 at 05:10
  • hmm I've tried it, but there's no alert.. 'for (var i in data) { alert(data); //html += ''; }' – eldy.agustius May 14 '13 at 05:17
  • I edited my answer with some code to help see the error message. – TheDude May 14 '13 at 05:19
  • I've tried it but nothing happens..The alert box didn't appear.. Am I missing any library so the code can't be compiled? I put that '$.getJSON' script on the head of the HTML.. Did I put it in the wrong place? – eldy.agustius May 14 '13 at 05:26
  • I changed my answer again to help you. Put your code inside `$(document).ready` to ensure that it runs when the page is loaded. You may be running into an issue where it attempts to set the html of an element that doesn't exist yet. – TheDude May 14 '13 at 05:29
  • What will be the sign if the code was succesfully loaded? sorry for the dumb question.. – eldy.agustius May 14 '13 at 10:50
  • If you try to add any arbitrary option to `#city` without the AJAX call and it doesn't show anything, then the JS is executing before that element has fully loaded. Using `$(document).ready` prevents this from happening by waiting for everything on the page to load before it executes the function passed to `ready` – TheDude May 14 '13 at 16:24
0

Your for loop won't work on objects. Only arrays.

You need to use for (var i in data) { to loop through all properties of an object.

Jared
  • 2,978
  • 4
  • 26
  • 45