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>
お礼
さすがpipi様です。感動です。 数値として記録されていたなんて！（何故 気づきませんでした。ありがとうございました！
補足
では訂正版もこちらに。 <html> <head> <title>たいとる</title> <script> baguru = new Array(); window.onload=function(){ var tags=document.getElementsByTagName("*"); for(var i=0;i<tags.length;i++){ matti = tags[i].id.match(/^test[0-9]+$/) if(matti){ baguru.push(matti); } } } xx = new Array(),xx[0]="test123",xx.push('test30'),xx.push('test200','test1'),str=xx[1]; yy = new Array("test1", "test200", "test30"),stl=yy[1]; </script> </head> <body> <div id="test123">TEST123</div> <div id="test30">TEST30</div> <span id="test200">TEST200</span> <div id="test1">TEST1</div> <div id="hoka123">HOKA123</div> <hr> アドレスバーでTEST用。 <pre> javascript:alert(xx[1].match(/test(\d+)$/)[1]); javascript:alert(yy[1].match(/test(\d+)$/)[1]); javascript:alert(baguru[1]);//中身はある javascript:alert(baguru[1].match(/test(\d+)$/)[1]);//反応無し javascript:alert((baguru[1]+'').match(/test(\d+)$/)[1]);//これでできる！ </pre> <pre> javascript:alert(xx); javascript:alert(yy); javascript:alert(baguru); </pre> </body> </html>