テキストファイルを読み込み、オブジェクトにして表組の形式でWebページに表示したいです。

ボールドテキスト###
"1","大島","8"
"2","荒木","4"
"3","平田","9"
"4","ビシエド","3"
"5","ナニータ","7"
"6","エルナンデス","5"
"7","堂上","6"
"8","桂","2"
"9","福","1"
というようなデータがあって
これをWebページに表にして掲載しています。

表のフォーマットは基本的にあまり変わりません。
たまーにえらい人が「ここ赤くして」とか「ここ広くして」とか言われたときに対応するくらいの頻度です。
データは毎日Excelで届きます。

今はこんな感じで書いています。

<table> <tr> <td id="dajun01"></td> <td id="name01"></td> <td id="position01"></td> </tr> ----- 略あと8人分 ----- </table> <script type="text/javascript"> function sta(_order, _name, _position) { this.order = _order; this.name = _name; this.position = _position; } var stamen = []; stamen[0] = new sta("1","大島","8"); ----- 略あと8人分のデータ ----- for (i=0;i<9;i++) { $("dajun0" + i).html(stamen[i].dajun); $("name0" + i).html(stamen[i].name); $("position0" + i).html(stamen[i].position); } </script>

###発生している問題
現在は私がひとりで更新していますので
毎日来るデータをExcelで
stamen[0] = new sta("1","大島","8");
という形に変えて、それをコードの中へ貼り付けて更新しています。
これを「コードを読まなくても誰でも更新できる形」にしたいです。
となると考えられるのは元データをCSV形式か何かのテキストデータにして
それを読み込んで… という形ではないかと思いました。

###試したこと
stamen[0] = new sta("1","大島","8");
…
とデータを貼り付けるところに、代わりに以下を書いてテキストファイルを読み込んでみました。

$.ajax({
url: 'memberhyo.txt',
success: function(data){
var mem = data.split(/\r\n|\r|\n/);
for (var i in mem) {
stamen[i] = mem[i];
}
}
});

テキストファイルの中身はこれです。
"1","大島","8"
"2","荒木","4"
"3","平田","9"
"4","ビシエド","3"
"5","ナニータ","7"
"6","エルナンデス","5"
"7","堂上","6"
"8","桂","2"
"9","福","1"

mem[i]に
"1","大島","8"
以下のデータが入ることは確認しました。
でもstamen[i]はundefinedです。
これをどうしたら
stamen[0] = new sta("1","大島","8");
の形までもっていけるかがわかりません。

###補足情報(言語/FW/ツール等のバージョンなど)
環境はSharePoint2010オンプレミス版です。なのでHTML5とかCSS3とか使えません…。

私のレベルはjavascriptとjQuery初心者、ajaxって名前は見たことあるけど何でしょう？というレベルです。
なのでわからずにトンチンカンなことを質問しているかもしれません。
お世話をおかけしますがよろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

関数を２つに分割しました。
データを受け取ってそれを綺麗に整形して配列を返すようにしてます。

また、テキストデータが以下のように「""」を含むようなデータだったので成型するときにどちらでも対応できるようにコメントを残してますので良かったらお使い下さい。

txt
1"1","大島","8"
2"2","荒木","4"
3"3","平田","9"
4"4","ビシエド","3"
5"5","ナニータ","7"
6"6","エルナンデス","5"
7"7","堂上","6"
8"8","桂","2"
9"9","福","1"

html
1<html>
2<head>
3  <title>タイトル</title>
4  <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
5</head>
6<body>
7  <script>
8
9
10    // データを受け取ってそれを綺麗に成型してから返す
11    var trimDataFromText = function(data){
12      var trimedMembers = []
13      var members = data.split(/\r\n|\r|\n/);
14      for(var i = 0; i < members.length; i++){
15        var _tmp = []
16        var member = members[i].split(',');
17        for(var j = 0; j < member.length; j ++){
18          _tmp.push(member[j].replace(/^\"|\"$/g, ''))
19
20
21          console.log(member[j]) // => "大島"と出る
22          console.log(member[j].replace(/^\"|\"$/g, '')) // => "大島"から先頭と末尾の"を削除したパターン
23        }
24        trimedMembers.push(_tmp)
25      }
26      return trimedMembers
27    }
28
29    $.ajax({
30      url: 'memberhyo.txt',
31      success: function(data){
32        var members = trimDataFromText(data)
33        for(var i = 0; i < members.length; i++){
34          var member = members[i];
35          console.log('member[0]', member[0])
36          console.log('member[1]', member[1])
37          console.log('member[2]', member[2])
38        }
39      }
40    });
41  </script>
42</body>
43</html>

わからないことがあれば聞いて下さい！

投稿2016/12/15 16:49

MasakazuFukami

総合スコア1869

sumire_cl

2016/12/16 13:28

ありがとうございます！ console.logのところのタイミングでtableの要素へ入れればいいんだなと思ってやってみたら上手にtableに入りました。これで更新データを外部テキストにできます。「データを受け取ってそれを綺麗に成型してから返す」のところの関数の作り方は、とても勉強になりました。分解して二次元にしたいときはこうやるんですね。

行動規範の内容に同意します