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

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

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

Ionicは、クロスプラットフォームに対応したモバイルアプリ開発のためのオープンソースUIフレームワークです。iOSやAndroid、Webのアプリケーションを1つのコードベースで開発できます。

Cordova

Cordovaは様々なデバイスで使うことができるオープンソースなモバイル用開発プラットフォームです。開発者に各デバイスの元のプラットフォームで開発する必要をなくし、HTML・JavaScript・CSSなどの一般的なウェブのテクノロジーを使ってすべてのデバイスで展開することができるモバイルのアプリケーションを生成することを可能にします。

Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

Q&A

解決済

1回答

1455閲覧

Ionic AngularJS APIで取得したJSONをデータバインディングできない

miichan

総合スコア1

Ionic

Ionicは、クロスプラットフォームに対応したモバイルアプリ開発のためのオープンソースUIフレームワークです。iOSやAndroid、Webのアプリケーションを1つのコードベースで開発できます。

Cordova

Cordovaは様々なデバイスで使うことができるオープンソースなモバイル用開発プラットフォームです。開発者に各デバイスの元のプラットフォームで開発する必要をなくし、HTML・JavaScript・CSSなどの一般的なウェブのテクノロジーを使ってすべてのデバイスで展開することができるモバイルのアプリケーションを生成することを可能にします。

Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

0グッド

0クリップ

投稿2020/06/04 08:25

IonicでAPIをたたいて取得したJSONデータを表示するプログラムを作成したいますが、下記のエラーが発生しています。

{{ postCount }} と{{ content.title }} は表示されます。

{{ profile.nickname }}でエラーが起こります。

Ionicを習い始めです。どうぞご教授の程,よろしくお願いいたします。

発生している問題・エラーメッセージ

ERROR TypeError: Cannot read property 'nickname' of undefined at Object.eval [as updateRenderer] (MypagePage.html:6) at Object.debugUpdateRenderer [as updateRenderer] (core.js:30068)

該当のソースコード

mypage.page.html

AngularJS

1<ion-header> 2 <ion-toolbar> 3 <ion-title>マイページ</ion-title> 4 </ion-toolbar> 5</ion-header> 6<div>投稿数: {{ postCount }}</div> 7{{ profile.nickname }} 8<ion-content> 9 <ion-card *ngFor="let content of contents"> 10 <ion-card-header> 11 <ion-card-subtitle>{{ content.title }}</ion-card-subtitle> 12 </ion-card-header> 13 </ion-card> 14</ion-content>

mypage.page.ts

AngularJS

1import { Component, OnInit } from '@angular/core'; 2import { HttpClient } from '@angular/common/http'; 3import { LoadingController } from '@ionic/angular'; 4 5@Component({ 6 selector: 'app-mypage', 7 templateUrl: './mypage.page.html', 8 styleUrls: ['./mypage.page.scss'], 9}) 10 11 12export class MypagePage implements OnInit { 13 14 public followCount: any; 15 public postCount: any; 16 public contents: any; 17 public profile: any; 18 19 constructor( 20 public http: HttpClient, 21 public loadingContrller: LoadingController 22 ) { 23 } 24 25 ngOnInit() { 26 } 27 28 async ionViewDidEnter() { 29 const loading = await this.loadingContrller.create({ 30 message: 'Loading...' 31 }); 32 33 await loading.present(); 34 this.http.get('https://www.kimono-plus.com/api/alueoweurlwrow7hrurowurouwjlwjr/user/profile') 35 .subscribe(data => { 36 this.profile = data['user']; 37 console.log(this.profile); 38 this.postCount = data['postCount']; 39 this.contents = data['contents']; 40 loading.dismiss(); 41 }); 42 } 43 44}

APIのレスポンス

GET https://www.kimono-plus.com/api/alueoweurlwrow7hrurowurouwjlwjr/user/profile

JSON

1{ 2 "user": { 3 "nickname": "yamamoto", 4 "image": "http://123456789.com", 5 "cover_image": "http://987654321.com", 6 "user_type": 2, 7 "introduction": "よろしくお願い致します" 8 }, 9 "followerCount": 2, 10 "followCount": 1, 11 "postCount": 2, 12 "contents": [ 13 { 14 "user_id": 1, 15 "nickname": "yamamoto", 16 "user_type": 2, 17 "post_id": 1, 18 "created_at": "2080-02-18 10:21:40", 19 "thumbnail_image_url": "/aaaa/bbbb/dddd.png", 20 "category_name": "コーディネート", 21 "title": "title1 title1", 22 "is_advertisement": 1, 23 "s3_object_url": "http://aaa.com/bbbb/ccc.mp4" 24 }, 25 { 26 "user_id": 1, 27 "nickname": "yamamoto", 28 "user_type": 2, 29 "post_id": 27, 30 "created_at": "2080-02-18 10:21:40", 31 "thumbnail_image_url": "http://aaa.com/bbbb/ccc", 32 "category_name": "着付け", 33 "title": "あいうえお コラムタイトル", 34 "is_advertisement": 0, 35 "s3_object_url": null 36 } 37 ] 38}

試したこと

{{ profile }}
を表示してみると
[object Object]
と表示されます。

補足情報(FW/ツールのバージョンなど)

ionic 5.4.15
cordova 9.0.0
angularjs 8.2.11
angular/common 8.2.11

ここにより詳細な情報を記載してください。

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

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

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

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

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

guest

回答1

0

ベストアンサー

profile.nicknameに初期値がないからですね。profile?.nickname にするか、初期値を用意すると大丈夫かと思いますー。

投稿2020/06/04 08:54

rdlabo

総合スコア448

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

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

miichan

2020/06/04 09:12

rdlabo様 早速のご回答ありがとうございました。 profile?.nickname を使うとテンプレートにJSONの内容が表示されました。 誠にありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問