Home/ Questions/Q 3283806
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-17T20:05:01+00:00

I have developed a script that receives json data from a php script using

  • 0

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.com/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.com/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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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?

    • 0