Jsonオブジェクトを取得してJqueryを使用してページに表示します

Question

私は動的URL（http://domain.com/getUsers.php?team=1）を使用して、手動でアクセスしてブラウザにJsonオブジェクトを返します：

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

*私はgetUsers.phpにアクセスできません。このファイルは編集できません。 *ブラウザでこのファイルのソースコードを見ると、タイトル、本文などの他のHTML関連のタグがない純粋なjsonオブジェクトしか得られません。

json要素をすべて他のページのドロップダウンメニュー（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> 

Jqueryでこれを行うにはどうすればよいですか？ データを取得して表示するためにindex.htmlページに配置する必要があるJqueryコードは何ですか？

ありがとうございます！

Answer 1

基本的には、受信したJSONオブジェクトを反復して要素を作成するという方法があります。

ここでは、この操作を行うことができる方法の例です（ここフィドルです：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); 
} 

更新： JSONデータのためのAJAX呼び出しを行うための最も簡単な方法は、$.getJSON()です。あなたのコードで（Documentation）

は、それはおそらく、このようになります：

// 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/