{"id":266,"date":"2023-01-04T14:34:29","date_gmt":"2023-01-04T22:34:29","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=266"},"modified":"2024-10-21T12:37:58","modified_gmt":"2024-10-21T19:37:58","slug":"debugging-with-the-json-pipe","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/debugging-with-the-json-pipe\/","title":{"rendered":"Debugging with the JSON pipe"},"content":{"rendered":"\n<p>We have all used <code>console.log<\/code> at some point to debug our code. With Angular, there is an interesting alternative to display debugging information on our web page temporarily: The <a href=\"https:\/\/angular.dev\/api\/common\/JsonPipe?tab=description\" target=\"_blank\" rel=\"noopener\" title=\"\">JSON pipe<\/a>.<\/p>\n\n\n\n<p>The primary usage is as follows:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span>&gt;<\/span>myData | json<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>The above code will output your data as a JSON string in the <code>span<\/code> element, but it won&#8217;t be formatted, so the JSON string can be hard to read:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">{<span class=\"hljs-string\">\"affiliation\"<\/span>:<span class=\"hljs-string\">\"friendly\"<\/span>,<span class=\"hljs-string\">\"symbol\"<\/span>:<span class=\"hljs-string\">\"Default Land Unit\"<\/span>,<span class=\"hljs-string\">\"echelon\"<\/span>:<span class=\"hljs-string\">\"none\"<\/span>,<span class=\"hljs-string\">\"mod1\"<\/span>:<span class=\"hljs-string\">\"None\"<\/span>,<span class=\"hljs-string\">\"mod2\"<\/span>:<span class=\"hljs-string\">\"None\"<\/span>,<span class=\"hljs-string\">\"uniqueDesignation\"<\/span>:<span class=\"hljs-string\">\"\"<\/span>,<span class=\"hljs-string\">\"higherFormation\"<\/span>:<span class=\"hljs-string\">\"\"<\/span>,<span class=\"hljs-string\">\"reinforcedReduced\"<\/span>:<span class=\"hljs-string\">\"\"<\/span>,<span class=\"hljs-string\">\"flying\"<\/span>:<span class=\"hljs-literal\">false<\/span>,<span class=\"hljs-string\">\"activity\"<\/span>:<span class=\"hljs-literal\">false<\/span>,<span class=\"hljs-string\">\"installation\"<\/span>:<span class=\"hljs-literal\">false<\/span>,<span class=\"hljs-string\">\"taskForce\"<\/span>:<span class=\"hljs-literal\">false<\/span>,<span class=\"hljs-string\">\"commandPost\"<\/span>:<span class=\"hljs-string\">\"None\"<\/span>,<span class=\"hljs-string\">\"tacticalMissionTasks\"<\/span>:<span class=\"hljs-string\">\"None\"<\/span>,<span class=\"hljs-string\">\"type\"<\/span>:<span class=\"hljs-string\">\"Land Unit\"<\/span>}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Instead, the following syntax works a lot better:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">pre<\/span>&gt;<\/span>myData | json<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">pre<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>The <code>pre<\/code> HTML tag stands for &#8220;<strong>pre<\/strong>formatted&#8221; content. As a result, that tag will preserve any whitespace, new lines, and tabs, which makes reading that JSON data a lot easier:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">{\n <span class=\"hljs-string\">\"affiliation\"<\/span>:<span class=\"hljs-string\">\"friendly\"<\/span>,\n <span class=\"hljs-string\">\"symbol\"<\/span>:<span class=\"hljs-string\">\"Default Land Unit\"<\/span>,\n <span class=\"hljs-string\">\"echelon\"<\/span>:<span class=\"hljs-string\">\"none\"<\/span>,\n <span class=\"hljs-string\">\"mod1\"<\/span>:<span class=\"hljs-string\">\"None\"<\/span>,\n <span class=\"hljs-string\">\"mod2\"<\/span>:<span class=\"hljs-string\">\"None\"<\/span>\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>It&#8217;s a simple trick, yet a big time saver when debugging code that&#8217;s using complex JSON structures.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We have all used console.log at some point to debug our code. With Angular, there is an interesting alternative to display debugging information on our web page temporarily: The JSON pipe. The primary usage is as follows: The above code will output your data as a JSON string in the span element, but it won&#8217;t [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13,14],"tags":[],"class_list":["post-266","post","type-post","status-publish","format-standard","hentry","category-debugging","category-pipes"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/266","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/comments?post=266"}],"version-history":[{"count":10,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/266\/revisions"}],"predecessor-version":[{"id":2203,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/266\/revisions\/2203"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=266"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=266"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=266"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}