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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

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

API

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

Q&A

解決済

2回答

1703閲覧

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

roronoazoro

総合スコア113

JavaScript

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

API

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

0グッド

0クリップ

投稿2017/12/19 06:29

編集2017/12/19 07:28

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

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

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

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

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Event Search</title> 8 <link rel="stylesheet" href="style/main.css"> 9</head> 10<body> 11 <h1>Event Search</h1> 12 <main> 13 <form id="search-form" type="search" placeholder="ex. JavaScript"> 14 <input type="search" id="search-input" placeholder="ex. JavaScript"> 15 <button type="submit">Search</button> 16 </form> 17 <ul id="event-list"></ul> 18 </main> 19 <script src="script2.js"></script> 20</body> 21</html>

javascript

1/*========================= 21. XHRで同じドメインのデータを取得 32. XHRでクロスドメインのデータを取得する 43. JSONPでクロスドメインのデータを取得する 54. 検索ワードでイベント情報を表示する 6 =========================*/ 7 8(function () { 9 'use strict'; 10 11 var searchForm = document.getElementById('search-form'); 12 var searchInput = document.getElementById('search-input'); 13 var eventList = document.getElementById('event-list'); 14 15 var searchEvents = function (event) { 16 event.preventDefault(); 17 18 if (!searchInput.value) { // 空だったら 19 return; 20 } 21 var element = document.createElement('script'); // urlをjsから読み込む 22 element.src = 'http://api.atnd.org/events/?format=jsonp&keyword=' 23 + encodeURI(searchInput.value); 24 document.body.appendChild(element); 25 document.body.removeChild(element); 26 }; 27 28 // HTMLの見た目の部分 29 var showEvents = function (data) { 30 eventList.innerHTML = ''; 31 if (data && data.events instanceof Array) { 32 data.events.forEach(function (eventData) { // 1個1個が入ってくる 33 var eventInfo = eventData.event; 34 var time = document.createElement('time'); 35 time.textContent = formatData(eventInfo.started_at); 36 var link = document.createElement('a'); 37 link.href = eventInfo.event_url; 38 link.target = '_blank'; 39 //link.textContent = event.title; 下記に変更 40 link.textContent = eventInfo.title; 41 var li = document.createElement('li'); 42 li.appendChild(time); 43 li.appendChild(link); 44 eventList.appendChild(li); 45 }); 46 } 47 }; 48 49// 追記 50var formatDate = function (dateString) { 51 var date = new Date(dateString); 52 return (date.getMonth() + 1) + '/' + date.getDate(); 53 }; 54 55 56 searchForm.addEventListener('submit', searchEvents); 57 window.callback = showEvents; 58}()); 59

エラー内容

エラー

お手本

イメージ説明

追記

イメージ説明

  • formatData → formatDate

イメージ説明

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

x_x

2017/12/19 06:46

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

2017/12/19 07:12

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

2017/12/19 07:29

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

回答2

0

ベストアンサー

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

投稿2017/12/19 06:44

masaya_ohashi

総合スコア9206

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

roronoazoro

2017/12/19 07:08

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

2017/12/19 07:31

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

0

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

投稿2017/12/19 07:23

yambejp

総合スコア114583

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問