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);
}

gen_Eric · Accepted Answer · 2012-04-02 16:35:54Z

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 2, 2012 at 16:35

gen_Eric

228k42 gold badges304 silver badges343 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

cantera Over a year ago

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?

gen_Eric Over a year ago

@cantera25: In your loop, you have options[h].list. What is h? Also, your options objects, don't have a list property.

cantera Over a year ago

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.

Aurimas Ličkus · Accepted Answer · 2012-04-02 16:32:45Z

2

why not

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

answered Apr 2, 2012 at 16:32

Aurimas Ličkus

10.1k4 gold badges26 silver badges26 bronze badges

Comments

philo · Accepted Answer · 2012-04-02 16:54:18Z

2

+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.

answered Apr 2, 2012 at 16:54

philo

3,7204 gold badges31 silver badges41 bronze badges

Collectives™ on Stack Overflow

Read a JSON Array from PHP in a jQuery Function

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related