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

Question

前提・実現したいこと

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

Answer 1

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