Question

I have a dynamic URL (http://domain.com/getUsers.php?team=1) that if its manually accessed, returns some Json objects on the browser:

[{"id":1,"name":"George"},{"id":2,"name":"John"}]

*I dont have access to getUsers.php so, I cant edit this file.
*If I look at the source code of this file on my browser, I only get pure json objects without any other HTML related tags like title, body etc.

I would like to display all the json elements from into a drop-down menu on some other page(http://domain.com/index.html).

<form>
<select name="users">
<option value="">Select a person:</option>
<option value="1">George</option>
<option value="2">John</option>

</select>
</form>

What is the best way to do this with Jquery?
What is the Jquery code that I need to put on my index.html page to retrieve and display the data?

Thank you SO!

Answer 1

Basically, the trick is to iterate over the JSON object you receive and create elements with it.

Here’s an example of how you could do this (and here’s a fiddle: http://jsfiddle.net/ruv3M/)

    // This is to simulate the JSON you retrieved via an AJAX call
var people = [{"id":1,"name":"George"},{"id":2,"name":"John"}],
    // Save a reference to your list of users
    $userSelect = $( '#userlist' ).find( 'select' );

// Iterate over each item in the object of people you received
for ( person in people ) {
    // create an option for each person
    $( '<option />', {
        value: people[person].id,
        text: people[person].name
    })
        // Append it to your list
        .appendTo( $userSelect ); 
}

Update: The simplest way to make an AJAX call for JSON data is with $.getJSON(). (Documentation)

In your code, it would probably look something like this:

// Instead of '/echo/json/', you'd use your AJAX URL
$.getJSON( '/echo/json/', function( data ) {
    // Set data equal to our dummy people variable, since it's blank in this example
    // NOTE! This step would be unnecessary in real life, where data would already be your JSON
    data = people;

    // Iterate over each item in the object of people you received
    // Note: iteration should be inside this callback, so it doesn't fire till your
    // data has been returned.
    for ( person in people ) {
        // create an option for each person
        $( '<option />', {
            value: people[person].id,
            text: people[person].name
        })
            // Append it to your list
            .appendTo( $userSelect ); 
    }

});

http://jsfiddle.net/B2YF5/3/