title: How to return JSON from a ASP.NET Core Web API, such that it's displayed properly formatted in the browser?
body: <p>I want to return JSON from my ASP.NET Core Web API, such that it's displayed structurally in the browser and not as a quoted string:</p>
  
  <pre><code>"{\"Url\":null,\"Entry\":null,\"Type\":0,\"Priority\":false}"
  </code></pre>
  
  <p>To achieve this, I've mapped the <code>.json</code> extension to the <code>application/json</code> MIME type, such that the path <code>/api/zap.json</code> returns a JSON response:</p>
  
  <pre><code>services.AddMvc(options =&gt;
  {
      options.FormatterMappings.SetMediaTypeMappingForFormat("xml", MediaTypeHeaderValue.Parse("application/xml"));
      options.FormatterMappings.SetMediaTypeMappingForFormat("json", MediaTypeHeaderValue.Parse("application/json"));
  })
      .AddXmlSerializerFormatters();
  </code></pre>
  
  <p>The web API (GET) returns its ZapScan parameter as a JSON string, so I've set the return type to <code>ActionResult&lt;string&gt;</code>:</p>
  
  <pre><code>// GET: api/zap.{format}
  // https://localhost:5001/api/zap?url=https://example.com&amp;entry=/&amp;type=active&amp;priority=true
  [HttpGet, FormatFilter]
  public ActionResult&lt;string&gt; OnGet([FromQuery] ZapScan scan)
  {
      _zapDispatcher.Dispatch(scan);
      return ToJson(scan);
  }
  
  private string ToJson&lt;T&gt;(T obj)
  {
      return JsonSerializer.Serialize(obj);
  } 
  </code></pre>
  
  <p><strong>ZapScan:</strong></p>
  
  <pre><code>public class ZapScan
  {
      public string Url { get; set; }
      public string Entry { get; set; }
      public ScanType Type { get; set; }
      public bool Priority { get; set; }
  }
  </code></pre>
  
  <p>I've verified that the web API properly sets the HTTP <code>Content-Type</code> header to <code>application/json</code> to inform the browser that its response is JSON formatted:</p>
  
  <p><a href="https://i.stack.imgur.com/KiSGQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KiSGQ.png" alt="enter image description here"></a></p>
  
  <p>How can make the browser display my JSON structurally? - e.g:</p>
  
  <pre><code>{
      "url": "null",
      "entry": "null",
      "type": 0,
      "priority": false
  }
  </code></pre>