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>
お礼
回答ありがとうございました。 大変参考になりました！