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

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

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

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

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

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

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Q&A

解決済

1回答

4174閲覧

コンソールに出力できるjsonが、画面上には表示されない

退会済みユーザー

退会済みユーザー

総合スコア0

Ionic

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

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

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

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

0グッド

0クリップ

投稿2017/02/09 10:32

編集2017/02/09 12:06

ローカルjsonを画面に出力させようとしているのですが、下記のようにコンソールに出力できても、それを実際の画面に表示させることができません。
イメージ説明

[src/pages/home/home.ts]

typescript

1import { Component } from '@angular/core'; 2import { NavController } from 'ionic-angular'; 3import { JsonData } from '../../providers/json-data'; 4 5 6@Component({ 7 selector: 'page-home', 8 template: ` 9<div *ngFor="let question of questions"> 10 <h3>Title: {{question.title}}</h3> 11</div>` 12}) 13 14export class HomePage { 15 16 data: any; 17 18 constructor(public navCtrl: NavController, public dataService: JsonData) { 19 this.data = dataService.getData(); 20 }

[src/providers/json-data.ts]

typescript

1import { Injectable } from '@angular/core'; 2import { Http } from '@angular/http'; 3import 'rxjs/add/operator/map'; 4 5@Injectable() 6export class JsonData { 7 8 data: any; 9 10 constructor(public http: Http) {} 11 12 getData(){ 13 return this.http.get('../assets/data/data.json') 14 .map(res => res.json()).subscribe(data => { 15 this.data = data.patients; 16 console.log(data); //←ここがコンソールで出力できています 17 return data; 18 }) 19 }

[src/assets/data/data.json]

json

1{ 2 "questions": [ 3 { 4 "title": "問01", 5 "slug": "h29-q01", 6 "img": "images/h29-q1.png", 7 "img_alt": "h29-q1", 8 "question_main": "日本の首都はどこか", 9 "question_description": "東京。(以下省略)", 10 "youtube_id": "YOUTUBE_VIDEO_ID" 11 }, 12 { 13 "title": "問02", 14 "slug": "h29-q02", 15 "img": "images/h29-q2.png", 16 "img_alt": "h29-q2", 17 "question_main": "アメリカの首都はどこか", 18 "question_description": "ワシントンD.C。(以下省略)", 19 "youtube_id": "YOUTUBE_VIDEO_ID" 20 }, 21 { 22 "title": "問03", 23 "slug": "h29-q03", 24 "img": "images/h29-q3.png", 25 "img_alt": "h29-q3", 26 "question_main": "イギリスの首都はどこか", 27 "question_description": "ロンドン。(以下省略)", 28 "youtube_id": "YOUTUBE_VIDEO_ID" 29 } 30 ] 31}

templateにある<h3>Title: {{question.title}}</h3>などが正常に動作させるには、どこを修正する必要があるでしょうか。

###[17/02/09 21:00 追記]表示できました!
下記のようにコードを変更したところ、無事出力されました。

[src/pages/home/home.html]

html

1<ion-header> 2 <ion-navbar> 3 <ion-title> 4 Ionic Blank 5 </ion-title> 6 </ion-navbar> 7</ion-header> 8 9<ion-content padding> 10 <div *ngFor="let question of questions;"> 11 <h3>Name: {{question.title}}</h3> 12 <h3>Description: {{question.question_description}}</h3> 13 </div> 14</ion-content>

src/pages/home/home.ts

typescript

1import {Component, OnInit} from '@angular/core'; 2import {NavController} from 'ionic-angular'; 3import {JsonData} from '../../providers/json-data'; 4 5 6@Component({ 7 selector: 'page-home', 8 templateUrl: 'home.html' 9}) 10export class HomePage implements OnInit { 11 12 constructor(public navCtrl: NavController, public dataService: JsonData) { 13 } 14 15 questions: any; 16 17 ngOnInit() { 18 this.getQuestion(); 19 } 20 21 getQuestion() { 22 this.dataService.getData().subscribe(questions => { 23 this.questions = questions.questions; 24 console.log(questions); 25 }); 26 }

[src/providers/json-data.ts]

typescript

1import { Injectable } from '@angular/core'; 2import { Http } from '@angular/http'; 3import 'rxjs/add/operator/map'; 4 5@Injectable() 6export class JsonData { 7 8 constructor(public http: Http) {} 9 10 getData(){ 11 return this.http.get('../assets/data/data.json') 12 .map(res => res.json()); 13 }; 14}

![イメージ説明]
無事出力できました。
ngOnInitの存在や、それを継承させることをすっかり忘れていました。

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

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

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

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

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

guest

回答1

0

ベストアンサー

subscribe()をHomePageクラスに移動してください。
また、constructor内サービスのメソッドを実行するのではなくOnInitイベントで呼ぶように修正してください。

js

1ngOnInit() { 2 this.data = dataService.getData().subscribe(data => { 3 this.data = data.patients; 4 } 5}

投稿2017/02/09 10:57

turbgraphics200

総合スコア4267

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問