- 締切済み
現時刻とjson（オブジェクト形式）内比較抽出
色々悩んで解決策が見つからず、皆様のご教授を頂きたくよろしくお願いいたします。 【目的】 ＜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)
あまり漠然とした回答も無責任な話ですが。 【質問主様へ】 質問の範囲が広いので、まず、どの部分がわからないのか明確にしてください。 具体的な話はそれからに。 １．json文字列パースによるのObject配列への変換（Ajax使っているならOKみたいですが） ２．現在時刻の文字列整形（抽出比較のため） ３．効率的な抽出処理 ４．３をさらに掘り下げた処理（指定時刻に現番組、次番組がない場合など） ５．取得したObject配列要素の出力形式への整形 ６．出力要素への反映（これは誰でもわかるかｗｗｗ） どの部分？
- askaaska
- ベストアンサー率35% (1455/4149)
この【～】てきっとその時によって数が変わる？ だとすると 【～】だけじゃなく それを囲う<div>も動的に埋め込むしかないの まずしなくちゃいけないことは ・ＪＳＯＮをオブジェクトに変える 次はその中のデータの数だけ繰り返す そして文字列として ・start_date、end_dateを取り出して【～】を作る ・textを取り出して【～】を作る ・それをdivで囲う を作ってdocument.writeなりで出力すればいいと思うわ
お礼
本当に何度も申し訳ありません、ソースでの具体的なご教授は可能でしょうか？難しい場合、一から見直したいと思います。ありがとうございます。何卒、引き続き、ご教授の程よろしくお願い申し上げます。
補足
全体の流れは理解できていたつもりでしたが、さて、実行しようとすると、とまってしまって、本当に何度も申し訳ありません、ソースでの具体的なご教授は可能でしょうか？ 何度も何度もすいません、可能でしたらで結構です。私の知識不足にお付き合い頂きましてありがとうございます。
- askaaska
- ベストアンサー率35% (1455/4149)
どこがわからないのかを教えてくれれば そこのヒントを提供することはできると思うの
お礼
たびたび、申し訳ありません。 何卒、ご教授のほど、よろしくおねがいいたします。
補足
重ね重ねご連絡ありがとうございます。 下記にトップページに埋め込むもとになるソースを記載いたしました。この形で解決策をご教授可能でしょうか？ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!-- saved from url=(0014)about:internet --> <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)
JSONをJavaScriptのオブジェクトに変換後 for文で回して 現在時刻とstart_date、end_dateを比較するだけ だと思うんだけど 何か問題なの？ それともそれが面倒だと言いたいの？
お礼
お忙しい中お返事をありがとうございます。 なかなか自分の思い通りにできない事にあたった時、 良い解決策が見つからないのが現実で。 本当に申し訳ありません、可能な限りで結構です、ソースなど具体的なご教授頂けると大変助かります。 何卒、引き続き、ご教授のお願い致したいところです。 無理を承知でのお願いになります。
補足
ご連絡ありがとうございます。 お返事遅れまして申し訳ありませんでした。 厳しいお言葉を受けて、再度チャレンジしてみたいと思っています。しかし、実際に構築しようと止まってしまっていました。全体の流れを今一度ご教授頂けると助かります。可能でしょうか？
関連するQ&A
- JSON多次元オブジェクト(？)を配列へ変換したい
・下記のようなJSON多次元オブジェクト(？)を配列へ変換したいのですが、どうすれば良いでしょうか？ ・json_decode試したけどうまくいきませんでした ・出来れば、data以下だけを配列で取得したいです array(1) { [0]=> string(1284) {"version":1,"req_id":null,"error":null,"data":[ {"name":"Sad","j_title":"A","id":"23","thumb":"hoge1","date":"2009","title":"Ch","url":"hoge2"}, {"name":"Wil","j_title":"r","id":"30","thumb":"hoge3","date":"2013","title":"Po","url":"hoge8"} ]} [1]=> string(1282) {"version":1,"……
- ベストアンサー
- PHP
- ２次元のJSON形式の配列の展開
JSON形式で受け取った２次元配列をHTMLに書き出そうとしています。 配列を指定するカラム名？を変数にしたいのですがうまくできません。 var hoge = "abc"; var len = result.length; for (i = 0; i < len; i++){ objResult.append("<li><a href=" + result[i].ID + ">" + result[i].hoge + "</a></li>"); } ※objResultはul要素を変数に収めたものです。 JSONデータは１列目のカラム名は『ID』で固定ですが２列目は変動する為、上記の『hoge』の部分にはJSONデータを受け取る前にカラム名を別処理で取得して格納しています。 ご教授の程よろしくお願いします。
- ベストアンサー
- JavaScript
- 複数のjsonファイルを「もっと見る」ボタンで出力
プログラム初心者です。 Instagramからハッシュタグで画像を抽出し、「もっと見る」ボタンで少しずつHTMLに出力したいです。 ↓こちらのブログを参考にさせていただき、Instagramの画像をHTMLに出力するところまで、何とか辿り着きました。 http://blog.hello-world.jp.net/php/2777/ <script> $(function() { $.ajax({ url: "json/1.json", dataType: "json", error: function(jqXHR, textStatus, errorThrown) { $("#content").text(textStatus); }, success: function(data) { var dataArray = data; $.each(dataArray, function(i){ $("#content").append("<div><p id='" + dataArray[i].id + "'><a href='" + dataArray[i].link + "' target='_blank'><img src='" + dataArray[i].image_url + "'></a></p></div>"); }); } }); }); </script> この状態だと1枚目のjsonしか読み込んでいないので、2枚目以降のファイルも2.json、3.json…「もっと見る」ボタンで取得するようにしたいのですが、知識が足りず。。。 ↓こちらのサイトのように、スクロールで表示させるものでも良いのですが。 http://nekostagram.com/ 詳しい方、ご協力いただけるとありがたいです。 どうぞよろしくお願いいたします。m(__)m
- ベストアンサー
- JavaScript
- GoogleMpsAPIのjson.jsによる読み込み
GoogleMapsAPIの勉強をしています、プログラミング初心者です。 「GoogleMapsAPI徹底活用ガイド」という解説本を参考にしています。 中心位置情報をJSON形式で別ファイルに記述したものをjavascriptプログラムで読み込み、実行、googlemapに反映させたいのですが、うまくいきません。 JSON in JavaScript のページ（http://www.json.org/js.html）のリンクからJSON処理ライブラリjson.jsのスクリプトをコピー、私のサーバー内に保存し、 <head></head>内で <script type="text/javascript" src="json.js" charset="utf-8"></script> とsrc属性にjson.jsを指定、 javascriptのfunciton {}内で、 GDownloadUrl( "center.json", mySetCenter ); function mySetCenter(data) { var obj = data.parseJSON(); map.setCenter( new GLatLng(obj.lat, obj.lng), obj.zoom ); } としています。 center.jsonというのが、JSON形式の位置情報ファイルです。 解説本のサンプルを使用しているので、スクリプトの間違いではないと思います。 json.jsを使わず、javascriptでeval関数を使う場合は、正常にJSON形式の中心位置情報のデータが読み込まれ、地図が表示されます。 おそらく、json.jsのダウンロード方法やサーバへの配置方法などが間違っているではないかと思いますが、参考になる資料がなく困っています。 どなたかご教授お願いいたします。
- 締切済み
- JavaScript
- JSONデータをｊQueryにわたす際に文字化け
MySQLからのデータをPHPでJSON形式に加工して、ｊQueryで表示させようしているのですが、 どうしても日本語だけ文字化けをしてしまい、エンコードを色々変えても文字化けしてしまい困っています。 どなたか助けていただけませんでしょうか？ -文字化け結果- No：1 Title：¤Ç¤¤¿¡ªÂçÀ®¸ù¡ª No：2 Title：¤³¤ì¤«¤é´èÄ¥¤ë¡ª phpにアクセスしても文字化けはいたしません。 ｊQueryからアクセスをすると完璧に文字化けをしてしまいます。 json.php (UTF-8) [ { no: "1", title: "できた！大成功！" }, { no: "2", title: "これから頑張る！" } ] index.html (UTF-8) <!DOCTYPE HTML> <html> <head> <meta charset="euc"> <title>jsonテスト</title> <link rel="stylesheet" type="text/css" href="style/desktop.css"> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.7.1");</script> <script type="text/javascript"> jQuery(function(){ $.getJSON("./json.php",function(data){ $('p','#demo').remove(); $('#demo').append('<ul/>'); $.each(data,function(i,items){ $("<li/>",{ text:'No：'+items.no+' Title：'+items.title }).appendTo('ul','#demo'); }); }); }); </script> </head> <body> <div> <div id="demo"> <h4>リスト</h4> <p></p> </div> </div> </body> </html>
- ベストアンサー
- JavaScript
- JSON形式のデータを表示したい
はてなブックマークエントリー情報取得API（http://d.hatena.ne.jp/keyword/%A4%CF%A4%C6%A4%CA%A5%D6%A5%C3%A5%AF%A5%DE%A1%BC%A5%AF%A5%A8%A5%F3%A5%C8%A5%EA%A1%BC%BE%F0%CA%F3%BC%E8%C6%C0API?kid=184075） で取得したJSON形式のデータをページに表示したいのですが、どの様にすれば良いのでしょうか。 例えば http://b.hatena.ne.jp/entry/json/http://okwave.jp/ のブックマークコメントを抜き出したり、ということを想定しているのですが、可能でしょうか。 よろしくお願いします。
- ベストアンサー
- PHP
- Javascriptで複数のjsonを読み込みたい
Javascriptについてご教授頂きたい点があり、質問しました。 私事で、現在とあるサイトの修正を行なっています。そのサイト内の更新情報の部分がJavascriptで制作されており、具体的にはjson形式のファイルをJavascriptで読み込み、HTMLとして出力する形になっています。 質問下部が、そのJavascriptです。 現在はjsonファイルをひとつだけの読み込んで表示しているのですが、 今後コンテンツの拡充するため、2種類のjsonを読み込む必要がでてきました。 jsonファイルの中身や項目ついては2種類ともほぼ同じような内容です。 考えられる様々な方法を試してみたのですが、うまくいかず、質問させていただきました。 どなたかお力添えを頂けないでしょうか。 var result2 = ''; var rec2 = 5; var jsonHostname = "元々のJSONのディレクトリURL"; var jsonUrl = ''; jsondata2 = ""; function callback_whats_new(data2) {callbackCommon2(data2);} function callbackCommon2(data2) { jsondata2 = data2; if(typeof jsondata2 == 'object'){ draw2(); } else { indexDiv2.innerHTML = '<br><div class="t_m" style="text-align:left; margin-left:8px;">当サイトをご覧いただくには、<br>JavaScriptとFlashの再生環境が必要となります。<br><br>' + '詳しくは「<a href="">ご利用に際して</a>」をご覧ください。<br><br></div>'; } } function getIndex2(n2) { var list = n2; var type = list; indexDiv2 = document.getElementById(type); filename = type; var url = jsonHostname + filename + '.json?' + (new Date().getTime()); 元々入っていたjsonファイルののURL var idval = 'jsonp_' + type; var charset = 'utf-8'; charset = charset ? charset : 'utf-8'; var headObj = document.getElementsByTagName('head')[0]; var scriptTag = document.getElementById(idval); if (scriptTag) { headObj.removeChild(scriptTag); } scriptTag = document.createElement('script'); scriptTag.type = 'text/javascript'; scriptTag.id = idval; scriptTag.charset = charset; scriptTag.src = url; headObj.appendChild(scriptTag); } function draw2(e,n1, n2, n3, n4) { result2=""; if (typeof n1 != 'undefined') turn = n1; if (typeof n2 != 'undefined') cat_2 = n2; if (typeof n3 != 'undefined') category = n3; hl = jsondata2.headline; if(typeof rec2!='number'){ hlLength = hl.length; }else if(rec2 > hl.length){ hlLength = hl.length; }else{ hlLength = rec2; } tMon = 0; for (var i = 0; i < hlLength; i++) { wrHTML2(i); } if (result2) { indexDiv2.innerHTML = result2; } else { indexDiv2.innerHTML = '<span class="t_m">該当する情報はありません。</span>\n'; } if (typeof list == 'object' && listNum < list.length) getIndex2(list); } function wrHTML2(n) { var f = 0; var f2 = 0; var icon=""; var date = (jsondata2.headline[n].date) ? jsondata2.headline[n].date : ""; if (cat_2 && cat_2 != Number(date.substr(4,2))) return; var uri = (jsondata2.headline[n].uri.uri) ? jsondata2.headline[n].uri.uri : ""; var tar = jsondata2.headline[n].uri.target; var no = jsondata2.headline[n].txt.no; var txt = (jsondata2.headline[n].txt.txt) ? jsondata2.headline[n].txt.txt : ""; var jsOpenWinFlg; if (-1!= uri.indexOf("/html/")){ if (-1!= (jsOpenWinFlg = uri.indexOf("/report/"))){ var aElementAttr = 'href="JavaScript:popupWin(\''+uri+'\',\'subwin\',\'900\',\'700\');"'; }else if (-1!= (jsOpenWinFlg = uri.indexOf("/news/other/"))){ var aElementAttr = 'href="JavaScript:popupWin(\''+uri+'\',\'subwin\',\'900\',\'700\');"'; }else{ var aElementAttr = 'href="'+uri+'" target="'+tar+'"'; } }else{ var aElementAttr = 'href="'+uri+'" target="'+tar+'"'; } if (date) date = date.substr(2,2) + '/' + date.substr(4,2) + '/' + date.substr(6); result2 += '<table width="100%"><tr>'; result2 += '<td width="17%" valign="top">' + date + '</td>'; result2 += '<td width="83%" valign="top">'; result2 += '<a ' + aElementAttr + '>' + txt + '</a>'; result2 += '</td>'; result2 += '</tr></table>'; }
- 締切済み
- JavaScript
- jQueryで配列JSONの読み込み方法
phpからの返り値data（json形式）を表示したいのですがうまくいきません。 コンソール上でjsonを取得できているようなのですが、値を表示しようとするとundifinedと表示されてしまいます。 どのように書き換えれば動作するようになるのでしょうか？ よろしくおねがいします！ -------------------------------------------------------- ■ receive.js ■ -------------------------------------------------------- $.ajax({ type: "POST", url: "receive.php", data: { "id": 3 }, success: function(data){ console.log(data); alert(data.time); //ここで「undifined」のエラーが出ます！！ $("#go").after(data.id); //ここは何も表示されません。 $("#str").html('準備完了'); }, error: function(data){ $("#str").html('準備未完了'); }, }); -------------------------------------------------------- ■ receive.php ■ -------------------------------------------------------- <?php require 'dbconnect.php';//dbconnectを呼び出し $data = array(); $id = $_POST['id']; $sql = " SELECT * FROM sample_table WHERE id = " . $id; $result = mysqli_query($connect,$sql) or die("クエリの送信に失敗しました。<br />SQL:".$sql); while ($row = mysqli_fetch_array($result)) { $data[] = $row; } mysqli_close($connect) or die("MySQL切断に失敗しました。"); // MySQLへの接続を閉じる header('Content-Type: application/json; charset=utf-8'); echo json_encode($data); ?> -------------------------------------------------------- ■ index.html ■ -------------------------------------------------------- <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" src="./js/jquery-1.7.2.min.js"></script> <title>PHP * jQuery * ajax * MySQL</title> <script type="text/javascript" src="receive.js"></script> <script type="text/javascript" src="post.js"></script> </head> <body> <div class="ltd-form"> <form id="inquiry-form" method="get"> <fieldset> ・ ・ ・ </fieldset> <div id="go"></div> </form> </div> <div id="str"></div> </body> </html> -------------------------------------------------------- ■ 実行後のChromeのコンソール ■ -------------------------------------------------------- 0: Object 0: "3" 1: "1423789247" 2: "96" 3: "963" data1: "96" data2: "963" id: "3" time: "1423789247" --------------------------------------
- ベストアンサー
- JavaScript
- タグをテキストに置き換えた後にURLを読み取る方法
掲示板にURLが入力された際に自動でリンク生成ができるようにしているのですが、タグをテキストに置き換えて(HtmlSpecialChars)実行すると上手くいきません… こんな感じです。 多少省略しています。 「＆」に問題があるのでしょうか・・・ $text = HtmlSpecialChars($rec['value']); $text = preg_replace("/>>([0-9]+)/","<a href=\"./test.php?id=$id&end_id=\\1\">>>\\1</a>",$text);
- ベストアンサー
- PHP
- JSONデータをフォームにセットしたい
JSONデータを「jQuery.val」でフォームにセットしたいのですが、うまくいきません。どうしたら良いでしょうか？ 具体的には、[",]が削除された状態でセットされます。元は配列ですが、JSONデータへ変換したので、フォームへセット出来ると思っていたのですが…。 JSONは、「ある形式に沿った文字列」という認識でいたのですが、違うのでしょうか？ ■コード $jsondata= json_encode($originalarray) <script type="text/javascript"> var result = <?php echo($jsondata) ?>; $("input#jsondata").val(result); </script> ■変数 ・$originalarray Array ( [0] => ./im/1a.j [1] => ./im/2.j [2] => ./im/9_1.j ) ・jsondata [".\/im\/1a.j",".\/im\/2.j",".\/im\/9_1.jp"] ・フォームにセットされる値 ./im/1a.j./im/2.j./im/9_1.jp →ここに「jsondata」をセットさせたい
- ベストアンサー
- JavaScript
お礼
お時間のお忙しい中、お付き合い頂きましてありがとうございました。もっと、技術を高めたいと思っております。重ねて、ありがとうございました。自分でも、サクッと答えられるようになるように頑張ります。
補足
ご連絡ありがとうございます。 ソースコードを記載頂きたく下記のご回答につきましては、 全てお願いしたいのですが、お恥ずかしいところではございますが本音でございました。 １．json文字列パースによるのObject配列への変換（Ajax使っているならOKみたいですが） ２．現在時刻の文字列整形（抽出比較のため） ３．効率的な抽出処理 ４．３をさらに掘り下げた処理（指定時刻に現番組、次番組がない場合など） ５．取得したObject配列要素の出力形式への整形 ６．出力要素への反映（これは誰でもわかるかｗｗｗ） 何度もお手数をおかけしてしまいましたが、もう一度、自分で何とかしてみます。ありがとうございました。