I have developed a script that receives json data from a php script using $.getJSON. The JSON data looks like '[{"options":"smart_exp"},{"options":"user_intf"},{"options":"blahblah"}] '
<html>
<head>
<script type="text/javascript" src=".4.2/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
//$('document').ready(function() {
function Preload() {
$.getJSON("http://localhost/conn_mysql.php", function(jsonData){
$.each(jsonData, function(i,j)
{ alert(j.options);});
});}
// });
</script></head>
<body onLoad="Preload()">
</body>
</html>
I also developed a script that dynamically generates a dropdown list using an array.
<HTML>
<HEAD>
<script language="javascript">
var myarray = new Array("apples","oranges","bananas","Peac");
function populate()
{ for (i=0; i<myarray.length; i++)
{
document.form1.fruits.options[i]=new Option(myarray[i], i);
}
}
</script>
</HEAD>
<body onload="populate();">
<form name="form1">
My favourite fruit is :
<select name="fruits" />
</form>
</body>
</HTML>
Now I need to dynamically build a dropdown list using data returned by getJson but I am having trouble in merging both. I will be very thankful for the help. Here is what I tried to do but its not working.
<html>
<head>
<script type="text/javascript" src=".4.2/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
//$('document').ready(function() {
function Preload() {
var myarray = new Array();
$.getJSON("http://localhost/conn_mysql.php", function(jsonData){
$.each(jsonData, function(i,j)
{ myarray = j.options;});});
for (i=0; i<myarray.length; i++)
{ document.form1.fruits.options[i]=new Option(myarray[i]); }
}
// });
</script></head>
<body onLoad="Preload()">
<form name="form1">
My favourite fruit is :
<select name="fruits" />
</form>
</body>
</html>
I have developed a script that receives json data from a php script using $.getJSON. The JSON data looks like '[{"options":"smart_exp"},{"options":"user_intf"},{"options":"blahblah"}] '
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis./ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
//$('document').ready(function() {
function Preload() {
$.getJSON("http://localhost/conn_mysql.php", function(jsonData){
$.each(jsonData, function(i,j)
{ alert(j.options);});
});}
// });
</script></head>
<body onLoad="Preload()">
</body>
</html>
I also developed a script that dynamically generates a dropdown list using an array.
<HTML>
<HEAD>
<script language="javascript">
var myarray = new Array("apples","oranges","bananas","Peac");
function populate()
{ for (i=0; i<myarray.length; i++)
{
document.form1.fruits.options[i]=new Option(myarray[i], i);
}
}
</script>
</HEAD>
<body onload="populate();">
<form name="form1">
My favourite fruit is :
<select name="fruits" />
</form>
</body>
</HTML>
Now I need to dynamically build a dropdown list using data returned by getJson but I am having trouble in merging both. I will be very thankful for the help. Here is what I tried to do but its not working.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis./ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
//$('document').ready(function() {
function Preload() {
var myarray = new Array();
$.getJSON("http://localhost/conn_mysql.php", function(jsonData){
$.each(jsonData, function(i,j)
{ myarray = j.options;});});
for (i=0; i<myarray.length; i++)
{ document.form1.fruits.options[i]=new Option(myarray[i]); }
}
// });
</script></head>
<body onLoad="Preload()">
<form name="form1">
My favourite fruit is :
<select name="fruits" />
</form>
</body>
</html>
4 Answers
Reset to default 2i'm not sure what your json data looks like, but maybe you need something like this:
function Preload() {
$.getJSON("http://localhost/conn_mysql.php", function(jsonData){
$.each(jsonData, function(i,j){
$('#ID-OF-YOUR-SELECT-ELEMENT').append(
$('<option></option>').val(j.value).html(j.text)
);
}
);
});}
j.value = the value of the option you want to add j.text = the name of the option you want to add (what the user sees)
First of all, .getJSON() uses a callback, meaning that the code executed as the second argument of .getJSON() won't necessarily have been called by the time your for loop runs. It runs once the server responds with your conn_mysql.php JSON data. Try nesting it:
function Preload() {
$.getJSON("http://localhost/conn_mysql.php", function (jsonData) {
$.each(jsonData, function (i, j) {
document.form1.fruits.options[i] = new Option(j.options);
});
});
}
You should be aware of the structure of your jsonData. Here, this would only work if the structure were:
[
{ options: "item 1" },
{ options: "item 2" },
{ options: "item 3" },
]
It loops through the entire object, finding each element of the array, then looks for that element's options property. Is that what you're looking for?
One problem I see is that in your each loop, you're just assigning j.options to myarray instead of adding it to the array. Change to:
myarray.push(j.options);
Internet Explorer / Firefox issue is possible due to the page encoding type - remend trying utf-8.