

MonacaアプリでCSVファイルを読み込みデータを表示するプログラムを作成していますが、  
検索をかけてもCSVファイルが読み込めないです。

文字列を入力→部分検索で検索結果の一覧を表示。  
その後結果をクリックで詳細ページに転移・・・といった流れのプログラムを考えています。

今後のために勉強したいので教えてください。お願いします。

[⑤テキスト検索機能の組み込み](http://www.shurey.com/js/labo/db/)  
↑を参考にしてHTML・JS・CSVをmonacaにそのままコピー・アンド・ペーストさせてもらいました。  
プレビュー上では動きますが端末デバックでは検索をかけると検索画面から転移せずに  
[uncaught re:list is not defined]  
エラーが表示されます。

参考ページからAjax通信をすることはわかり事前勉強もしました。  
「オフラインではAjaxの通信機能が使えないため、必ずサーバ上にファイルを転送してテストしてください。」

**[プレビューでは動くが端末デバッグで動かない]**  
についてコード内をどのように変更すればいいかわかりません  
解決策を教えてください。

個人情報丸出しのサンプルアプリを作ろうとしていたため  
参考ページだけの表示になります、すみません。  
有効なプラグインは  
Contacts,Custom Config,Device,Device Motion,Device
Orientation,File,Geolocation,InSppBrowser,Monaca Plugin,Network
Information,Nifty,Notification,Splashscreen,Vibration,Whitelistの１５点です。

インストールしたコンポーネントは初期のままで  
cordova(phonegap),Monaca Core Utilityの２点です。

ブラウザはChrome、実機はXperia(TM) Z2 SO-03Fになります

**_テキスト検索_**

[code]

    for (n=1;n<list.length;n++) { 
    
[/code]

**_がUncaught ReferenceError: list is not definedになりました・・・_**

以下コードになります。  
**_index.html_**

[code]

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>テキスト検索機能の組み込み</title>
    <script type="text/javascript" src="xmlhttp.js"></script>
    <script type="text/javascript"><!--
    function loadTextFile(fName)
    {
    httpObj = createXMLHttpRequest(displayData);
    if (httpObj)
    {
    httpObj.open("GET",fName,true);
    httpObj.send(null);
    }
    }
    function displayData()
    {
    if ((httpObj.readyState == 4) && (httpObj.status == 200))
    {
        //CSVから配列変数へ読込
     CSVtoAD(httpObj.responseText);
     <!--★削除-->
    }
    }
    // --></script>
    </head>
    <body onLoad="loadTextFile('sample3.csv')">
    <h1>テキスト検索機能の組み込み</h1>
    <!--★-->
    <form name="ajaxForm" onSubmit="output_result(); return false">
    <!--★-->
      <input name="searchtext" type="text"> 
      <input type="submit" value="検索">
    </form>
    <div id="resultData">入力例：「mac」「5,000」「液晶」</div>
    
    <script type="text/javascript"><!--
    //CSVから配列変数へ読込
    function CSVtoAD(csv) {
     var n,m;
     
     var count_rec = 0; //レコードを数える
     var count_fld = 0; //フィールドを数える
     
     //改行コード
     csv = csv.replace(/\r\n/g,"\n");
     csv = csv.replace(/\r/g,"\n");
     
     //""（フィールド内の"に対応）
     csv = csv.replace(/""/g,"&quot;");
     
     list = new Array();
     
     //データ毎の取得処理
     n = 0;
     do {
      //次の改行位置
      var eor = csv.indexOf("\n",n);
      
      if (eor > -1) {
       if (csv.substring(n,eor) != "") {
        //フィールド用配列
        if (count_fld == 0) list[count_rec] = new Array();
        
        //先頭に「"」がある場合
        var m = csv.indexOf("\"",n);
        if (m == n) {
         //次の「"」をデータの終わりとする
         eod = csv.indexOf("\"",n+1) + 1;
         //レコードの終わり位置の修正（""内の改行を無視）
         eor = csv.indexOf("\n",eod);
         
         m = 1;
        } else {
         m = 0;
         eod = n;
        }
        
        //「,」の位置
        eod = csv.indexOf(",",eod);
        //改行の前にある場合
        if ((eod > -1) && (eod < eor)) {
         //そのままフィールドの終わりとする
        } else {
         //改行位置をフィールドの終わりとする
         eod = eor;
        }
        
        //配列変数へ
        list[count_rec][count_fld] = csv.substring(n+m,eod-m);
                
        //レコードの終わり
        if (eod == eor) {
         count_rec++;
         count_fld = 0;
        } else {
         count_fld++;
        }
        
        //次の検索開始位置
        n = eod + 1;
         
       } else {
        count_fld = 0;
        n = eor + 1;
       }  
      }
      
      if (n > csv.length) eor = -1;
    
     } while (eor > -1);
    }
    
    //★検索一覧の表示
    function output_result() {
     var n,m,r;
     //検索文字列を取得
     var s = document.ajaxForm.searchtext.value;
     //検索結果
     t = "";
     
     //テキスト検索
     for (n=1;n<list.length;n++) {
      //検索ヒット
      var bool = false;
      //[1]商品名～[6]説明文を検索
      for (m=1;m<7;m++) {
       //正規表現（大文字小文字無視）
       reg = new RegExp(s,"i")
       //部分検索
       r = list[n][m].match(reg);
       if ((r != "") && (r != null)) {
        //ヒットしたデータを取得
        t += output_text(n);
        //以後の項目は検索しない
        break;
       }
      }
     }
      
     //結果出力
     document.getElementById("resultData").innerHTML = t;
    }
    
    //★データ取得
    function output_text(num) {
     var n;
      
     var t = "<p><a href='javascript:output_detail(" + num + ")'>" + list[num][1] + " 【" + list[num][2] + "】</a> 価格：" + list[num][3] + " 在庫：" + list[num][4] + "<br>" + list[num][6] + "</p>";
     
    
     //データ出力
     return t;
    }
    
    //詳細データの表示
    function output_detail(idx) {
     var n;
     
     var t = "";
     
     if (idx > 0) {
      t += "<table border='2'>";
      t += "<tr><td bgcolor='#ffff99'>" + list[0][1] + "</td><td>" + list[idx][1] + "</td><td rowspan='5'><img src='img/" + list[idx][7] + "' height='200'></td></tr>";
      t += "<tr><td bgcolor='#ffff99'>" + list[0][2] + "</td><td>" + list[idx][2] + "</td></tr>";
      t += "<tr><td bgcolor='#ffff99'>" + list[0][3] + "</td><td align='right'>" + list[idx][3] + "</td></tr>";
      t += "<tr><td bgcolor='#ffff99'>" + list[0][4] + "</td><td align='right'>" + list[idx][4] + "</td></tr>";
      t += "<tr><td bgcolor='#ffff99'>" + list[0][5] + "</td><td align='center'>" + list[idx][5] + "</td></tr>";
      t += "<tr><td bgcolor='#ffff99'>" + list[0][6] + "</td><td colspan='2'>" + list[idx][6].replace(/\n/g,"<br>") + "</td></tr>";
      t += "</table>";
     }
     
     //テーブル出力
     document.getElementById("resultData").innerHTML = t;
    }
    // --></script>
    
    </body>
    </html>
[/code]

**_xmlhttp.js_**

[code]

    function createXMLHttpRequest(cbFunc)
    {
    var XMLhttpObject = null;
    try{
    XMLhttpObject = new XMLHttpRequest();
    }catch(e){
    try{
    XMLhttpObject = new ActiveXObject("Msxml2.XMLHTTP");
    }catch(e){
    try{
    XMLhttpObject = new ActiveXObject("Microsoft.XMLHTTP");
    }catch(e){
    return null;
    }
    }
    }
    if (XMLhttpObject) XMLhttpObject.onreadystatechange = cbFunc;
    return XMLhttpObject;
    }
[/code]

[sample3.csv](http://www.shurey.com/js/labo/db/sample3.csv)


CC BY-SA 3.0
2016-10-09T15:20:27.163
29445
2016-11-13T08:46:03.867
2016-10-11T14:34:48.353
19014
19014
question
javascript monaca html5 ajax csv
MonacaアプリでCSVファイルを読み込むには？


> [uncaught re:list is not defined]

Monacaのデバック環境をよく知りませんが、このエラーは、Chromeであれば`Uncaught ReferenceError: list is not
defined` となるエラーと同じに見えます。  
これは変数`list`を定義する前に参照したという事です。

参考になさっているという <http://www.shurey.com/js/labo/db/db05.html>
を見ると、関数`CSVtoAD`でグローバル変数である`list`が作られています。  
他の関数は、これを参照しているようです。  
であれば、`CSVtoAD`の呼び出し前に他の関数（`output_result`?）が呼びだされたのだろうと推測できます。

`CSVtoAD`は関数`loadTextFile`から呼ばれており、`loadTextFile`は`body`タグの`onload`属性で呼び出されるはずですが、ここらへんがブラウザと実機で動作が異なり、実機でのみエラーになっている、とう推測もできます。

しかし、コードを見ずに推測できる事は限りがありますし、一般に意味のある質問にするためには、コードが必要です。  
こういった質問の際は、[最小限の・自己完結した・確認可能なサンプルコードの書き方](https://ja.stackoverflow.com/help/mcve)
を参考にコードを載せるようにして下さい。

また、エラーメッセージには発生箇所などの情報もあるはずですので、それも必要です。

* * *

jQuery は <http://www.shurey.com/js/labo/db/xmlhttp.js> を見るかぎり使われていません。

* * *

追記:

> 呼び出し前に他の関数が呼ばれているのか

各関数の冒頭で`console.log`などでのデバッグ出力を行なわせ確認する方法があります。

[code]

    function CSVtoAD(csv) {
        console.log("CSVtoAD: start");
    
[/code]

> ブラウザと実機の違いだったら、それをどのようにして埋めるのか

対応策は原因が分かってから考える方がよいです。  
また、質問に掲載されたコードですが、私の環境(cordova 6.3.1、Android 6.0.0)ではエラー無く動きました。


CC BY-SA 3.0
2016-10-10T07:37:54.880
29452
2016-10-11T15:06:22.600
2017-04-13T12:52:39.113
-1
3054
29445
answer