javascript 配列のループが終わった後にメッセージ

現在の予定と、次の予定が表示され、ボタンを押すと次の予定が現在の予定に入り、次の予定にまた次の予定が入るようなシステムを作成したいです。

イメージ・・・
現在：国語9：00～10：00　当番：森本田中　　
次の予定：算数11：00～12：00　当番：松本中村【ボタン】

data: function() {
　return {
     today_schedule: [
       { id:'1', plan: '国語', start: '9:00', end: '10:00', name: [ '森本','田中'], },
       { id:'2', plan: '算数', start: '11:00', end: '12:00', name: [ '松本', '中村' ], },
       { id:'3', plan: '理科', start: '13:00', end: '14:00', name: [ '山下', '青山' ], },
i: -1,
peplename: '',

ボタンを押すと「教科」や「時間」は表示されるのですが、
「当番」の名前が表示されません。どうしたらよいのでしょうか、ご教授ください。
consoleにエラーはとくに出ておりません。

methods: {
　clickButton: function(event){
　　　this.i = this.i+1;
 },
　person: function(){
    　for (var a=0; a<=this.today_schedule[this.i].participant.length; a++){
      this.peplename += this.today_schedule[this.i].participant[a] + ' ';
     　　}
　},
}

また、次の予定がなくなった時・・・
現在：理科13：00～14：00　当番：山下青山
次の予定：次の予定はありません
さらにボタンを押したとき・・・
現在：本日の予定は全て終了しました。
次の予定：次の予定はありません

というようにしたいです。今は次の予定に表示するものがなくなるとその直前でボタンを押しても動かなくなります。

長々と申し訳ありません。
よろしくお願いします。

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

回答1件

ベストアンサー

＞「当番」の名前が表示されません。どうしたらよいのでしょうか、ご教授ください。
参照しているデータが name: [ '森本','田中']のように配列になっているからですね。
簡単な解決としては、「配列を文字列に変換」するとよいでしょう。

https://qiita.com/kazu56/items/4246d491fa434e37c944

＞今は次の予定に表示するものがなくなるとその直前でボタンを押しても動かなくなります。
配列のデータ領域外を参照してしまっているからですね。
配列のサイズ(this.today_schedule.length)をiが超えないかどうかチェックするif関数を処理の冒頭に作成しましょう。

投稿2019/12/24 00:33

編集2019/12/24 00:41

Rocky

総合スコア261

meronpansuki

2019/12/24 01:59

お返事ありがとうございます。＞簡単な解決としては、「配列を文字列に変換」するとよいでしょう。送って頂いたURLと同じ書き方をしたものを変数に入れ、その変数を表示するようにしてみましたが画面上特に変化が起きませんでした。 this.peplename = this.today_schedule[this.i].name.join(','); 変数に格納すること自体間違っているのでしょうか。お手数おかけしてすみません。

Rocky

2019/12/24 02:22

プログラミングをする上にあたって「なぜうまくいかないのか」その原因さえわかれば解決したも同然です。これを探るためにはjavascriptの場合、webブラウザに付随する[開発者モード]を使って[コンソール]を見るようにしてください。そうすると画面上には表示されないエラーが表示されるなどします。そういった開発者用の環境を整えたうえで console.log(this.today_schedule[this.i].name.join(',')) をソースコード上に記載して実行してみてください。どういった内容が表示されますか？表示されませんか？一度試してみて下さい。

meronpansuki

2019/12/24 07:53

ありがとうございます。やってみたのですが、コンソールに何もエラーが表示されません。間違ってはいないということでしょうか

meronpansuki

2019/12/24 08:16

Rockyさん！当番、無事に表示されるようになりました！関数をmountedで呼び出していたのが原因でした。初歩的なミスでお恥ずかしい、、.join(',')を使う方法など教えていただきありがとうございます！残りの配列サイズを超えないかチェックするというのは if(this.i <= this.today_schedule.length) というのであってますでしょうか？

Rocky

2019/12/24 10:44 編集

原因が判明したようでなによりです。トラブルの発生個所を絞って、試行錯誤した結果かと思います。今回の工程は次回以降も使えますから頑張ってこのプロセスを習得してください。ご質問の内容に答えるのであれば　if(iがtoday_scheduleを超えていないかどうか){ 　//超えているときの処理　}else{ 　//超えていないときの処理（現在の通常処理）　} という具合です。すこし意地悪に書いてますが、私もその問いに答えようと思ったらちゃんと環境を作って実際に試してみないと確証が得られませんので。 (おそらく何かのフレームワークを使っているか、他人のプログラムを改造している様子なので詳細分かりかねますが、どの部分でif分岐させるかは質問者さんのセンスが必要になります。) 細かな動作がうまくいかないときは、おそらく構文や文法が間違っていますから、都度、コンソールなどからエラーがどこで発生しているのかをチェックしていくようにしてください。何かにつまづいたら、エラーの内容と一緒にまたここに書いて下さい。頑張って。

meronpansuki

2019/12/25 00:58

おはようございます。 if文を書いてみました！ボタンを押し進めて最後の"次の予定はありません。" と出てほしいところまでいくとコンソールに「未定義のプロパティ'plan'を読みおはようございます。 if文を書いてみました！ボタンを押し進めて最後の"次の予定はありません。" と出てほしいところまでいくとコンソールに「未定義のプロパティ'plan'を読み取れません。」というエラーがでました。（同様に'plan'の部分が'name'や'start'のものも）iがtoday_scheduleより大きくなる時＝なにもiに入っていない状態になるからではないかとおもったのですが、この考えはあってますでしょうか？

Rocky

2019/12/25 01:34

素晴らしい進捗ですね。その通りです。厳密には配列サイズを超えるiによってtoday_scheduleの定義されていない部分を参照しようとしているからですね。 person: function(){... の部分でエラーが発生していますからその部分でエラーを回避するか、 clickButton: function(event){... の部分でiをコントロールしてエラーそのものを発生させないようにするか、どちらかを実装してみるのがよいのではないでしょうか。

meronpansuki

2019/12/25 02:10

ありがとうございます！教えていただいたclickButtonの方のやり方をやりたいと思い、 if(this.i == this.today_schedule.length){ this.i = 100; 　//100もデータあることはないので }, という文章を足してみたのですが、コンソールに先ほどと同じエラーがきえません。文章が変なのでしょうか、、

Rocky

2019/12/25 03:10

this.today_scheduleの100番目を参照した結果、起こるべきことが起こっています。つまり空っぽのデータを見ようとして、エラーが出ていますね。ここから先は手段と方法がいくつもあるので、いろいろ考えてみてください。今の方向性で手っ取り早くやるなら、 today_schedule: [ { id:'1', plan: '国語', start: '9:00', end: '10:00', name: [ '森本','田中'], }, { id:'2', plan: '算数', start: '11:00', end: '12:00', name: [ '松本', '中村' ], }, { id:'3', plan: '理科', start: '13:00', end: '14:00', name: [ '山下', '青山' ], }, { id:'4', system: '次の予定はありません', }, というデータ構造にしてしまって、 if(this.i < this.today_schedule.length){ this.i = this.i+1; } とするのがよいでしょう。分からなければおっしゃってください。また、次に追加していく機能によっては、この設計だと拡張性がない場合があります。いろいろ検討してみてください。

meronpansuki

2019/12/25 04:12

ありがとうございます。せっかく素敵な案を教えていただいて申し訳ないのですが、＞この設計だと拡張性がない場合があります。に当てはまってしまうと思います。。本当に申し訳ないです。また別のシステムを作成する機会にやってみようと思います！

Rocky

2019/12/25 05:58

おそらくそうでしょう。today_schedule構造体のルールにも抵触してしまう、よくない実装の例になりましたね。ですのでここから先は、というかそもそも全体の設計にかかる部分や処理の流れそのものは質問者さんが試行錯誤するしかありません。細かい部分の動作で技術的に不明なことがあればまた質問してください。

meronpansuki

2019/12/26 01:35

ありがとうございます！頼りっぱなしですみません。 vue.jsを使っているのですが、v-showを使って <p v-show="todayend">今日の授業は全て終了しました。</p> iとtoday_schedule.lengthが＝だったらtodayendをtrueにするという文を clickButtonに追加してみました。が、「レンダリングのエラー： "TypeError：未定義のプロパティ 'start'を読み取れません」というエラーがでます。文章が間違っていますでしょうか・・・

Rocky

2019/12/26 02:14

なんというか、大変ですね。分からないままお仕事いろいろ振られてるんでしょう。今回のことはすべて、javascriptの基本的な扱い方が分からないまま、vue.jsを触っているのが原因です。 javascriptの基本的な制約にひっかかっているのか、vue.jsの使い方を間違えているのかをまずは自分で判断できるようになってください。そのためには、javascriptの基本的な構文やルールが理解できなければいけませんよ。最後の質問はこのスレッドで回答する範疇を超えているので、いったんこの回答は締めて、別の質問を開始して下さい。質問の仕方を工夫すると、僕以外にもいろんな諸先輩方が丁寧に教えてくれますよ。teratailにおいては自助努力をどの程度してるかはすぐばれます。引き続き頑張ってください。

meronpansuki

2019/12/26 02:28

まさしくその通りでお恥ずかしいです。。ありがとうございます。また、新たに質問し直してみます。長いことお付き合いいただきありがとうございました！また見かけたらよろしくお願いします。

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