締切済み

現時刻とjson（オブジェクト形式）内比較抽出

2014/04/21 17:51

色々悩んで解決策が見つからず、皆様のご教授を頂きたくよろしくお願いいたします。【目的】＜Webトップページに現在放映している番組をテキスト表示し、次の番組は、リンク情報無でその下に並べて表示したい＞放映番組表を作成しました、作成時、元となる番組情報をjsonオブジェクト形式データにて作成し、javascritにて、HTML側で取込み表示を行いました。ここまでは、問題なく表示までできました。色々な方（異動などで変更する場合がある）が、メンテナンスする事を考え、現データを選択しました。【課題】元となるｊｓｏｎデータ内には、ID，開始年月日時分情報，終了年月日時分情報，番組名称(リンク付) などがあります、それを元にして、今現在の時刻で放映している番組テキストをWebトップページ内のdiv要素内にリアルタイムで表示させたいのです。【参考までに、番組表は、dhtmlxScheduler_v40_stdをベースに構築しています。】＜サンプルコードを下記に記します＞ [{"id":14010501,"start_date":"2014-01-05 06:30","end_date":"2014-01-05 07:00","text":"<a href=\"http://www.yahoo.co.jp/\">番組１</a>","details":"新番組"}, {"id":14010502,"start_date":"2014-01-05 07:00","end_date":"2014-01-05 07:30","text":"<a href=\"http://www.yahoo.co.jp/\">番組２</a>","details":"新番組"}, … {"id":14010517,"start_date":"2014-01-05 22:00","end_date":"2014-01-05 23:00","text":"<a href=\"http://www.yahoo.co.jp/\">番組１１</a>","details":"新番組"}, {"id":14010518,"start_date":"2014-01-05 23:00","end_date":"2014-01-05 23:30","text":"<a href=\"http://www.yahoo.co.jp/\">番組１２</a>","details":"新番組"}, {"id":14010519,"start_date":"2014-01-05 23:30","end_date":"2014-01-05 24:00","text":"<a href=\"http://www.yahoo.co.jp/\">番組１３</a>","details":"新番組"}, {"id":14010601,"start_date":"2014-01-06 06:30","end_date":"2014-01-06 07:00","text":"<a href=\"http://www.yahoo.co.jp/\">番組１４</a>","details":"新番組"}, {"id":14010602,"start_date":"2014-01-06 07:00","end_date":"2014-01-06 07:30","text":"<a href=\"http://www.yahoo.co.jp/\">番組１５</a>","details":"新番組"}, {"id":14010603,"start_date":"2014-01-06 07:30","end_date":"2014-01-06 08:00","text":"<a href=\"http://www.yahoo.co.jp/\">番組１６</a>","details":"新番組"}, …] （例）今現在の年月日時分とjson内を比較検索して、該当の番組情報があったら、そのデータを抽出したいのです。抽出情報としましては下記の情報になります。１　"start_date":"2014-01-06 07:30", ２　"end_date":"2014-01-06 08:00", ３　"text":"<a href=\"http://www.yahoo.co.jp/\">番組１６</a>", の部分、実際には下記のデータを抽出できればと思います。１　start_date　（放映開始時間）の　07:30　２　end_date　（放映終了時間）の　08:00 ３　text　リンク情報付き番組内容の　<a href=\"http://www.yahoo.co.jp/\">番組１６</a> データしては下記のイメージになります。 ↓現在放映中の番組 07:30 ～ 08:00 番組１６（リンク付） ↓次の放映番組 08:00 ～ 9:00 番組１７(リンク無) となるようにしたいのです。（表示方法は、CSSで対応するつもりです）このような説明でお分かりいただけますでしょうか。どうかご教授の程よろしくお願い致します。

m2c_tky01
お礼率85% (6/7)

JavaScript
回答数4
ありがとう数4

みんなの回答 （4）
専門家の回答

みんなの回答

shockatz
ベストアンサー率80% (153/191)

2014/04/24 14:46 回答No.4

あまり漠然とした回答も無責任な話ですが。【質問主様へ】質問の範囲が広いので、まず、どの部分がわからないのか明確にしてください。具体的な話はそれからに。１．json文字列パースによるのObject配列への変換（Ajax使っているならOKみたいですが）２．現在時刻の文字列整形（抽出比較のため）３．効率的な抽出処理４．３をさらに掘り下げた処理（指定時刻に現番組、次番組がない場合など）５．取得したObject配列要素の出力形式への整形６．出力要素への反映（これは誰でもわかるかｗｗｗ）どの部分？

質問者

お礼 2014/04/24 19:05

お時間のお忙しい中、お付き合い頂きましてありがとうございました。もっと、技術を高めたいと思っております。重ねて、ありがとうございました。自分でも、サクッと答えられるようになるように頑張ります。

