### 前提・実現したいこと Angularの勉強を初めて5日程度、プログラミングを始めて3ヶ月程の初心者です。現在、STSで作成したプログラム（idを指定して既存DBの内容をJSON形式で表示させる）をAngularと連動させて、HTML上にJSON形式のデータを項目ごとに抽出して表示させたいです。最終的には、HTML上でidを入力して送信するとDBを検索し、該当するカラムを引っ張ってきて、検索結果として必要なセルの情報だけ抽出して表示させるSPAを作ろうとしています。参考にしているのは、[こちら](http://poppingcarp.com/angular_spring-boot_item_list_display/)のサイトです。上記サイトの手順に沿って作成いているのですが、実行すると画像のようなエラーが出てしまいました。 ![イメージ説明](283af06a3fd1c432d21674ac848783f7.png) ・gachaIdが定義されていない(data.gachaIdと呼び出していますが、STS上で作成したHTML内のJavaScriptでconsole.log(data.gachaId)を記述すると、正しく表示されました) ・JSON形式の「：」に対してSyntaxErrorが出ている etc... エラーが発現してから1日ほど経つのですが、どれも原因がわからず、煮詰まっている状態です。一歩でも前に進むために、まずどれか1つだけでも解決したいので、気になる点がありましたらご教示頂きたいです。下記資料をご参照の上、どうかよろしくお願い致します。 [STS] ・SampleDataController.java ・「http://localhost:8080/sampleData/data」で表示されるJSON [Angular] ・app.component.ts ・app.component.html ・dashboard.component.ts ・dashboard.html ・data.service.ts ### SampleDataController.java ```java package com.example.sample.controller; import java.util.Optional; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.ui.Model; import com.example.sample.entity.sales.MGachaCountry; import com.example.sample.repository.sales.MGachaCountryDao; import com.example.sample.entity.sales.MGacha; import com.example.sample.repository.sales.MGachaDao; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RestController; @RestController public class SampleDataController { @Autowired private MGachaCountryDao MGachaCountryDao; @RequestMapping(value = "/sampleData/data", method = RequestMethod.POST) public Optional data(Integer gachaId, Integer countryCd) { Optional re = MGachaCountryDao.selectById(gachaId, countryCd); return re; } @RequestMapping(value = "/sampleData/data", method = RequestMethod.GET) public Optional data() { Integer gachaId = 10186; Integer countryCd = 1; Optional re = MGachaCountryDao.selectById(gachaId, countryCd); return re; } } ``` ### 「http://localhost:8080/sampleData/data」で表示されるJSON ```json {"gachaId":NNNNNN,"countryCd":NNNNNN,"gachaTitle":"XXXXXX","bannerImageUrl":"XXXXXX","detailImageUrl":"XXXXXX","information":"XXXXXX","createTime":"XXXXXX","updateTime":"XXXXXX","bannerHeaderImageUrl":"XXXXXX","termBanner":"XXXXXX"} ``` ### app.component.ts ```TypeScript import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'Gacha Information Searcher'; } ``` ### app.component.html ```html

　：　：

``` ### dashboard.component.ts ```TypeScript import {Component, OnInit} from "@angular/core"; import {Data} from "../../data"; import {DataService} from "../../services/data.service"; @Component({ selector: 'my-dashboard', templateUrl: './dashboard.component.html' }) export class DashboardComponent implements OnInit{ //コンポーネント生成時の処理 constructor(private dataService: DataService){} //商品リスト dataList : Data; //画面初期表示イベント処理 ngOnInit(): void { this.dataService.data().subscribe( result => this.setDatas(result), error => alert('通信エラー' + error) ); } //Web APIから取得したデータを商品リストにセットする setDatas(result): void { if(result.error) { alert('Web APIエラー' + result.message); } this.dataList = result.data; } } ``` ### dashboard.html ```html

ああ{{data.gachaId}}

いい{{data.gachaTitle}}

うう{{data.bannerImageUrl}}

ぬん

``` ### data.service.ts ```TypeScript import { Injectable } from '@angular/core'; import { Headers, Http, Jsonp, RequestOptionsArgs, RequestOptions, URLSearchParams} from '@angular/http'; import {Observable} from "rxjs/Observable"; import "rxjs/add/operator/map"; import { Data } from '../data'; @Injectable() export class DataService { //RestAPIのURL private datasUrl = 'http://localhost:8080/sampleData/data'; //JSONPコールバック関数名(Angular固有値） CALLBACK = 'JSONP_CALLBACK'; //コンストラクタで利用するモジュールをインスタンス化 constructor(private http: Http, private jsonp: Jsonp) { } //商品一覧取得 data(): Observable { //リクエストパラメータセット let option : RequestOptions; option = this.setHttpGetParam(this.datasUrl); //レスポンス返却 return this.jsonp.request(this.datasUrl, option) .map((response) => { let content; let obj = response.json(); content = { error: null, data: obj }; console.dir(content); return content; }); } //Http(Get)通信のリクエストパラメータをセットする private setHttpGetParam(url: string): RequestOptions { let param = new URLSearchParams(); param.set("callback", this.CALLBACK); let options: RequestOptionsArgs = { method: "get", url: url, search: param }; return new RequestOptions(options); } } ``` ### 補足情報（FW/ツールのバージョンなど） Mac os STS Angular

	@@ -1,1 +1,1 @@
1	- SpringとAngularを連動して、HTMLでDBの内容を抽出して表示させたいです
1	+ SpringとAngularを連動し、HTMLでDBの内容を抽出して表示させたいです

質問編集履歴