data loading in combo box from json file using jquery

Question

keep the countries list in countries.json file. If load the countries into the combo box from json file, no result is coming here is thee code details. while loading the page the countries should on the combo box.

countries.json

[
  {name: 'Afghanistan', code: 'AF'},
  {name: 'Ã…land Islands', code: 'AX'},
  {name: 'Albania', code: 'AL'},
  {name: 'Algeria', code: 'DZ'},
  {name: 'American Samoa', code: 'AS'},
  {name: 'AndorrA', code: 'AD'},
  {name: 'Angola', code: 'AO'},
  {name: 'Anguilla', code: 'AI'},
  {name: 'Antarctica', code: 'AQ'},
  {name: 'Antigua and Barbuda', code: 'AG'},
  {name: 'Argentina', code: 'AR'},
  {name: 'Armenia', code: 'AM'},
  {name: 'Aruba', code: 'AW'},
  {name: 'Australia', code: 'AU'},
  {name: 'Austria', code: 'AT'},
  {name: 'Azerbaijan', code: 'AZ'},
  {name: 'Bahamas', code: 'BS'},
  {name: 'Bahrain', code: 'BH'},
  {name: 'Bangladesh', code: 'BD'},
  {name: 'Barbados', code: 'BB'},
  {name: 'Belarus', code: 'BY'},
  {name: 'Belgium', code: 'BE'}
  ]

Html File -demo.html

    <!doctype html>
    <html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    </head>
    <body>
    <select id="orgcountry" class="form-control input-md"></select>
    <script>
    $(document).ready(function() {
    var $select = $('#orgcountry');

$.getJSON('countries.json', function(data) {
$select.html('');
//iterate over the data and append a select option
$.each(data, function(key, val){
$select.append('<option id="' + val.code+ '">' + val.name + '</option>');
})

});
});
</script>
</body>
</html>

firstly are you getting values from json file and secondly if you getting values then where you are appending those values to combo box ?? — Sameer K, May 20 '15 at 09:19
Hi,thank you, i have updated the code... like this way i have append the code. $.getJSON('countries.json', function(data) { $select.html(''); //iterate over the data and append a select option $.each(data, function(key, val){ $select.append(''); }) — Rams, May 20 '15 at 09:58

score 0 · Answer 1 · answered May 20 '15 at 10:32

0

You code jquery code is fine. The issue is with json file which is not proper. json object name and value needs to be double quote like below

[ 
  {"name": "Afghanistan", "code": "AF"},
  {"name": "Ã…land Islands", "code": "AX"},
  {"name": "Albania", "code": "AL"},
  {"name": "Algeria", "code": "DZ"},
  {"name": "American Samoa", "code": "AS"},
  {"name": "AndorrA", "code": "AD"},
  {"name": "Angola", "code": "AO"},
  {"name": "Anguilla", "code": "AI"},
  {"name": "Antarctica", "code": "AQ"},
  {"name": "Antigua and Barbuda", "code": "AG"},
  {"name": "Argentina", "code": "AR"},
  {"name": "Armenia", "code": "AM"},
  {"name": "Aruba", "code": "AW"},
  {"name": "Australia", "code": "AU"},
  {"name": "Austria", "code": "AT"},
  {"name": "Azerbaijan", "code": "AZ"},
  {"name": "Bahamas", "code": "BS"},
  {"name": "Bahrain", "code": "BH"},
  {"name": "Bangladesh", "code": "BD"},
  {"name": "Barbados", "code": "BB"},
  {"name": "Belarus", "code": "BY"},
  {"name": "Belgium", "code": "BE"}
  ]

answered May 20 '15 at 10:32

Sameer K

799
1
7
26

i have tested with html code provided by you along with above json content and it works perfectly for me. if you console.log val.code and val.name inside loop, then are you getting values ?? – Sameer K May 20 '15 at 11:12
when i load it , i am getting the following error in console XMLHttpRequest cannot load file:///C:/Users/SYS002/Documents/countries.json. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource. – Rams May 21 '15 at 06:43
are you setting any path for countries.json in your actual code. If so then can you share that. And also you can refer these http://stackoverflow.com/questions/10752055/cross-origin-requests-are-only-supported-for-http-error-when-loading-a-local and http://stackoverflow.com/questions/27742070/angularjs-error-cross-origin-requests-are-only-supported-for-protocol-schemes – Sameer K May 21 '15 at 07:12
This is my code$(document).ready(function() { console.log("entry"); var $select = $('#orgcountry'); console.log("entry2"); $.getJSON('http://localhost:8080/orgprofile/jsondata/countries.json', function(data) { console.log("entry"); $select.html(''); //iterate over the data and append a select option $.each(data, function(key, val){ console.log(val.code+"_"+val.name); // $select.append(''); }); }); }); – Rams May 21 '15 at 08:19
add ``http://`` before ``localhost`` and try.. ('http://localhost:8080/orgprofile/jsondata/countries.json') – Sameer K May 21 '15 at 08:28
I have added but still it is not loading $.getJSON('http://localhost:8080/orgprofile/jsondata/countries.json', function(data) { console.log("entry"); $select.html(''); //iterate over the data and append a select option $.each(data, function(key, val){ console.log(val.code+"_"+val.name); // $select.append(''); }); – Rams May 21 '15 at 08:48
if countries.json file is inside orgprofile project folder, then try with relative path instead of giving full url. I suspect issue may be because of port 8080, but not sure. Finding it difficult to help you as i unable to replicate the issue. – Sameer K May 21 '15 at 09:44

data loading in combo box from json file using jquery

1 Answers1