Pretty printing JSON in an HTML page

Question

I have this string as JSON that I receive when making a request to a service. This is what I receive as plain text in jsonResponse :

"{\r\n \"OperationType\": \"SAVE_LINK\",\r\n \"Documents\": [\r\n {\r\n \"DocId\": \"****\",\r\n \"DocVersion\": \"20230429\",\r\n \"Title\": \"Ley Orgánica 10/1995, de 23 de noviembre, del Código Penal\",\r\n \"LinkToInforceVersion\": \"https://localhost:44342/Content/Documento.aspx?params=H4sIAAAAAAAEAE2PwW6EIBCGn6bc2oDaXT1wsW3STTZNs2sfYESiJMhYQKt9-g56KclHJsM35J_vWfut0WuUyiiLI0b0LGwO3TbKxs-aRWiDFJw_nJUgMmKvz3TlREE8Eyci9UqiSsJupRGRZkRyRZJFskXSRclAxRnsKyopUm0W3UArOUPfaV9vVEWMYG-aMpxYGPDnAxbTQzToavBHRNN18vrG0xFlXlRs0T6QIDOe5bzIKjaYfrgS8RgIGrwaPqHX8uKMMvgEYVqZCV_OpFmw9934b9dzjPRlG93xxmCa7HZDS9F2bcJAe8yjdvHiXsDjHLSlBUZYqX83v7rBd8pg9xyPgmfFH91HPct-AQAAWKE\",\r\n \"LinkToVersion\": \"https://localhost:44342/Content/Documento.aspx?params=H4sIAAAAAAAEAE2PwW7DIAyGn2bcNoU2a9MDl3STVqmapjbb3SFWgkRwBiRL9vQzyWVIH7LMZ_j5HtEvFc5RaaMt9RTJi7A4ckuvKj-iiFAHJbPs4agls2PW-sjbnsmZZ-bApF7BnJKwWmlEphmZXJlkmWyZdFkI0HEE-0JayVSbCSuoVSbIN-jLhatIEewNOcNBhI5-3mEyLURDrgS_RTRNo66vWVqy2OcnMaEPLKgv06KLKDrTdlcmbn5A8Lr7gBbVxRlt6AnCMAsTPp1Jo2Dvq_HfLscY-cY6uu1MwDDY5UaWk63aQIG_Mfb84MWdwdMY0HL-Hmbu380vVvTGGeya41Fmu_wP_9FJj30BAAA=WKE\",\r\n \"FireUrl\": null\r\n }\r\n ]\r\n}"

And this is what I see if I watch with JSON visualizer

[JSON]: "{
  "OperationType": "SAVE_LINK",
  "Documents": [
    {
      "DocId": "LE0000018349",
      "DocVersion": "20230429",
      "Title": "Ley Orgánica 10/1995, de 23 de noviembre, del Código Penal",
      "LinkToInforceVersion": "https://localhost:44342/Content/Documento.aspx?params=H4sIAAAAAAAEAE2PwW6EIBCGn6bc2oDaXT1wsW3STTZNs2sfYESiJMhYQKt9-g56KclHJsM35J_vWfut0WuUyiiLI0b0LGwO3TbKxs-aRWiDFJw_nJUgMmKvz3TlREE8Eyci9UqiSsJupRGRZkRyRZJFskXSRclAxRnsKyopUm0W3UArOUPfaV9vVEWMYG-aMpxYGPDnAxbTQzToavBHRNN18vrG0xFlXlRs0T6QIDOe5bzIKjaYfrgS8RgIGrwaPqHX8uKMMvgEYVqZCV_OpFmw9934b9dzjPRlG93xxmCa7HZDS9F2bcJAe8yjdvHiXsDjHLSlBUZYqX83v7rBd8pg9xyPgmfFH91HPct-AQAAWKE",
      "LinkToVersion": "https://localhost:44342/Content/Documento.aspx?params=H4sIAAAAAAAEAE2PwW7DIAyGn2bcNoU2a9MDl3STVqmapjbb3SFWgkRwBiRL9vQzyWVIH7LMZ_j5HtEvFc5RaaMt9RTJi7A4ckuvKj-iiFAHJbPs4agls2PW-sjbnsmZZ-bApF7BnJKwWmlEphmZXJlkmWyZdFkI0HEE-0JayVSbCSuoVSbIN-jLhatIEewNOcNBhI5-3mEyLURDrgS_RTRNo66vWVqy2OcnMaEPLKgv06KLKDrTdlcmbn5A8Lr7gBbVxRlt6AnCMAsTPp1Jo2Dvq_HfLscY-cY6uu1MwDDY5UaWk63aQIG_Mfb84MWdwdMY0HL-Hmbu380vVvTGGeya41Fmu_wP_9FJj30BAAA=WKE",
      "FireUrl": null
    }
  ]
}"

