OpenPNE3でAPI叩いてメンバー情報取って表示するHTML+JavaScript

最低限コメントはつけた。質問・意見は@suneo3476Proまで。

<form>
<!-- 条件指定プルダウンメニュー -->
<select name="検索条件" id="inputTarget" type="text">
	<option value="member">SNS全体のユーザの情報</option>
	<option value="friend">フレンドになっているユーザの情報</option>
	<option value="community">コミュニティに参加しているユーザの情報</option>
</select> 
<!-- ソート有無チェックボックス -->
<input id = "sort" type="checkbox" name="sort">フレンド数でソートする</input>
<!-- 送信ボタン -->
<input type="button" value="検索" onclick="button_onclick()"></input>
</form>

<script>
//送信ボタン押下で呼び出し
function button_onclick(){ //buttonが押されるたびに呼び出される関数
//APIキー格納
var openpne = {"apiKey":"6718d6997983ae958b4502e05cb03e559b01dd9f410dda96861d7692046e387f","apiBase":"\/api.php\/"};
	var params = {};
	params.apiKey = openpne.apiKey; //APIキー設定
	params.target = $('select#inputTarget').val(); //コールバック関数設定
	params.target_id = 1; //ユーザ指定
	$.get('/api.php/member/search.json',params,function(json){ 
	//GET通信成功時に以下の処理を実行
	$('#member_search_result').html(""); //まず表示要素をカラにする
	var target;
	switch(params.target){ //表示文字列の先頭を条件に応じて決定
		case "member":
			target = "SNS全体の";
			break;
		case "friend":
			target = "フレンドになっている";
			break;
		case "community":
			target = "参加コミュニティの";
			break;
		default:
			break;
	}
	$('#member_search_result').append("<h2><b>"+ target +"ユーザの一覧</b></h2>");
	//ここまでで「○○ユーザの一覧」という見出しが表示される
	//ここから取得したデータを表にして表示する
	$('#member_search_result').append("<table>");
	if( $('input#sort').is(':checked') == true ){ //ソート有無のチェックボックスに入力が有る時はソート
		for(var i = 0; i < json['data'].length-1; i++){
			for(var j = i+1; j < json['data'].length; j++){
				var count_i = parseInt(json['data'][i]['friends_count']); //文字→整数変換しないと比較不能
				var count_j = parseInt(json['data'][j]['friends_count']);
				if(count_i > count_j){ //昇順仕様
					var tmp = json['data'][i];
					json['data'][i] = json['data'][j];
					json['data'][j] = tmp;
				}
			}
		}
	}
	//表の見出し行の文字列
	var line = "<tr><th>名前</th><th>プロフィール画像</th><th>プロフィールURL</th><th>フレンド数</th></tr>";
	$('#member_search_result').append(line); //要素に見出し行を追加
	for(var i = 0; i < json['data'].length; i++){ //ここからデータ追加
		var name = json['data'][i]['name'];
		var profile_image = json['data'][i]['profile_image'];
		var profile_url = json['data'][i]['profile_url'];
		var friends_count = json['data'][i]['friends_count'];
		//一行の文字列にする
		line = "<tr><td>"+name+'</td><td><img src="'+profile_image+'"></img></td><td><a href="'+profile_url+'">プロフィール</a></td><td>'+friends_count+'人</td></tr>';
        $('#member_search_result').append(line); //一行ずつ追加
    }
    $('#member_search_result').append("</table>"); //表ここまで
  });
}
</script>
<p><span id="member_search_result">ここに表示</span></p> //表示先の要素