JavascriptでHTMLのテーブルへの書き込みについて

当質問を気にかけて頂きありがとうございますm(_ _)m
この度の質問は、webデザインについての質問になります。

現在、下記のような形で、ボタンをクリックするとテーブルに記入されたTwitterIDのフォロー数＆フォロワー数を取得してテーブルに書き込むというソフトを開発しています。

html
1<body>
2    <div id="topflame">
3
4        ID:
5        <input type="text" id="twitterid"> PASS:
6        <input type="text" id="twitterpass">
7        <input type="button" value="追加" onclick="insertRow();">
8        <input type="button" value="通信" onclick="GetData();">
9        <input type="button" value="Set" onclick="SetData();">
10
11    </div>
12    <div id="downflame">
13        <div id="itsthetable">
14            <table>
15                <tbody id="account">
16                    <tr>
17                        <th class="free">表示名</th>
18                        <th class="free">TwitterId</th>
19                        <th class="free">TwitterPass</th>
20                        <th class="pro">フォロー数</th>
21                        <th class="pro">フォロワー数</th>
22                    </tr>
23                </tbody>
24            </table>
25        </div>
26    </div>
27</body>

javascript
1function SetData() {
2    var account = document.getElementById("account");
3    for(var i = 1 ; i < account.rows.length + 1 ; i++){
4    var url = "http://twitter.com/" + account.rows[i].cells[1].innerText;
5    request(url, function(error, response, body) {
6            if (!error && response.statusCode == 200) {
7                if (body.match(/e=.*人のフォロワー/i)) {
8                    var follower = body.match(/e=.*人のフォロワー/i);
9                    follower = follower.toString().substr(3);
10                    follower = follower.toString().replace("人のフォロワー","");
11                    follower = follower.toString().replace(",","");
12                    ListFollowerCount.push(follower); 
13                }
14                if(body.match(/e=.*人をフォロー中/i)){
15                    var follow = body.match(/e=.*人をフォロー中/i);
16                    follow = follow.toString().substr(3);
17                    follow = follow.toString().replace("人をフォロー中","");
18                    follow = follow.toString().replace(",","");
19                    ListFollowCount.push(follow);              
20                }
21            }
22        })  
23    }
24}

上記JavaScriptでfollowerにフォロワー数、followにフォローの取得に成功しています。
ここから、この取得したデータをテーブルに書き込みたいのですが、どうしてもうまくいかず困っています。

テーブルに書き込む処理を以下にように記述してみたのですが

javascript
1function SetData() {
2    var account = document.getElementById("account");
3    for(var i = 1 ; i < account.rows.length + 1 ; i++){
4    var url = "http://twitter.com/" + account.rows[i].cells[1].innerText;
5    request(url, function(error, response, body) {
6            if (!error && response.statusCode == 200) {
7                if (body.match(/e=.*人のフォロワー/i)) {
8                    var follower = body.match(/e=.*人のフォロワー/i);
9                    follower = follower.toString().substr(3);
10                    follower = follower.toString().replace("人のフォロワー","");
11                    follower = follower.toString().replace(",","");
12                    ListFollowerCount.push(follower);
13            //追記箇所 ※※※
14                    account.rows[i].cells[4].innerText = ListFollowerCount[i - 1]; 
15                }
16                if(body.match(/e=.*人をフォロー中/i)){
17                    var follow = body.match(/e=.*人をフォロー中/i);
18                    follow = follow.toString().substr(3);
19                    follow = follow.toString().replace("人をフォロー中","");
20                    follow = follow.toString().replace(",","");
21                    ListFollowCount.push(follow);       
22            //追記箇所 ※※※
23                    account.rows[i].cells[3].innerText = ListFollowerCount[i - 1];        
24                }
25            }
26        })  
27    }
28}

このように、テーブルIDのaccountを取得し、account.rows[i].cells[3].innerText = ListFollowerCount[i - 1]; というような形で記述しているのですが、これだとテーブルの表示がまったく更新されません。

取得まで成功しているので後はテーブルへの挿入だけなのですが、どこに間違えががあるのか、玄人の方、アドバイス頂ければ嬉しく思います。
かれこれ同じ箇所で2時間くらい悩みまして、進みそうにないので助けを求めてみました。
どうぞ、よろしくお願い致します。

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

回答2件

ベストアンサー

一つ目のソースがおかしいというのは、正しい位置に表示されないという意味ですかね？
だとしたら、配列にpushしている時としていない時があるのが原因ではないかと。

二つ目のソースが更新できないのは、
コールバックが呼ばれる時にはiの値が変わっているのが原因ではないですかね。

以下で対応できるのではないかと思います。

JavaScript
1var timer;
2function SetData() {
3    var account = document.getElementById("account");
4    for(var i = 1 ; i < account.rows.length; i++){
5    var url = "http://twitter.com/" + account.rows[i].cells[1].innerText;
6    request(url, function(error, response, body) {
7            if (!error && response.statusCode == 200) {
8                if (body.match(/e=.*人のフォロワー/i)) {
9                    var follower = body.match(/e=.*人のフォロワー/i);
10                    follower = follower.toString().substr(3);
11                    follower = follower.toString().replace("人のフォロワー","");
12                    follower = follower.toString().replace(",","");
13                    ListFollowerCount.push(follower); 
14                }else {
15                    ListFollowerCount.push("");
16                }
17                if(body.match(/e=.*人をフォロー中/i)){
18                    var follow = body.match(/e=.*人をフォロー中/i);
19                    follow = follow.toString().substr(3);
20                    follow = follow.toString().replace("人をフォロー中","");
21                    follow = follow.toString().replace(",","");
22                    ListFollowCount.push(follow);              
23                }else {
24                    ListFollowCount.push("");
25                }
26            }
27        })  
28    }
29    displayUpdate();
30}
31function displayUpdate(){
32    if (ListFollowerCount.length = account.rows.length - 1){
33        // データが出そろったら更新
34        for(var i = 1 ; i < account.rows.length; i++) {
35            account.rows[i].cells[4].innerText = ListFollowerCount[i - 1];
36            account.rows[i].cells[3].innerText = ListFollowerCount[i - 1];
37        }
38    }else{
39        setTimeout(displayUpdate, 100);
40    }
41}

投稿2016/03/24 04:53

moredeep

総合スコア1507

fama

2016/03/25 10:54

こちら、非常に参考になるコードで回答して頂きましてありがとうございました。様々な部分がとても勉強になりました。ありがとうございます。

moredeep

2016/03/26 09:23

すみません、1行目に余分な処理がありました。無視してください。

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

現状thタグを含むtr列しかないので、account.rowsは要素数が1なのでは？
よってaccount.rows[1]にはアクセス不能になるのでは。
列追加するならinsertRowしないと。。。

投稿2016/03/23 22:55

tkturbo

総合スコア5572

fama

2016/03/24 00:39

わかりにくくてすみません！insertRowはされた状態だと思って頂ければ幸いです。Javascriptの方、見難くなると思いinsertRow関数は省略しておりまして、実際は複数行になっている状態です。

tkturbo

2016/03/24 02:02 編集

では「account.rows[1].cells.length」はいくつになってますか？ insertRow直後のtr列は中身(tdタグ/cell)が入ってない状態のはずですが。ここでinsertCellしてますか？ ■追記：「account.rows[i]」で意図した行が取れているのかも気になります。また、「account.rows[i].cells[3].innerText =follow」としない理由はなんでしょう？

fama

2016/03/25 10:55

この度、上記の方の回答にて解決する事が出来ました。何度かご対応頂きましてありがとうございます。今後ともよろしくお願い致します。

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

あなたの回答