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

締切済

質問者：m2c_tky01
質問日時：2014/04/21 17:51
回答数：4件

色々悩んで解決策が見つからず、皆様のご教授を頂きたくよろしくお願いいたします。

【目的】
＜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で対応するつもりです）

このような説明でお分かりいただけますでしょうか。
どうかご教授の程よろしくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

最新から表示
回答順に表示

No.4

回答者： shockatz
回答日時：2014/04/24 14:46

あまり漠然とした回答も無責任な話ですが。

【質問主様へ】

質問の範囲が広いので、まず、どの部分がわからないのか明確にしてください。
具体的な話はそれからに。

１．json文字列パースによるのObject配列への変換（Ajax使っているならOKみたいですが）
２．現在時刻の文字列整形（抽出比較のため）
３．効率的な抽出処理
４．３をさらに掘り下げた処理（指定時刻に現番組、次番組がない場合など）
５．取得したObject配列要素の出力形式への整形
６．出力要素への反映（これは誰でもわかるかｗｗｗ）

どの部分？

この回答への補足

ご連絡ありがとうございます。

ソースコードを記載頂きたく下記のご回答につきましては、
全てお願いしたいのですが、お恥ずかしいところではございますが本音でございました。

１．json文字列パースによるのObject配列への変換（Ajax使っているならOKみたいですが）
２．現在時刻の文字列整形（抽出比較のため）
３．効率的な抽出処理
４．３をさらに掘り下げた処理（指定時刻に現番組、次番組がない場合など）
５．取得したObject配列要素の出力形式への整形
６．出力要素への反映（これは誰でもわかるかｗｗｗ）

何度もお手数をおかけしてしまいましたが、もう一度、自分で何とかしてみます。ありがとうございました。

補足日時：2014/04/24 19:04

通報する

- 0
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2014/04/24 19:05

No.3

回答者： askaaska
回答日時：2014/04/23 08:59

この【～】てきっとその時によって数が変わる？

だとすると
【～】だけじゃなく
それを囲う<div>も動的に埋め込むしかないの

まずしなくちゃいけないことは
・ＪＳＯＮをオブジェクトに変える

次はその中のデータの数だけ繰り返す

そして文字列として
・start_date、end_dateを取り出して【～】を作る
・textを取り出して【～】を作る
・それをdivで囲う
を作ってdocument.writeなりで出力すればいいと思うわ

この回答への補足

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

補足日時：2014/04/24 14:46

通報する

- 0
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2014/04/24 14:46

No.2

回答者： askaaska
回答日時：2014/04/22 17:45

どこがわからないのかを教えてくれれば

そこのヒントを提供することはできると思うの

この回答への補足

重ね重ねご連絡ありがとうございます。
下記にトップページに埋め込むもとになるソースを記載いたしました。この形で解決策をご教授可能でしょうか？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …

<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>

【】の部分に現在時刻と比較した結果を返したいと思っているんです。
上記の内容でご理解いただけますでしょうか？
どうか、ご教授のほどよろしくお願いいたします。

補足日時：2014/04/23 08:13

通報する

- 0
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2014/04/23 08:14

No.1

回答者： askaaska
回答日時：2014/04/21 18:07

JSONをJavaScriptのオブジェクトに変換後

for文で回して
現在時刻とstart_date、end_dateを比較するだけ
だと思うんだけど

何か問題なの？

それともそれが面倒だと言いたいの？

この回答への補足

ご連絡ありがとうございます。
お返事遅れまして申し訳ありませんでした。
厳しいお言葉を受けて、再度チャレンジしてみたいと思っています。しかし、実際に構築しようと止まってしまっていました。全体の流れを今一度ご教授頂けると助かります。可能でしょうか？

補足日時：2014/04/22 17:01

通報する

- 0
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2014/04/22 17:09

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！