質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

91.25%

  • JavaScript

    11752questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • API

    1078questions

    APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

javascript、APIレスポンスフィールドを使用したエラーについて

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 232

roronoazoro

score 57

現在動画学習サイトSchooのイベント検索システム編を視聴し写経しているのですが、エラーの原因が分からずにかなり時間がかかってしまっています。
一応大枠の流れとしては下記のようになっています。

  1. XHRで同じドメインのデータを取得
  2. XHRでクロスドメインのデータを取得する
  3. JSONPでクロスドメインのデータを取得する
  4. 検索ワードでイベント情報を表示する

エラーを見る限り、time変数に対してstarted_atとしたAPI絡みの部分でエラーが起こっているようなのですが、正直どのように解決したらいいのか全く分かりません。

下記にコード、エラーキャプチャ、お手本抜粋を記載いたします。
何かアドバイス頂けますと幸いです。
よろしくお願いいたします。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Event Search</title>
  <link rel="stylesheet" href="style/main.css">
</head>
<body>
  <h1>Event Search</h1>
  <main>
    <form id="search-form" type="search" placeholder="ex. JavaScript">
      <input type="search" id="search-input" placeholder="ex. JavaScript">
      <button type="submit">Search</button>
    </form>
    <ul id="event-list"></ul>
  </main>
  <script src="script2.js"></script>
</body>
</html>
/*=========================
1. XHRで同じドメインのデータを取得
2. XHRでクロスドメインのデータを取得する
3. JSONPでクロスドメインのデータを取得する
4. 検索ワードでイベント情報を表示する
 =========================*/

(function () {
  'use strict';

  var searchForm = document.getElementById('search-form');
  var searchInput = document.getElementById('search-input');
  var eventList = document.getElementById('event-list');

  var searchEvents = function (event) {
    event.preventDefault();

    if (!searchInput.value) { // 空だったら
      return;
    }
    var element = document.createElement('script'); // urlをjsから読み込む
    element.src = 'http://api.atnd.org/events/?format=jsonp&keyword='
      + encodeURI(searchInput.value);
    document.body.appendChild(element);
    document.body.removeChild(element);
  };

  // HTMLの見た目の部分
  var showEvents = function (data) {
    eventList.innerHTML = '';
    if (data && data.events instanceof Array) {
      data.events.forEach(function (eventData) { // 1個1個が入ってくる
        var eventInfo = eventData.event;
        var time = document.createElement('time');
        time.textContent = formatData(eventInfo.started_at);
        var link = document.createElement('a');
        link.href = eventInfo.event_url;
        link.target = '_blank';
        //link.textContent = event.title; 下記に変更
        link.textContent = eventInfo.title;
        var li = document.createElement('li');
        li.appendChild(time);
        li.appendChild(link);
        eventList.appendChild(li);
      });
    }
  };

// 追記
var formatDate = function (dateString) {
    var date = new Date(dateString);
    return (date.getMonth() + 1) + '/' + date.getDate();
  };


  searchForm.addEventListener('submit', searchEvents);
  window.callback = showEvents;
}());

 エラー内容

エラー

 お手本

イメージ説明

 追記

イメージ説明

  • formatData → formatDate
    イメージ説明
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • x_x

    2017/12/19 15:46

    突然formatDataという関数を呼び出していますが、どこにも定義されていません。script2.jsで定義しているのでしょうか?

    キャンセル

  • roronoazoro

    2017/12/19 16:12

    関数作るところ見落としていました。ありがとうございます。試してみます。

    キャンセル

  • roronoazoro

    2017/12/19 16:29

    やはり関数を追記したところ無事表示されました。迅速なアドバイスありがとうございました。修正点本文javascriptにも追記しておきました。

    キャンセル

回答 2

checkベストアンサー

+3

エラー画面の赤文字に注目してください。
ReferenceError: formatData is not definedとありますね。これは「formatDataなんて名前のものは知らん」と言われています。お手本ではその箇所は「formatDate」となっていますね。つまりタイプミスです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/12/19 16:08

    ご回答ありがとうございます。formatData→formatDateに書き換えて再度試してみたものの相変わらず`ReferenceError: formatData is not defined`と出てしまいます。。

    キャンセル

  • 2017/12/19 16:31

    お手本の中にformatDateというfunctionがどこかで定義してないですか?我々はお手本のすべてが見えているわけではないので、単純な漏れを疑うしかできません。

    キャンセル

0

formatDataはユーザー関数でしょうか?
であればそれをきちんと宣言して書かないといけないでしょう

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

ただいまの回答率

91.25%

関連した質問

同じタグがついた質問を見る

  • JavaScript

    11752questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • API

    1078questions

    APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。