Read a JSON Array from PHP in a jQuery Function

Question

I'm using the accepted answer to this question to help me build an HTML select menu from a JSON array using jQuery.

My JSON array is passed from a PHP script as $menu and looks like this:

{ "options": [
    { "id":"7","name":"Smith, John"},
    { "id":"4","name":"Jones, Tom"}
  ]
}

First I build the skeleton of my select menu and insert it into the page:

var div = '<div class="row">';
var label = '<label for="employee">Employee</label>';
var select = '<select name="employee id="employee">';
var close = '</select></div>';
var menu = div + label + select + close;

$('#clicked_link').prepend(menu);

Then I try to pass the $menu array to jQuery like this:

var json = '<?php echo $menu; ?>';

Then I try to append the options to the newly created select menu, using the example from the linked question:

var options = eval('(' + json + ')');
var length = options.length;

for (var j = 0; j < length; j++)
{
    var newOption = $('<option/>');
    newOption.attr('id', options[j].id);
    newOption.attr('name', options[h].name);
    $('#employee').append(newOption);
}

The select menu is showing up as expected, but it contains no options. Can anyone see where I'm making my error(s)? Thanks in advance.

Revised to incorporate Rocket's solution:

var json = <?php echo $menu; ?>;

var options = json.options;
var length = options.length;

for (var j = 0; j < length; j++)
{
    var newOption = $('<option/>');
    newOption.attr('value', options[j].id);
    newOption.attr('text', options[j].name);
    $('#employee').append(newOption);
}

score 7 · Accepted Answer · answered Apr 02 '12 at 16:35

7

You don't need to use eval, or even JSON.parse here. JSON is valid JavaScript code. You can just do this:

var json = <?php echo $menu; ?>;  // Note: the quotes have been removed.

This would make the following code:

var json = { "options": [
    { "id":"7","name":"Smith, John"},
    { "id":"4","name":"Jones, Tom"}
  ]
};

which, as you can see, is valid JavaScript code.

Then you can do var options = json.options.

answered Apr 02 '12 at 16:35

gen_Eric

223,194
41
299
337

Thanks for responding. I've implemented your solution, but am getting the same result (an empty select menu). I've posted the updated version in my quesiton. Am I also doing something wrong in my loop perhaps? – cantera Apr 02 '12 at 16:53
@cantera25: In your loop, you have `options[h].list`. What is `h`? Also, your `options` objects, don't have a `list` property. – gen_Eric Apr 02 '12 at 16:55
1

Got it - the [h] was a typo in the accepted answer in the linked question, and I just assumed it was correct. I'll go edit that now. Changing it to [j] and switching to "text" and "value" within the loop did the trick. Thanks again to all. – cantera Apr 02 '12 at 17:01

score 2 · Answer 2 · answered Apr 02 '12 at 16:32

2

why not

 var options = JSON.parse(json).options;

answered Apr 02 '12 at 16:32

Aurimas Ličkus

9,886
4
24
26

score 2 · Answer 3 · answered Apr 02 '12 at 16:54

+1 to Rocket's answer, and I believe there's also a bug in your loop. The line

newOption.attr('name', options[h].list);

h isn't defined. You probably want j instead. And the name attribute isn't meaningful on an option. For the value that will be displayed, set text. For the value that will be sent to the server when the form is submitted, set value.

Read a JSON Array from PHP in a jQuery Function

3 Answers3