リクエストの応答でJSONデータを返す

ASP.NET coreのリクエストの応答でJSONデータを返す方法です。

ちょうどAMP対応をやっていたので、amp-listに対応したデータの返し方についても記載しています。

AngularやReactなどのプロジェクトテンプレートを利用した場合、サーバとのやりとりは基本JSONになりますが、配列形式のJSONデータを返す際のコードは以下のようになります。

public class ExampleController : Controller
{
    [HttpGet]
    public IEnumerable<Example> All()
    {
        return Enumerable.Range(1, 5).Select(index => new Example
        {
            Id = index,
            Name = "ユーザー" + index.ToString()
        });
    }

    public class Example
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }
}

通常は上記のようなコードで問題ありませんが、AMP（Accelerated Mobile Pages）に対応したサイトを構築しようとした際に、amp-listを使おうとしたらそのままのコードではダメでした。

ASP.NET coreでAMPに対応したサイトを構築するような機会は滅多にないと思うので、以下は余談になります。

amp-listの「src」属性で読み込めるJSONのデータ形式は以下の通りです。

{
  "items": [
    {
      "title": "amp-carousel",
      "url": "https://ampbyexample.com/components/amp-carousel"
    },
    ...
  ]
}

amp-listを使う場合、配列のプロパティ名（デフォルトは"items"）を指定しないといけないようで、直接配列のデータを返しても読み込んでくれず、その場合、コンソールには以下のようなエラーが出力されます。

Response must contain an array at " items ".

amp-listに対応したオブジェクト形式のJSONデータを返すには以下のようにします。

public class ExampleController : Controller
{
    [HttpGet]
    public JsonResult All()
    {
        var data = Enumerable.Range(1, 5).Select(index => new Example
        {
            Id = index,
            Name = "ユーザー" + index.ToString()
        });

        return new 
        {
            items = data.ToList()
        };
    }

    public class Example
    {
        [JsonProperty]
        public int Id { get; set; }
        [JsonProperty]
        public string Name { get; set; }
    }
}

上記のやり方では、モデルの属性で[JsonProperty]を追加しないとプロパティが出力されませんでした。

実際に返されるJSONデータは以下の通り。

{
  "items": [
    {
      "id": 1,
      "name": "ユーザー1"
    },
    {
      "id": 2,
      "name": "ユーザー2"
    },
    ...
  ]
}

一応、動作しました。

AMP（Accelerated Mobile Pages）についてはまだ始めたばかりで、なにが正しくてどのように実装するのがベストなのか分からない状態なので、参考程度にしてください。