BlazorでJSONを取得して表示する方法｜APIレスポンスを画面に出力｜ASP.NET×Blazor入門 6.2
6.2 JSONデータの取得と表示
BlazorでAPIからデータを取得する際、もっともよく使われる形式が「JSON」です。 JSONはJavaScript Object Notationの略で、構造化されたデータをテキスト形式で表現する方法として広く用いられています。
データモデルを定義する
まず、取得したデータを受け取るためのモデルクラスを定義します。たとえば、ユーザー情報を受け取る場合は次のようになります：
public class User
{
public int Id { get; set; }
public string Name { get; set; }
public string Email { get; set; }
}データの取得
次に、Blazorコンポーネント内で HttpClient を使ってデータを取得します。以下の例では OnInitializedAsync メソッド内で非同期にデータを取得し、変数に格納しています。
@inject HttpClient Http
ユーザー一覧
@if (users == null)
{
読み込み中...
}
else
{
- @foreach (var user in users) {
- @user.Name (@user.Email) }
}
@code {
private List? users;
protected override async Task OnInitializedAsync()
{
users = await Http.GetFromJsonAsync<List<User>>("https://example.com/api/users");
}
}この例では、取得したJSONレスポンスを自動的に List<User> に変換（デシリアライズ）しています。 データ取得中は「読み込み中…」と表示し、完了後にリストとして表示するという流れです。
表示の工夫
表示が単調にならないよう、<table> を使ってより整ったUIを構築することも可能です。 また、データがない場合や取得エラーの場合のメッセージ表示も追加すると、ユーザーにとって親切な設計になります。
次のセクションでは、通信中のローディング状態の制御や、エラー発生時の処理方法を見ていきます。
下田 昌平
開発に関するインプットをアウトプットしています。検索ログ
開発・技術相談
システム開発や技術検証、要件定義の作成、アーキテクチャ設計、 テスト設計、運用設計まで、一気通貫で支援しています。 企画段階の「まず相談したい」レベルから、実装・運用まで 幅広く対応できますので、お気軽にお問い合わせください。
お問い合わせ