質問者

補足 2014/04/24 19:04

ご連絡ありがとうございます。ソースコードを記載頂きたく下記のご回答につきましては、全てお願いしたいのですが、お恥ずかしいところではございますが本音でございました。１．json文字列パースによるのObject配列への変換（Ajax使っているならOKみたいですが）２．現在時刻の文字列整形（抽出比較のため）３．効率的な抽出処理４．３をさらに掘り下げた処理（指定時刻に現番組、次番組がない場合など）５．取得したObject配列要素の出力形式への整形６．出力要素への反映（これは誰でもわかるかｗｗｗ）何度もお手数をおかけしてしまいましたが、もう一度、自分で何とかしてみます。ありがとうございました。

askaaska
ベストアンサー率35% (1455/4149)

2014/04/23 08:59 回答No.3

この【～】てきっとその時によって数が変わる？だとすると【～】だけじゃなくそれを囲う<div>も動的に埋め込むしかないのまずしなくちゃいけないことは・ＪＳＯＮをオブジェクトに変える次はその中のデータの数だけ繰り返すそして文字列として・start_date、end_dateを取り出して【～】を作る・textを取り出して【～】を作る・それをdivで囲うを作ってdocument.writeなりで出力すればいいと思うわ

質問者

お礼 2014/04/24 14:46

本当に何度も申し訳ありません、ソースでの具体的なご教授は可能でしょうか？難しい場合、一から見直したいと思います。ありがとうございます。何卒、引き続き、ご教授の程よろしくお願い申し上げます。

質問者

補足 2014/04/24 14:46

全体の流れは理解できていたつもりでしたが、さて、実行しようとすると、とまってしまって、本当に何度も申し訳ありません、ソースでの具体的なご教授は可能でしょうか？何度も何度もすいません、可能でしたらで結構です。私の知識不足にお付き合い頂きましてありがとうございます。

askaaska
ベストアンサー率35% (1455/4149)

2014/04/22 17:45 回答No.2

どこがわからないのかを教えてくれればそこのヒントを提供することはできると思うの

質問者

お礼 2014/04/23 08:14

たびたび、申し訳ありません。何卒、ご教授のほど、よろしくおねがいいたします。

質問者

補足 2014/04/23 08:13

重ね重ねご連絡ありがとうございます。下記にトップページに埋め込むもとになるソースを記載いたしました。この形で解決策をご教授可能でしょうか？ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>トップページに表示用</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body bgcolor="#ffffff"> <div style="position: relative; width: 199px;"> <img name="画像名称" src="画像名" width="199" height="267" id="画像名称" alt="******" /> <div id="schedule" style="position: absolute; top: 140px; left: 9px; width: 180px;"> <div style="background-color: #FFF; padding-top: 3px; padding-bottom: 3px; height: 55px;"> <div class="dhx_event_move dhx_title" style="font-size: 15px; font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Osaka, 'ＭＳＰゴシック', 'MS PGothic', sans-serif; padding-left: 5px; font-weight: bold;"> 【07:30 ～ 08:00】 </div> <div class="dhx_body" style="font-size: 15px; width: 170px; padding-left: 5px; padding-right: 5px; font-weight: bold;"> 【<a href="http://www.*******.co.jp/">番組１６</a>】 </div></div> <div style="background-color:#ccc; padding-top: 3px; padding-bottom: 3px; height: 35px;"> <div class="dhx_event_move dhx_title" style="font-size: 12px; font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Osaka, 'ＭＳＰゴシック', 'MS PGothic', sans-serif; padding-left: 5px; color: #666;"> 【08:00 ～ 09:00】 </div> <div class="dhx_body" style="font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Osaka, 'ＭＳＰゴシック', 'MS PGothic', sans-serif; padding-left: 5px; padding-right: 5px; font-size: 12px; width: 170px; color: #666;"> 【番組名１７】 </div> </div> </div> </div> </body> </html> 【】の部分に現在時刻と比較した結果を返したいと思っているんです。上記の内容でご理解いただけますでしょうか？どうか、ご教授のほどよろしくお願いいたします。

askaaska
ベストアンサー率35% (1455/4149)

2014/04/21 18:07 回答No.1

JSONをJavaScriptのオブジェクトに変換後 for文で回して現在時刻とstart_date、end_dateを比較するだけだと思うんだけど何か問題なの？それともそれが面倒だと言いたいの？

質問者

お礼 2014/04/22 17:09

お忙しい中お返事をありがとうございます。なかなか自分の思い通りにできない事にあたった時、良い解決策が見つからないのが現実で。本当に申し訳ありません、可能な限りで結構です、ソースなど具体的なご教授頂けると大変助かります。何卒、引き続き、ご教授のお願い致したいところです。無理を承知でのお願いになります。

質問者