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

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

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

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

API

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

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

Q&A

解決済

1回答

2010閲覧

AngularJSでAPIを活用する方法を教えてください!

takyas

総合スコア54

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

API

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

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

0グッド

0クリップ

投稿2015/09/03 14:50

編集2015/09/28 15:13

ご覧いただきありがとうございます。
今現在、オミカレという婚活イベントサイトのAPIを利用したモバイルアプリをMonacaという開発環境とOnsenUIというMonaca専用のフレームワークで構築しています。
Monaca、OnsenUIは主にAngularJSで構築されているので、APIを拾ってくるためにAngularJSを書いているのですが、APIの基本の部分で躓いております。
具体的には以下の部分です。
・APIの戻り値が拾えていない。
・その原因が全くわからない。
(Monacaを使いこなせておらず、デバッグが機能していない。console.log()すらでてこない。)

下記にコードを記載致します。
素人が故にどのような情報をこちらに記載すれば、閲覧者様の解決のお力になるのか理解していないので、追加で必要な情報がございましたら、ご教示いただけますと幸いです。

何卒宜しくお願い致します。

lang

1index.html 2 3<!DOCTYPE HTML> 4<html ng-app="myApp"> 5<head> 6 <meta charset="utf-8"> 7 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 8 <script src="components/loader.js"></script> 9 <link rel="stylesheet" href="components/loader.css"> 10 <link rel="stylesheet" href="css/style.css"> 11 <script> 12 var app = angular.module('myApp', ['onsen']); 13 app.controller('AppController', function($scope, $http){ 14 var apiUrl = 'http://party-calendar.net/top/api/get'; 15 //jsonで戻り値を拾う。東京都のイベントを1件だけ抽出する。 16 var config = { 17 params : { format: jsonp, pref: 13, results: 1, start: 0 } 18 } 19 $http.get(apiUrl, config) 20 .success(function(data){ 21 $scope.title = data.Result[0].Title; 22 $scope.place = data.Result[0].Place; 23 $scope.areaName = data.Result[0].AreaName; 24 }) 25 .error(function(){ 26 alert('失敗しました'); 27 }); 28 }); 29 30 </script> 31</head> 32<body> 33 <ons-navigator var="myNavigator" page="page1.html"> 34 </ons-navigator> 35</body> 36</html> 37 38///////////////////////////////////////////////////////////////////////////////// 39page1.html 40 41<ons-page ng-controller = "AppController"> 42 <ons-toolbar> 43 <div class="center">イベント</div> 44 </ons-toolbar> 45 <div class="event"> 46 <br> 47 {{title}} 48 <br> 49 {{place}} 50 <br> 51 {{areaName}} 52 </div> 53</ons-page> 54/////////////////////////////////////////////////////////////////////////////////

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

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

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

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

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

ikuwow

2015/09/24 07:03

長いコードはMarkdown記法の```でシンタックスハイライトしていただくと見やすくなります。
takyas

2015/09/28 15:19

ikuwow様 ありがとうございます!!teratailも初めてでしたので、大変参考になりました。
guest

回答1

0

ベストアンサー

多分、開発者ツールを使いこなせていないのでしょう

Chromeなら、ハンバーガーアイコン -> その他ツール -> デベロッパーツール で立ち上がると思います
その中のConsoleタブをクリックしたら、その中にconsole.logの出力が表示されているはずです
もし表示されていないのなら、console.logの前で何かしらのエラーが起こっていると思います
エラー情報もそのタブの中に出力されるので、よく見てください

ちなみに、今回は$http.getの返り値オブジェクトにsuccessというメソッドが存在しないことが問題っぽいです
successthenに書き換えて実行してみてはいかがでしょうか?

また、開発者ツールを使わなくても、HTMLに{{data | json}}のように書くことで、そのオブジェクトがどういう状態なのか確認することもできます

投稿2015/09/28 05:26

kakusuke

総合スコア80

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

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

takyas

2015/09/28 15:17

kakusuke様 アドバイスありがとうございます。 無事解決致しました!!ありがとうございます!! また、いろいろなデバッグ方法を教えていただきましてありがとうございます!! 引き続き、質問をした際にはアドバイスいただけますと幸いです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問