実現したいこと
VueでAPIを叩いて返ってきたJSONデータを自分で定義した型のオブジェクトにしたい。
前提
VueとSpringFrameworkをつかって、Vueでaxiosを使ってページを読み込んだ時にローカル間で通信をしています。
JSONデータを自分で定義した型に入れて扱いたいのですが、コンソールで確認すると代入できておらず何が間違っているのかわかりません。
発生している問題・エラーメッセージ
コンソールの3行目にundefinedと表示される。1、2行目はどちらも
0 : {id: 101, ranking: 1, score: 1000000, name: 'tarou'} length : 1 [[Prototype]] : Array(0)
となっています
Vueのソースコード
TypeScript
1<script setup lang="ts"> 2import { onMounted } from "vue"; 3import { RouterLink, RouterView } from "vue-router"; 4import axios from "axios"; 5const url = "http://localhost:8080/ranking"; 6type rankingData = { 7 id: number; 8 ranking: number; 9 score: number; 10 name: string; 11}; 12 13onMounted((): void => { 14 const response = axios.get(url).then(function (response) { 15 console.log(response.data); 16 const rankingDataJSON = response.data as rankingData; 17 console.log(rankingDataJSON); 18 const elm = rankingDataJSON.id; 19 console.log(elm); 20 }); 21}); 22</script>
Springのソースコード
package com.example.demo; import org.springframework.web.bind.annotation.CrossOrigin; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RestController; import java.util.ArrayList; import java.util.List; @RestController public class RankingController { @CrossOrigin(origins = "http://localhost:5173") @GetMapping("ranking") public List<RankingData> outputRanking(){ List<RankingData> rankingDataList = new ArrayList<>(); RankingData data = new RankingData(); data.id = 101; data.ranking = 1; data.name = "tarou"; data.score = 1000000; rankingDataList.add(data); return rankingDataList; } }
試したこと
TypeScript 型 や JSONデータ オブジェクト変換 などで1時間ほど調べたがわからず...
入社してからプログラミングをはじめ、質問のしかたもこれで正しいかどうかもわからないですが何卒宜しくお願いいたします。

回答1件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。