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

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

ただいまの
回答率

88.32%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,232

rinimaruranran

score 32

 前提・実現したいこと

Angularの勉強を初めて5日程度、プログラミングを始めて3ヶ月程の初心者です。

現在、STSで作成したプログラム(idを指定して既存DBの内容をJSON形式で表示させる)をAngularと連動させて、HTML上にJSON形式のデータを項目ごとに抽出して表示させたいです。
最終的には、HTML上でidを入力して送信するとDBを検索し、該当するカラムを引っ張ってきて、検索結果として必要なセルの情報だけ抽出して表示させるSPAを作ろうとしています。

参考にしているのは、こちらのサイトです。

上記サイトの手順に沿って作成いているのですが、実行すると画像のようなエラーが出てしまいました。

イメージ説明
・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

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<MGachaCountry> data(Integer gachaId, Integer countryCd) {
            Optional<MGachaCountry> re = MGachaCountryDao.selectById(gachaId, countryCd);
                    return re;
        }

        @RequestMapping(value = "/sampleData/data", method = RequestMethod.GET)
        public Optional<MGachaCountry> data() {
            Integer gachaId = 10186;
            Integer countryCd = 1;
            Optional<MGachaCountry> re = MGachaCountryDao.selectById(gachaId, countryCd);
                    return re;
        }
    }

 「http://localhost:8080/sampleData/data」で表示されるJSON

{"gachaId":NNNNNN,"countryCd":NNNNNN,"gachaTitle":"XXXXXX","bannerImageUrl":"XXXXXX","detailImageUrl":"XXXXXX","information":"XXXXXX","createTime":"XXXXXX","updateTime":"XXXXXX","bannerHeaderImageUrl":"XXXXXX","termBanner":"XXXXXX"}

 app.component.ts

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

<div class="main">
 :
      <my-dashboard></my-dashboard>
 :
</div>

 dashboard.component.ts

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

<div>
    <p>ああ{{data.gachaId}}</p>
    <p>いい{{data.gachaTitle}}</p>
    <p>うう{{data.bannerImageUrl}}</p>
    <p>ぬん</p>
</div>

 data.service.ts

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<Data> {
    //リクエストパラメータセット
    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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

check解決した方法

0

service内の記述が精査できていなかったため、getメソッドをsetメソッド等に変更することで解決することが出来ました。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 88.32%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る