JavaScriptのLINQ.jsの使い方
- JavaScriptで多次元配列を扱うために便利なLINQ.jsの使い方について解説します。
- LINQ.jsは非常に使いやすく、並べ替えやフィルタリングなどの操作が簡単に行えます。
- 特定のキーワードが含まれている配列の抽出方法も詳しく説明します。
- ベストアンサー
javascriptのlinq.js
いつもありがとうございます。 以前質問した http://okwave.jp/qa/q8731703.html で教えていただいた、javascriptで多次元を配列を扱う為のlinq.jsを使用しています。 http://www.atmarkit.co.jp/fdotnet/dotnettips/1058linqjsbasic/linqjsbasic.html 非常に使いやすくて重宝しているのですが、様々な使い方を解説した日本語のサイトが無くて困っています。 並べ替えや、数値でフィルタを掛けて必要な配列を抽出すことは旨く行ったのですが、 指定のキーワードが含まれている配列を探す方法が分からず困っています。 例えば以下の様な配列を扱う場合 var array = [ {'title':'あいうえお', 'price':2400,'stock':10}, {'title':'あかさたな', 'price':5210,'stock':7}, {'title':'ばびぶべぼ', 'price':1499,'stock':2} ...... ]; このtitleに「あ」が含まれてるやつだけ抽出すると言った時にどうやって書けば良いのでしょうか？ linq自体も今回初めて使う初心者です。 よろしくお願いします。
- macus
- お礼率76% (331/433)
- JavaScript
- 回答数3
- ありがとう数12
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
軽くリファレンスを見ましたが、文字列操作関連が見当たらなかったので、 愚直に JavaScript のやり方で実現 // titleに「あ」が含まれてるやつだけ抽出 Enumerable.From(array).Where('$.title.match(/あ/)')
その他の回答 (2)
- shockatz
- ベストアンサー率80% (153/191)
LINQ.jsを紹介した元凶です（笑 var selected_array = ＿Enumerable.From(array) ＿＿.Where(function (item) { ＿＿＿return Enumerable.From(item.title).Contains('あ'); ＿＿}) ＿.ToArray(); titleの文字列値から特定の要素を抽出する部分は、文字列をEnumerableに分解して、Contain()メソッドを使うのがLINQ的かと。
お礼
再度、回答ありがとうございます！ LINQ.jsの紹介もありがとうございました！本当に便利で重宝しております。 Containsいろいろ試したんですがダメでした。こうやって書くとできるんですね！ 新たに勉強になりました。ありがとうございます！！
- b0a0a
- ベストアンサー率49% (156/313)
linq.jsは知りませんが、素のJSだとこうです。 array.filter(o => o.title.contains('あ'))
お礼
回答ありがとうございます。 containsは試したのですがダメでした。。。
関連するQ&A
- jqueryで配列をMySQLのように扱えないか？
いつもありがとうございます。 jqueryでの配列の使い方を知りたいです。 以下のような連想配列を作っています。 実際は数千データで、項目も20項目以上あります。 var array = [ {'title':'商品名1', 'price':2400,'stock':10}, {'title':'商品名2', 'price':5210,'stock':7}, {'title':'商品名3', 'price':1499,'stock':2} ...... ]; これを、項目（例えばtitle）で並べ替えとかは出来たのですが、 もっと複雑な使い方がしたいのですがどうしたらいいのかわかりません。 やりたいことは、例えば以下のような条件で取り出したいです。 ・titleに、xxxxxというキーワードが入っているデータだけ取り出す ・priceがＸ以下のデータだけ取り出す ・複数の条件に合ったデータのみ取り出す。 ＳＱＬであれば上記の事は簡単に出来るのですが、 配列だとどうやってあつけばいいのかわかりません。。。 最初からデータベースに入っているデータを扱えば？ ってなるのですが、毎回数千データを取ってくると凄く時間がかかります。 なので、データベースから取ってきたデータを一旦配列に全部入れて、 後は配列内だけで処理した方が処理速度が速いので、できれば配列で扱いたいです。 アドバイスなどありましたら何卒よろしくおねがいしますm(_ _)m
- ベストアンサー
- CSS
- linq.jsでの連想配列の検索方法について
・前提・実現したいこと javascriptでlinq.jsを使い、連想配列に格納したデータを検索したいと思っています。 どなたか連想配列を使用した場合の無名変数の書き方をご教授いただけますでしょうか？ ・発生している問題・エラーメッセージ 特にエラーメッセージは出ていませんが、検索結果０件になります。 ・該当のソースコード // クラス定義 // function cQuestion(qIndex, qContent,qImportance){ this.qIndex = qIndex; this.qContent = qContent; this.qImportance = qImportance; } //問題リスト(連想配列) var questions = new Object(); //リストに追加 questions['A01'] = new cQuestion( 'A01', 'テスト' , 9] ); //検索結果 記述A var listItems = Enumerable.From(questions) .Where(function(x) {return x.qIndex == 'A01'}) .Select(function(x) { return x.qIndex }) .ToArray(); //検索結果 記述B var listItems = Enumerable.From(questions) .Where(function(key) { return this[key].qIndex == 'A01'},questions) .Select(function(key) { return this[key].qIndex },questions) .ToArray(); ・試したこと データはquestionsに格納できています。 「記述A」と「記述B」とで記述してみました。
- 締切済み
- JavaScript
- javascriptでwriteできない
カレンダーをjavascriptで作成しているのですが、以下でidocに書き込みしようとした際に、linkとbodyが書き込めずに困っております。 -------------------- var idoc = null; cal="<title>カレンダ</title><script type='text/javascript'>var arGYear = new Array('1912','1926','1989');var arGDate = new Array('19120731','19261225','19890108');var arGengo = new Array('大正','昭和','平成');var arGengoI = new Array('T','S','H');var arHoliday = new Array('20170204','20170205','20170210','20170211','20170212','20170218','20170219','20170225','20170226','20170304','20170305','20170311','20170312','20170318','20170319','20170320','20170325','20170326','20170327','20170401','20170402','20170403','20170404','20170405','20170406','20170407','20170408','20170409','20170410','20170411','20170412','20170413','20170414','20170415','20170416','20170417','20170418','20170419','20170420','20170421','20170422','20170423','20170424','20170425','20170426','20170427','20170428','20170429','20170430','20170501');</script><script type='text/javascript' src='./js/ifrmCalendar.js'></script><link href='css/ifrmCalendar.css' rel='stylesheet' type='text/css' /><body></body>"; idoc.write(cal); -------------------- 現状、IE11,cromeでの再現を確認しています。（firefoxは未試験） どのようにすれば書き込めるものでしょうか。 退職者から引き継いだPCで、退職者が使用していた際には発生していなかったのですが、私が当該PCにアカウント作成して使用するようになってから発生しております。 環境回りも確認しているのですが、それと思われるものも見つけられません。 お教え頂けますと幸いです。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- jsからの配列を渡す方法
jsからphpに配列でデータを渡す方法がわからずに困っています。 詳しく説明しますと js側で var Pname ="ナマエ"; Ext.data.Store.Load({params: {name: Pname}}); と記述し php側で $name = $_GET["name"]; とすると $nameには"ナマエ"と入ってくることは分かっているのですが このPnameを配列で渡した場合、php側でどうやって値を取得するのかが わかりません。 var Pname = new Array[]; Pname[0] ="ナマエ0"; Pname[1] ="ナマエ1"; Pname[2] ="ナマエ1"; Ext.data.Store.Load({params: {name: Pname}}); と、こんな感じのデータをphpに渡して処理を行いたいのです。 そもそもjs側の渡し方がまずいのか php側の読み方に工夫をすればよいのかわかりません。 申し訳ありませんが、わかる方いらっしゃいましたら よろしくお願いします。
- 締切済み
- PHP
- ｊｓ array -1
javascriptのソースコードの引用なのですが <!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>サンプル</title> </head> <body> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script src="fastclick.js"></script> <script> function print(str){ document.write(str + "<br />"); } document.write("<p>"); var ary = new Array("東京", "大阪", "名古屋"); for (var i = 0 ; i < ary.length ; i++){ print("array[" + i + "] = " + ary[i]); } document.write("</p>"); document.write("<p>"); try{ var ary2 = new Array(-1); }catch(e){ print(e); } document.write("</p>");</script> </body> </html> ３０行目ｔｒｙ文の中の「 var ary2 = new Array(-1); 」なのですがnewで初期化をしているという事は何となく理解できるのですが 引数で-1を指定しているのですが-1を指定する意味は何かあるのでしょうか？
- ベストアンサー
- JavaScript
- JavaScript 配列とiframe
カテゴリを誤って投稿してしまいました。 インラインフレームを二つ（iframe1,iframe2）用意し、jQueryにてクリック出来るようにしたdiv要素のクリックで、それぞれのリンク先をJavaScriptの配列に収めた連番通り、1,2,3,4…htmlと表示させたいのですが、二つの配列を使用すると連番通りに表示されなくなります。（一つの配列使用では連番通りに表示されます。） 1クリックで、iframe1にはiframe1link1.htmlの表示、iframe2にはiframe2link1.htmlの表示。クリックごとにlink2,link3と順番どおりに表示する、これを可能にするお知恵を拝借したいと思い投稿させて頂きます。よろしくお願いいたします。 =＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ （JavaScript(1)iframe1.js） var URLs=new Array(); var cnt=0; URLs[1]="iframe1link1.html"; ******* URLs[10]="iframe1link10.html"; function Jump1(){ cnt++; if(cnt==11) {cnt=0;} iframe1.location.href=URLs[cnt]; } ==＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ （JavaScript(2)iframe2.js） var URLs=new Array(); var cnt=0; URLs[1]="iframe2link1.html"; ******* URLs[10]="iframe2link10.html"; function Jump2(){ cnt++; if(cnt==11) {cnt=0;} iframe2.location.href=URLs[cnt]; } =＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ （HTML） <!doctype html> <link rel="stylesheet" href="./css/style.css" type="text/css"> <script src="iframe1.js"></script> <script src="iframe2.js"></script> <title>sample</title> <div id="container" class="div" onclick="Jump1();Jump2()"> <div id="main"> <iframe src="./iframe1link0.html" id="iframe1"></iframe> <iframe src="./iframe2link0.html" id="iframe2"></iframe> </div> </div> これでは連番通りにいかない。 =====＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
- ベストアンサー
- JavaScript
- prototype.jsを使うとfor～inがバグる件
下記について知っている人が居ましたら教えてください。 HTAでprototype.jsを使うとfor～inでバグります。 具体的に， prototype.jsを読み込んだ状態でfor～inして， for～inの情報を参照すると，値ではなくソースコードが表示されます。 prototype.jsを読み込ませない場合で，通常のようにfor～inして， for～inの情報を参照すると，問題なく値が参照できます。 OS環境とバージョンによって違うかもしれませんが，僕の環境では現象が発生します。 対策方法を知っている人がいましたら教えてください。 下記のソースを実行すると， バグらない場合は，次のように出力されます。 hoge piyo toge バグる場合は，次のように出力されます。 function(item, i) { i = isNaN(i) ? this.length : (i < 0 ? this.length + i : i) + 1; var n = this.slice(0, i).reverse().indexOf(item); return (n < 0) ? n : i - n - 1; } -略- { this._each(function(value) { iterator(value, index++); }); } catch (e) { if (e != $break) throw e; } return this; } hoge piyo toge prototype.js使用すると... ///////////////////////////////////// // sample.hta バグ <html> <head> <title>ツール</title> <script type="text/javascript" src="./prototype.js"></script> </head> <body onLoad="javascript:window.resizeTo(600,480)"> <script language="javascript"> { // Iniイメージ // [TEST] // KEY1=hoge // KEY2=piyo // KEY3=toge var section = "TEST"; var key = new Array("KYE1", "KYE2", "KYE3"); var data = new Array("hoge", "piyo", "toge"); // セクション items = new Array(); items[ section ] = new Array(); // キー for(var i=0;i<key.length;i++){ items[ section ][ key[i] ] = data[i]; } // 参照 for(var j in items[ section ]){ document.write( items[ section ][ j ] + "<br />\n" ); } delete key; delete data; delete items; } </script> </body> </html> prototype.js使用しないと... ///////////////////////////////////// // sample.hta バグらない <html> <head> <title>ツール</title> <!-- <script type="text/javascript" src="./prototype.js"></script> --> </head> <body onLoad="javascript:window.resizeTo(600,480)"> <script language="javascript"> { // Iniイメージ // [TEST] // KEY1=hoge // KEY2=piyo // KEY3=toge var section = "TEST"; var key = new Array("KYE1", "KYE2", "KYE3"); var data = new Array("hoge", "piyo", "toge"); // セクション items = new Array(); items[ section ] = new Array(); // キー for(var i=0;i<key.length;i++){ items[ section ][ key[i] ] = data[i]; } // 参照 for(var j in items[ section ]){ document.write( items[ section ][ j ] + "<br />\n" ); } delete key; delete data; delete items; } </script> </body> </html> prototype.jsを最後に読み込ませると... ///////////////////////////////////// // sample.hta バグらない <html> <head> <title>ツール</title> </head> <body onLoad="javascript:window.resizeTo(600,480)"> <script language="javascript"> { // Iniイメージ // [TEST] // KEY1=hoge // KEY2=piyo // KEY3=toge var section = "TEST"; var key = new Array("KYE1", "KYE2", "KYE3"); var data = new Array("hoge", "piyo", "toge"); // セクション items = new Array(); items[ section ] = new Array(); // キー for(var i=0;i<key.length;i++){ items[ section ][ key[i] ] = data[i]; } // 参照 for(var j in items[ section ]){ document.write( items[ section ][ j ] + "<br />\n" ); } delete key; delete data; delete items; } </script> <script type="text/javascript" src="./prototype.js"></script> </body> </html>
- 締切済み
- JavaScript
- C#についての質問（主にLinq関係）
ずっと独学でプログラミングをやっている者です。 C#を用いて現在開発しているのですが、たまたま見つけたLinq構文がとても綺麗だと思い、 現在練習中です。 そこで少し疑問点が出てきたので誰か回答お願いします>< 例えば、「ある整数の配列の中から、偶数を探し出し、見つかった要素の数字を見つかった要素の個数分加算する」というような問題があったとします（一例ですが...）。 普通に書くと...（ちょっと上下に切り詰めてます><） int[] ary = new int[]{2, 1, 5, 4, 5, 2}; //<<<今後この行は割愛します^^ int count = 0; for(int i = 0; i < ary.Length; i++) if(ary[i] % 2 == 0) count++; for(int i = 0; i < ary.Length; i++) if(ary[i] % 2 == 0) ary[i] += count; //結果は{5, 1, 5, 7, 5, 5} みたいな感じでしょうか。 これでも全然いいのですが、条件を二回使用しているのもなんだかすっきりしないですし、 IEnumerableなコレクション全てに対応させるには少し不向きな書き方ですよね？ forEachも考えましたが、forEachだと最後の行が... forEach(int i in ary.slect(new {val = ary[i], ix = i}) if(i.val % 2 == 0) ary[i.ix] += count; みたいな回りくどい方法しか今のところ思いつきません。 理想は... var where = ary.where(v => (v % 2 == 0)); int count = where.count(); Array.ConvertAll(where, v => v + count); //<<<もちろんコンパイルエラー^^ こんな感じでかけたらいいのになぁとか思ってます。 最後の行を... ary = ary.select(v => v + count).ToArray(); とすれば似たようなことはできるのですが、 これだと新しい配列が出来てしまいますよね？ 今回の例では構わないのかもしれませんが、 大きな配列になってくるとメモリが心配になる書き方なので少し気持ち悪いです>< それとも現代ではそんなことはお構いなしなのかなぁ...とか思うときもありますが^^ （↑なんせ独学なもので常識知らずです><） なにかすっきりとした実装方法は無いでしょうか？ それとも今回のような配列の中身を更新、変換するような場合には、 Linqを用いること自体が推奨されていないのでしょうか？ ずっと、C++と同じような方法でコレクションを扱ってきていたので、 ガベージコレクションの挙動も良くわかっていません。 deleteのし忘れを防ぐぐらいの機能なのか、配列だろうがどんどん新しくメモリを確保しても 大丈夫な機能なのか...？です。 Linqのような構文もまだまだ付け焼刃です。 もしかしたら、結構基本的な所を見落としている可能性もあります>< どなたかご教授お願いしますm(-_-)m
- 締切済み
- CSS
- 【JS（Jquery）】表示切替 show(); hide();
お世話になります。 ただ今JSのライブラリ（Jquery)を利用してあるプログラムを書いております。 以下がそのスクリプトとなり、内容は、 配列「tBtn」の1番目がホバーされたら 配列「tBlo」の1番目を表示し、「tBlo」の１番目以外は非表示にする。 配列「tBtn」の２番目がホバーされたら 配列「tBlo」の２番目を表示し、…以下省略。 配列「tBtn」の1番目がホバーされたら 配列「tBlo」の1番目を表示するという動作は理解できるのですが、 「tBlo」の１番目以外を非表示にするにはどういう書き方をすれば よろしいでしょうか。 どなたかお知恵をお貸しください。 $(function(){ var tBtn = new Array( 'hk', 'tk', 'ho' , 'kt' ); var tBlo = new Array( 'test1', 'test2', 'test3' , 'test4' ); $.each(tBtn, function(i, item) { $("#" + this).hover(function(){ /* if(this != tBtn[i]){ $("#" + tBlo[i]).fadeOut(); } */ },function(){ return false; }); }); });
- 締切済み
- JavaScript
- javascriptを使って画像を切り替える
javascriptを使って画像（id="chengeImg"）を切り替えたいと思っています。 画像はsamp0.jpg～samp4.jpgの計5枚 ただ、問題があって、 画像によって移り替わる時間を変えたいんです。（一定ではない） setTimeoutの引数(time)と画像を、どう結びつければよいのかが 分からず困っています。 それぞれ、 画像0の時は5000ミリ秒 画像1の時は4000ミリ秒 画像2の時は3000ミリ秒 … と移り変わる速度を変えたいのです。 一応、timeは配列がいいのかと配列にしてみました それが良いのかどうかも定かではないのですが… どのようにすれば、時間が一定でない画像切り替えが可能になるでしょうか？ スクリプトを詳しく教えていただけると、ありがたいです。 以下、javascriptの一部を記します。 【js】ファイル(imagechange.js)------ window.onload=anime; var img=new Array(5); img[0]=new Image(); img[1]=new Image(); img[2]=new Image(); img[3]=new Image(); img[4]=new Image(); img[0].src="samp0.jpg"; img[1].src="samp1.jpg"; img[2].src="samp2.jpg"; img[3].src="samp3.jpg"; img[4].src="samp4.jpg"; //画像枚数 var num=0; //時間制御 time = new Array(5000, 4000, 3000, 3000, 3000); function anime(){ var ch = document.getElementById("changeImg"); ch.src=img[num].src; if(num<4){ num++; }else{ num=0; } setTimeout("anime()",time); } 【html】ファイル-------- <head> <title>画像切り替え</title> <script type="text/javascript" src="imagechange.js"</script> </head> <body> <p><img src="samp0.jpg" width="700" height="200" id="chengeImg"></p> </body> </html> 以上となります。 詳しい方、ぜひ教えてくださいませ。 どうぞ宜しくお願いいたします。
- ベストアンサー
- JavaScript
お礼
回答ありがとうございます！ すごい！！これで出来ました！！ 本当にありがとうございます！