Q&A
回答が付いた質問の編集は慎重に行ってください。少なくとも指摘部分を修正したことがわかるようにしないと、その部分に対する回答者の指摘が後から見る人にとって意味の無い（誤った）指摘になってしまいます。
業務関係のことなので一部伏せながらの話になってしまいますが、
###前提・実現したいこと
JavaScript製のAPIを叩いて、そのAPIの情報によりまた別のJavaScriptでHTMLを操作し、画像の表示非表示などを操作したいです。
###発生している問題・エラーメッセージ
APIの使い方に問題はないはずなのですが、Firefox以外のブラウザでは以下のようなエラーが出ます。
Uncaught TypeError: e.getHogeByFuga is not a function
ただ、ブラウザ側で一通り表示が終わってからこのAPIにコンソールでアクセスすると、問題なくAPIからオブジェクトが帰ってきます。
###該当のソースコード
HTML
1<head> 2<script src="api-source.js"></script> 3<script src="controll.js"></script> 4</head> 5<body> 6<!-- 以下略 -->
JavaScript
1// controll.js 2 3// API初期化 4/*旧ソース （指摘があったため修正） 5A.API.init(){}; 6*/ 7A.API.init({'lang':'ja'}, function(){}); 8 9A.API.getHogeByFuga({'fuga':'piyo'}, function(err, res){ 10/*旧ソース（指摘があったため修正） 11var = res; 12*/ 13 var response = res; 14});
###試したこと
- API初期化処理をHTML側に書いてみました。 => 同じエラーが出ました。
###補足情報(言語/FW/ツール等のバージョンなど)
APIの使い方ですが、
HTMLに以下を配置します。
HTML
1<script src="api-source.js"></script>
上記のHTMLタグの後ろなどでAPI初期化処理を実行します。
JavaScript
1/*旧ソース （指摘があったため修正） 2A.API.init(){}; 3*/ 4A.API.init({'lang':'ja'}, function(){});
その後、APIの各種メソッドを以下のように呼び出すことで、データが取得可能です。
JavaScript
1A.API.getHogeByFuga({'fuga':'piyo'}, function(err, res){ 2 if (err != null){ 3 // エラーがあればerrに情報が入る 4 } 5 var = res; 6});
以上です。
詳細などを見せることができずに申し訳御座いません。
回答3件
0
ページが表示されてからなら動くのであれば、初期化をそこまで待てば良いのでは。
JavaScript
1document.addEventListener( 'DOMContentLoaded', function() { 2 // API初期化 3 A.API.init(){}; // 本当にこの書き方で動きますか？ 4 5 // API情報問い合わせ; 6 A.API.getHogeByFuga( { 'fuga' : 'piyo' }, function( err, res ){ 7 var = res; // varという変数は使えないと思いますが… 8 }); 9} );
投稿2016/06/28 02:34
総合スコア69407
同意します。
A.API.init が TypeError にならず、A.API.getHogeByFuga が TypeError になるのなら A.API.getHogeByFuga が動的に生成されている可能性があります。
DOMContentLoaded, load イベントのタイミングで確認すれば見えてくるものがある気がします。
console.log(A.API.init);
console.log(A.API.getHogeByFuga);
document.addEventListener('DOMContentLoaded', function () { console.log(A.API.getHogeByFuga); }, false);
addEventListener('load', function () { console.log(A.API.getHogeByFuga); }, false);
thnk49さん
なるほど。皆さんの意見で「遅延させればうまくいきそう」とは分かったのですが、
「いま読まれてるの？」
がわからなかったので参考になりました。
kei344さん
コードのご指摘までしていただいてありがとうございます。
また、修正に関して今後気をつけたいと思います。
今回は本当にありがとうございます。
0
ベストアンサー
断片的な情報なので、簡単に解答します。
JavaScript
1// API初期化 2A.API.init(){};
まずこの部分ですが、関数を実行する場合は
JavaScript
1// API初期化 2A.API.init();
このように書くはずです。
この部分でエラーになっていませんでしょうか？
またコチラのエラーですが
Uncaught TypeError: e.getHogeByFuga is not a function
「e.getHogeByFuga」という名前の関数がない、もしくは「e.getHogeByFuga」は関数ではない、といった意味です。
ただ、ブラウザ側で一通り表示が終わってからこのAPIにコンソールでアクセスすると、問題なくAPIからオブジェクトが帰ってきます。
ということでしたら、「e.getHogeByFuga」があるかどうか（api-source.jsの準備が整ったかどうか）を待ってから、実行すると良いかと思います。
投稿2016/06/28 02:31
総合スコア429
回答ありがとうございます。
おっしゃられた通り、setTimeoutを使って、初期化後の処理を100ms遅延させて実行したところうまくいきました。
ありがとうございます。
0
おそらく、ブラウザ別のjavascriptの実装の違いに引っかかるものなのでしょう。
しかし、何が問題なのかは、見なきゃ分かりませんので、誰も回答できないです。
申し訳御座いませんが、ご自分で頑張ってください。
投稿2016/06/28 02:24
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
