- ベストアンサー
なぜ、この場面で、ループ関数が必要なのでしょうか！
プログラムレベルは下の下です。 以下のＨＰはhtmlとphpプログラムのコラボレです。 "表示"タグをクリックすれば、 "Google" "Yahoo" " CBS News" "abc NEws" のタグが出てきて、クリックすれば、ホームページが見れるという 単純なHPです。 そこで、分からに事があります。 sample6.htmlの中に"for"関数がありますが、ループ関数が使われています。 このプログラムのからくりを勉強中ですが、現在ループでつまづいています。_ _ なぜ、この場面で、ループ関数が必要なのでしょうか！？ 以下プログラムです、宜しくお願いします。 ファイル名：sample6.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>配列とJSON</title> <script type="text/javascript" src="../lib/jquery-1.8.1.min.js"></script> <script type="text/javascript"> $(function (){ $("#exe").click(hello); }); function hello(){ $.get("sample6.php", {}, function(resp){ var json = eval(resp); var tags = ""; for (var i = 0; i < json.length; i++) { if(i==0){ tags +="<div>サーチ&ポータル</div>"; }else if(i==2){ tags +="<br/><div>USニュースサイト </div>"; } tags += '<a href="' + json[i].url + ' "> ' + json[i].name + '</a><br/>'; } $("#show").html(tags); }); ;} </script> </head> <body> <h2>配列、連想配列とJSON <input type="button" id="exe" value="表示 "/><h2> <p id="show"></p> </body> </html> ファイル名：sample6.php <?php $arr[0]["name"] = "Google"; $arr[0]["url"] = "http://www.google.co.jp/"; $arr[1]["name"] ="Yahoo!"; $arr[1]["url"] = "http://www.yahoo.co.jp/"; $arr[2]["name"] = "CBS News"; $arr[2]["url"] = "http://www.cbsnews.com/"; $arr[3]["name"] ="abc News"; $arr[3]["url" ]= "http://abcnews.go.com/"; header("Content-Type: text/javascript; charset=utf-8"); echo json_encode($arr); ?>
- javascriptphp
- お礼率50% (71/142)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
多分、「配列」に慣れていないから疑問なんですかね？ 配列の概念がわかればおのずとわかるはずです。 JSONで応答されたデータが配列に入っています。（JSONとかは今回は触れないでおきます。データの形です） 通常の変数には一つの値しか入れることができません。 それに対して、配列は複数のデータを格納することができます。 ただ、複数のデータが入っていますからそのまま展開することはできません。 そのため、ループを使って一つずつ配列からデータを取り出して出力しています。
関連するQ&A
- ループ内のaddeventlistner
javascript初心者です、いろいろ検索したのですがわからず 教えてください。 サンプル <div id="hoge"></div> <script type=application/javascript> window.onload=function () { var html="検索エンジンのビッグ３" var big3= [ { "name":"google", "url":"http://google.com" }, { "name":"yahoo!", "url":"http://yahoo.com" }, { "name":"bing", "url":"http://bing.com" } ]; for (var i = 0, len = big3.length; i < len; i++) { html+= "<br />名前:"+big3[i].name+"<br />"; html+= "URL:"+big3[i].url+"<br />"; html+= '<input type="button" id="btn" value="投票" /><br />' }; document.getElementById("hoge").innerHTML=html; } </script> ----サンプルここまで このように配列をずらずらっと表示させてそれぞれのボタンを押すと、 その時の配列の情報を参照したいのです。 下のコードをボタンのすぐ下に置きましたが、cannot call method addEventListener of nullってエラーでできず、for文の外だと配列情報がとれず、基礎がわかっておらずすみませんが教えてください。 document.getElementById("btn").addEventListener('click',function(){alert("あなたがおしたのは"+big3[i].name)},false);
- 締切済み
- JavaScript
- コールバック関数が動かない
Ajaxでサーバ通信を試みています。 Javaは少しわかるんですが、JvascriptやjQueryはサッパリちんぷんかんぷんな状態です。 今、ボタンクリックで「doAction()」を呼んで、Javaのクラス「/greetinglist」に キーワード「id」を渡して検索結果を受け取って表示しようとしています。 function doAction() は働いて、Java側の検索もできてるんですけど、そこで終了してしまいます。 コールバック関数「function callback(resp)」が動いてくれません。 FireBugで動きを追っていますが、特にエラーはないようです。 「function doAction()」 はjQueryを使っていますが、「function callback(resp)」はJavaScript だという認識です。 <script type="text/javascript" src="js/datastore.js"></script> <script src="/js/jquery-1.7.2.min.js"></script> <script type="text/javascript"> //<![CDATA[ function doAction(){ var id = $('#month').val(); console.log("id==========" + id); $.getJSON('/greetinglist',{id:id},callback,"json"); } function callback(resp){ var json = eval(request.responseText); var res = ''; for (var i = 0;i < json.length;i++){ res += '<td>' + json[i].month + '</td>' + '<td>' + json[i].tenDays + '</td>' + '<td>' + json[i].greeting + '</td>' + '<td><a href="greetingdetail.html?id=' + json[i].id + '">詳細</td>'; } var obj = document.getElementById("datatable"); obj.innerHTML ='<tr><td>id</td><td>月</td><td>旬</td><td>文章</td><td>編集</td></tr>' + res; console.log("res==========" + res); }
- ベストアンサー
- JavaScript
- jquery上で2つのスクリプトの合体
下記のように「サブページその1 hoge.ne.jp/read1000.php」からスクレイピングしたtakahashiという文字を、「メインページ hogehoge.jp/index.html」の<input type="text">内に表示可能なスクリプトがあります。【現在できていること その1】 また、メインページで取得した変数123456を、URLという形で「サブページ2 read2222.php」のPHPに渡し、サブページ2の中で「123456についてのPHP処理した結果」を、再度メインページで取得して表示するスクリプトがあります。【現在できていること その2】 【やりたいこと】 この2つのスクリプトを合体させ「サブページ1 read1000.php」からスクレイピングしたtakahashiという文字を、URLという形で「サブページ2 read2222.php」のPHPに渡し、サブページ2の中で「takahashiについてのPHP処理した結果」を、再度メインページで取得して表示したいというのが今回の趣旨で、スタックしている部分となります。 ***************************************************************** 【現在できていること その1】 【サブページその1 http://hoge.ne.jp/read1000.php】 <table border="1"> <tbody> <tr> <td class="class3_sql_name">takahashi</td> </tr> </tbody> </table> 【メインページ http://hogehoge.jp/index.html】 <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> <script src="js/jquery.xdomainajax.js"></script> <script> // 引っ張ってきたいサイトのURL url = 'http://hoge.ne.jp/read1000.php'; $.get(url, function(data){ var content3_sql_name = $(data.responseText).find('.class3_sql_name').text(); $("[name='ca2_stock_name']").val(content3_sql_name); }); </script> <input type="text" name="ca2_stock_name" value="" /> ***************************************************************** 上記のスクリプトを実行すると、 <input type="text" name="ca2_stock_name" value="takahashi" /> という形が完成します。 ****************************************************************** 【現在できていること その2】 【サブページその2 http://hoge.ne.jp/read2222.php】 <div id="news200"> こんにちは <?php echo $_GET["name"]; ?> さん </div> 【メインページ http://hogehoge.jp/index.html】 <script type="text/javascript"> var usr_id='123456' $(function(){ $("#read200").load("https://hoge.ne.jp/read2222.php?name="+usr_id+" #news200 ul", function(data) { if(data == null){ $("#read200").append("読込みに失敗しました"); } }); }); </script> <div id="read200"></div> ***************************************************************** 上記のスクリプトを実行すると、 メインページ 上で、サブページ2の<div id="news200"/>....<div> 間を拾ってきて表示することができます。 → こんにちは123456さん メインページ内で「read2222.php?name="+usr_id+"」という形でURLとして一旦サブページ2にトスし、 $_GET["name"] でサブページで処理しものをあらためてメインページで表示させています。 ***************************************************************** 【やりたいこと】 上記の2つのスクリプトを合体させ、 var usr_id='123456' の代わりに、 【http://hoge.ne.jp/read1000.php】にある<td class="class3_sql_name">takahashi</td> のtakahashiを表示させたいと考えています。 → こんにちはtakahashiさん 考え方としては var content3_sql_name の変数をvar usr_idの代わりにすればいいだけです。 ************************************************************** 【試したがうまくいかなかったスクリプト】 <script type="text/javascript"> url = 'http://hoge.ne.jp/read1000.php'; $.get(url, function(data){ var content3_sql_name = $(data.responseText).find('.class3_sql_name').text(); $(function(){ $("#read200").load("https://hoge.ne.jp/read5555.php?name="+content3_sql_name+" #news200 ul", function(data1) { if(data1 == null){ $("#read200").append("読込みに失敗しました"); } }); }); }); </script> <div id="read200"></div> ********************************************************** どこがいけないのかご指導いただけませんでしょうか? 宜しくお願い致します。
- ベストアンサー
- 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
- ループ、プログラムなのに！？
以下のプログラムは、ただの乗算と、その合計を計算するだけなのに、なんでfor (var i = 1; i < 4; i++) { のループ、プログラムなのですか？ もし同じ計算結果のダイアログBOXで、Javaの範疇で組むのであれば、他にどんなプログラムがあるのですか？ よろしくお願いします。 <HTML> <HEAD> <TITLE>ループ</TITLE> <script tytpe="text/javascript"> <!-- function calc(){ var alltotal = 0; for (var i = 1; i < 4; i++) { var price = document.getElementById("price" + i).innerHTML; var num = document.getElementById("num" + i).value; var total = price * num; document.getElementById("total" + i).innerHTML = total; alltotal += total; } document.getElementById("alltotal").innerHTML = alltotal; } </script> </HEAD> <body> <p><span id="price1">100</span><input id="num1" value="0" /><span id="total1">1の合計</span></p> <p><span id="price2">200</span><input id="num2" value="0" /><span id="total2">2の合計</span></p> <p><span id="price3">300</span><input id="num3" value="0" /><span id="total3">3の合計</span></p> <div id="alltotal">合計</div> <button onclick="calc()">計算</button> </body> </HTML>
- ベストアンサー
- JavaScript
- Googlemapb api 複数のマーカー表示に
基礎的なことかもしれませんが、結構調べたりしても分からなかったので、教えてほしいです。 Googlemap api を使った複数のマーカー表示を$getJSON（jQuery)を使用しようして表示させたいのですが、表示できません。 どこがおかしいか教えてください。 【HTML】 1.<!DOCTYPE html> 2.<html> 3.<head> 4.<meta charset="UTF-8"> 5.<title>map</title> 6.<style type="text/css"> 7.html,body,#map { 8.height: 100%; 9.} 10.</style> 11.</head> 12.<body> 13.<div id="map"></div> 14.<script type="text/javascript" src="map.js"></script> 15.<script type="text/javascript" src="jquery-3.6.0.min.js"></script> 16.<script async defer 17.src="https://maps.googleapis.com/maps/api/js?key=【APIキー】&callback=initMap"> 18.</script> 19.</body> 20.</html> 【JavaScript】 1.var map; 2.var marker = []; 3.var data = []; 4.var center = {lat: 36.72073,lng: 137.27112}; 5.function initMap() {//地図の作成 6.map = new google.maps.Map(document.getElementById('map'), { // #mapに地図を埋め込む 7. center: center,// 地図の中心を指定 8. zoom: 15 // 地図のズームを指定 9. }); 10. $.getJSON("aaaaa.json", function(json){ 11. for (var i = 0; i <= json.length-1; i++) { 12. data.push( 13. { 14. 'name': json[i].name, 15. 'lat': json[i].lat, 16. 'lng': json[i].lng 17 }); 18 }; 19. for (var i = 0; i < data.length; i++) { 20. markerLatLng = {lat: data[i]['lat'], lng: data[i]['lng']}; 21. marker[i] = new google.maps.Marker({ //マーカーの追加 22. position: markerLatLng,//マーカーを立てる位置を指定 23. map: map//マーカーをたてる地図を指定 24. }); 25. } 26 });//jsonの閉じ 27.} 【JSON】 [ { "name": "名古屋駅", "lat": 35.170897, "lng": 136.881558 }, { "name": "大名古屋ビルヂング", "lat": 35.172311, "lng": 136.884568 }, { "name": "国際センター駅", "lat": 35.172038, "lng": 136.887701 } ]
- ベストアンサー
- JavaScript
- JSONのデータから商品名の取得の仕方
今現在下記の記述でJSONを取得しています。 ＝＝＝＝＝ <html> <head> <title>JSONのデータを使ってみる</title> </head> <script type="text/javascript" src="./prototype.js"></script> <script type="text/javascript"> function execute() { var url = './ItemSearch_json.php'; var paramList = "keyword=" + encodeURIComponent("ふくろう"); var a = new Ajax.Request( url, { method: 'get', parameters: paramList, onSuccess: function(request) { // alert('読み込み成功しました'); // jsonの値を処理する場合↓↓ var json; eval("json="+request.responseText); }, onComplete: function(request) { alert('読み込みが完了しました'); $('container').innerHTML = request.responseText; // jsonの値を処理する場合↓↓ var json; eval("json="+request.responseText); }, onFailure: function(request) { alert('読み込みに失敗しました'); }, onException: function (request) { alert('読み込み中にエラーが発生しました'); } } ); } </script> <body> <div id="container">content</div> <button onclick="execute()">サンプル実行</button> </body> </html> ＝＝＝＝＝ このままだと、プレーンテキストは表示されるのですが、商品名や価格の一覧などを選択して表示できません。 evalなどを使うのかなと思うのですが、はっきり分かりません。 ヒントを教えていただけないでしょうか。
- ベストアンサー
- AJAX
- GoogleMapsで<UL>タグとの連携
http://bit.ly/7Gt3Cp のサンプルのように，キャンバスの右側（デモは左側になっておりますが）に＜UL＞タグのリストを配置して，それぞれのリンクをクリックすると，該当するマーカーがマップの中央にくるようにPantoで移動するようにしたいと思います． サンプルのコードは，ランダムマーカーだったのと，コードの書き方がすこし特殊な感じで（最初にvar Demoを宣言し，その中にすべての処理を書き込んでいく方法？）あまり参考にできなかったので，別のサンプルを参考にして，JSON形式のデータを取り込むコードを書きました． <html lang="ja"> <head> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=ja"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ // JSON読み込み $.ajax({ url:"students.js", cache:false, dataType:"json", success:function(json){ var data=jsonRequest(json); initialize(data); } }); }); function jsonRequest(json){ var data=[]; //データ全体のラベルはstudentsで，各データは”branch","name","age","lat","lng"などのラベルを持っています if(json.students){ var n=json.students.length; for(var i=0;i<n;i++){ data.push(json.students[i]); } } return data; } function initialize( data ){ var op={ zoom:12, center:new google.maps.LatLng(34.7417512 , 135.3269878 ), mapTypeId:google.maps.MapTypeId.ROADMAP }; var map=new google.maps.Map(document.getElementById("map_canvas"),op); var i=data.length; while(i-- >0){ var dat=data[i]; var obj={ position:new google.maps.LatLng(dat.lat,dat.lng), map:map, title:dat.name }; var marker=new google.maps.Marker(obj); } } </script> </head> <body> <div id="map_canvas" style="width:100%;height:100%"></div> </body> </html> このコードをベースにしていきたいのですが，どこをどうすれば良いのか見当がつきません． // Generate list elements for each marker. var li = document.createElement('li'); var aSel = document.createElement('a'); aSel.href = 'javascript:void(0);'; aSel.innerHTML = 'Open Marker #' + n; aSel.onclick = Demo.generateTriggerCallback(marker, 'click'); li.appendChild(aSel); ul.appendChild(li); 上記はリンク先145行目～152行目です．この部分が当該の機能であることは何となく分かるのですが，必要なオブジェクトの生成や，コールバックの意味あいといったところが分からなくて，どのように書いていけばいいのか分からないで困っています． なにかアドバイスをいただけたらと思いますので，よろしくお願いいたします。
- ベストアンサー
- JavaScript
- JSONPを処理するにはどうすればいいですか？
http://www.baldanders.info/spiegel/remark/archives/000222.shtml このページの下部のサンプルスクリプトを function getjsonp(url){ で囲ってurlを渡してJSONPデータを処理しようとしたのですが、 hundler is not defined とエラーが出てしまいます。 サンプルスクリプトのそのままのコードでは動くのです。 オブジェクト指向がよくわかっていないのでどうすればいいか、識者の方教えてください。 宜しくお願いします。 下記がエラーするスクリプトです。 <script type="text/javascript" src="/js/jsr_class.js"></script> <div id="bookmark"></div> <script type="text/javascript"> var url ='http://del.icio.us/feeds/json/spiegel?callback=hundler'; getjsonp(url); function getjsonp(url){ var oJsr = new JSONscriptRequest(url); oJsr.buildScriptTag(); oJsr.addScriptTag(); function hundler(data) { var ul = document.createElement('ul'); for (var i=0, post; post = data[i]; i++) { var li = document.createElement('li'); var a = document.createElement('a'); a.setAttribute('href', post.u); a.appendChild(document.createTextNode(post.d)); li.appendChild(a); ul.appendChild(li); } document.getElementById('bookmark').appendChild(ul); oJsr.removeScriptTag(); } } </script>
- ベストアンサー
- JavaScript
- フォームからjQuery,jQuery.jsonを使ってJSONを作っ
フォームからjQuery,jQuery.jsonを使ってJSONを作ってPHPで表示したい。 こんばんは。2、3日ずっと悩んでて解決しないので助けてください。 jQuery,jQuery.jsonを使ってJSONを作成しています。 クリックイベントに var form = $("#sform"); var json = $(form.serializeArray()); var strJson = $.toJSON(json); という形をとって $.ajax({ url : "request.php", type : "post", data : strJson, success: function(request){ $('#result').html(request); } }); で送っています。 ただPHP側で var_dump($_POST); を行ってもArray ( ) と表示されます。 firebugで見たところpostに入っているデータは以下の通りです。 {"0":{"name":"date","value":"2010/09/15"},"1":{"name":"type","value":"new"},"2":{"name":"bin[]","value":"2"},"3":{"name":"bin[]","value":"3"},"length":4} var_dumpで表示できないのはなぜでしょうか？ 上記で変数json のまま送るとオブジェクトとして送れてvar_dump でも表示できます。 ただ今はjson の勉強をしているので、できればなぜこうなっているのかを理解したいです。 基本的なところで勉強不足かもしれませんが、何かアドバイスなど頂けると嬉しいです。 よろしくお願いします。
- ベストアンサー
- JavaScript
お礼
有り難うございます。 ”一つずつ配列からデータを取り出して出力” そうですね、質問したことで以下の教本内容が見えてきました。「”for文のインデックスiその要素 を先頭から1つずつ取り出し、その要素となっている連想配列の値は、「ulr」と「name」をキーとして取得して<a>タグ生成用に使用しています。またこの部分は、tag += '<a href="' + json[i]・・・」 以上です^^