JSON形式のデータを古い順に３０件表示させたい

質問

PHPからJSON形式のデータを受け取り、データの古い順に３０件、htmlで表示させたいです。
いろいろ調べて１件目のデータを表示させることができたのですが
30件分のデータを古い順に表示させることができません。
わかりやすく教えていただけないでしょうか？

※やりたいこと
html内に
<div class="area_report" id="area_100000"></div>
<div class="area_report" id="area_200000"></div>
<div class="area_report" id="area_300000"></div>
　　　　　・
　　　　　・
　　　　　・　最高１０件のエリアＩＤが書かれています。
"area_"をreplaceしてエリアＩＤを取得します。
売上報告.phpにアクセスし、エリアＩＤごとにJSON形式のデータを受け取ります。
１つのエリアＩＤに店舗は１～複数あります。
店舗ごとの古いデータから３０件、htmlで表示させたいです。
店舗がいくつあるかは"Tenpo"でわかります。
データの登録日は"UpDate"でわかります。

店舗が１００件あると、表示完了までに時間がかかり過ぎるのであれば
何か良いアドバイスをいただきたいです。

javascript勉強中で不適切な記述をしているかもしれません。
「こちらの記述の方が簡単だよ」というのがありましたら、ぜひ教えてください。
どうぞよろしくお願いします。

※JSON形式のデータ
{"AreaReport":{
"AreaId":"100000",
"Tenpo":4,
"Sales":[
{"Name":"岡崎",
"TenpoId":100004,
"Direct":0,
"Amount":48000,
"Report":"売り上げ報告あいうえお",
"UpDate":"2011-04-30 10:32:40"},
{"Name":"一宮",
"TenpoId":100001,
"Direct":0,
"Amount":30000,
"Report":"売り上げ報告かきくけこ",
"UpDate":"2011-04-12 10:32:40"},
{"Name":"春日井",
"TenpoId":100002,
"Direct":0,
"Amount":10000,
"Report":"売り上げ報告さしすせそ",
"UpDate":"2011-04-01 10:32:40"},
{"Name":"名古屋",
"TenpoId":100003,
"Direct":1,
"Amount":50000,
"Report":"売り上げ報告たちつてと",
"UpDate":"2011-04-21 10:32:40"},

]}}

※javascriptコード
<script type="text/javascript">
if( window.attachEvent )
{
window.attachEvent( 'onload', reportWrite );
}
else
{
window.addEventListener( 'DOMContentLoaded', reportWrite, false );
}

function reportWrite()
{
var area_array = new Array();

t = document.getElementsByTagName( 'div' );

for( var i = 0, n = t.length; i < n; i ++ )
{
if( t[ i ].className.match( 'area_report' ) )
{
var area_id = t[ i ].id.replace( 'area_', '' );

area_array.push( area_id );
}
}

for( var i = 0; i < area_array.length; i ++ )
{
areaReport_id = area_array[ i ];
ReportGet( areaReport_id);
}
}

function include_javascript( js_file )
{
//window.alert(js_file);
var script = document.createElement( 'script' );

script.src = js_file;
script.type = 'text/javascript';
script.defer = true;

document.getElementsByTagName( "head" )[ 0 ].appendChild( script );
}

function ReportGet( areaReport_id)
{
include_javascript( 'http://売上報告.php?id=' + areaReport_id + '&callback=printReport' );
}

function printReport(Repo)
{
var htmlStr = "";
htmlStr = htmlStr + Repo["AreaReport"]["Sales"][0]["UpDate"] + '<br />';
htmlStr = htmlStr + Repo["AreaReport"]["Sales"][0]["Name"] + '<br />';
htmlStr = htmlStr + Repo["AreaReport"]["Sales"][0]["Direct"] + '<br />';
htmlStr = htmlStr + Repo["AreaReport"]["Sales"][0]["Amount"] + '<br />';
replace_val = Repo["AreaReport"]["Sales"][0]["Report"];
htmlStr = htmlStr + replace_val.replace(/\n/g, '<br />');
htmlStr = htmlStr + '<hr />';
document.getElementById("Report").innerHTML = htmlStr;
// window.alert(htmlStr);
}
</script>

回答No.1

神崎 渉瑠（@taloo）

>売上報告.phpにアクセスし、エリアＩＤごとにJSON形式のデータを受け取ります。
>１つのエリアＩＤに店舗は１～複数あります。
>店舗ごとの古いデータから３０件、htmlで表示させたいです。

売上報告.phpが出力するデータを30件だけにすれば、
JavaScriptは何件を表示したかを数える必要もなく、全データを丸ごと表示するだけですみますし、
通信量の削減にもつながります。

売上報告.phpを改変する方をお勧めします。

お礼

phpを使うのは初めてで、手っ取り早くjavascriptで済ませたいなと思い質問しました。

＞JavaScriptは何件を表示したかを数える必要もなく、全データを丸ごと表示するだけですみますし、
＞通信量の削減にもつながります。
そうですね。その方がスマートですよね。
この８日間、phpの基本を勉強することから初めて
慣れない $変数名 や .= の使い方に戸惑いながらも
なんとか自力でphpプログラムを組んで、テスト完了しました。

アドバイスありがとうございました。