I am trying to print it on my .aspx page so that it looks nice and well formatted. Siomething like this:

{
  "OperationType": "SAVE_LINK",
  "Documents": [
    {
      "DocId": "********",
      "DocVersion": "20230429",
      "Title": "Ley Orgánica 10/1995, de 23 de noviembre, del Código Penal",
      "LinkToInforceVersion": "https://localhost:44342/Content/Documento.aspx?params=H4sIAAAAAAAEAE2PwW6EIBCGn6bc2oDaXT1wsW3STTZNs2sfYESiJMhYQKt9-g56KclHJsM35J_vWfut0WuUyiiLI0b0LGwO3TbKxs-aRWiDFJw_nJUgMmKvz3TlREE8Eyci9UqiSsJupRGRZkRyRZJFskXSRclAxRnsKyopUm0W3UArOUPfaV9vVEWMYG-aMpxYGPDnAxbTQzToavBHRNN18vrG0xFlXlRs0T6QIDOe5bzIKjaYfrgS8RgIGrwaPqHX8uKMMvgEYVqZCV_OpFmw9934b9dzjPRlG93xxmCa7HZDS9F2bcJAe8yjdvHiXsDjHLSlBUZYqX83v7rBd8pg9xyPgmfFH91HPct-AQAAWKE",
      "LinkToVersion": "https://localhost:44342/Content/Documento.aspx?params=H4sIAAAAAAAEAE2PwW7DIAyGn2bcNoU2a9MDl3STVqmapjbb3SFWgkRwBiRL9vQzyWVIH7LMZ_j5HtEvFc5RaaMt9RTJi7A4ckuvKj-iiFAHJbPs4agls2PW-sjbnsmZZ-bApF7BnJKwWmlEphmZXJlkmWyZdFkI0HEE-0JayVSbCSuoVSbIN-jLhatIEewNOcNBhI5-3mEyLURDrgS_RTRNo66vWVqy2OcnMaEPLKgv06KLKDrTdlcmbn5A8Lr7gBbVxRlt6AnCMAsTPp1Jo2Dvq_HfLscY-cY6uu1MwDDY5UaWk63aQIG_Mfb84MWdwdMY0HL-Hmbu380vVvTGGeya41Fmu_wP_9FJj30BAAA=WKE",
      "FireUrl": null
    }
  ]
}

In my code, I currently have this:

var response = await httpClient.GetAsync(url);
response.EnsureSuccessStatusCode();

if (buttonId == "WebPagePopupDownloadLinkButton")
{
    var jsonResponse = await response.Content.ReadAsStringAsync();
    using (var stringReader = new StringReader(jsonResponse))
    using (var stringWriter = new StringWriter())
    {
        var jsonReader = new JsonTextReader(stringReader);
        var jsonWriter = new JsonTextWriter(stringWriter) { Formatting = Formatting.Indented };
        jsonWriter.WriteToken(jsonReader);
        JsonResultLiteral.Text = stringWriter.ToString();
    }
}

And in my .aspx I have this Literal to print the text:

<div>    <asp:Literal ID="JsonResultLiteral" runat="server" Mode="PassThrough"/> </div> 

Doing this, it prints exactly what I had at the beginning, nothing changes.

I got the code from here. I have also tried the rest of the solutions proposed in the thread but none of them worked for me.

What is happening in my case? Does it have something to do with the .aspx?

I would be great if I could use Newtonsoft.Json package to solve this problem, but any help is more than welcome.

Answer 1

Well, you could try replacing the carrage return (\r) and the line feed (\n) with a br, and that would at least result in line breaks.

Hence, this markup:

        <asp:Literal ID="Literal1" runat="server"></asp:Literal>

And then code behind:

        // assume sBuf has your json

        sBuf = sBuf.Replace("\r\n", "<br/>");
        Literal1.Text = sBuf;

And the result is now this:

You could also use/try a textbox with textmode="multiline".