<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: shuai wang</title>
    <description>The latest articles on DEV Community by shuai wang (@shuai_wang_2cc568efc73821).</description>
    <link>https://dev.to/shuai_wang_2cc568efc73821</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4189620%2Fbd28a49e-a770-40d0-a561-5aade75083d1.png</url>
      <title>DEV Community: shuai wang</title>
      <link>https://dev.to/shuai_wang_2cc568efc73821</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/shuai_wang_2cc568efc73821"/>
    <language>en</language>
    <item>
      <title>How to Format, Validate and Minify JSON</title>
      <dc:creator>shuai wang</dc:creator>
      <pubDate>Sat, 17 Oct 2026 00:53:16 +0000</pubDate>
      <link>https://dev.to/shuai_wang_2cc568efc73821/how-to-format-validate-and-minify-json-2ohj</link>
      <guid>https://dev.to/shuai_wang_2cc568efc73821/how-to-format-validate-and-minify-json-2ohj</guid>
      <description>&lt;p&gt;JSON is the default format for APIs, config files, logs and data exchange. It looks&lt;br&gt;
simple, which is exactly why small mistakes are so easy to make and so hard to find:&lt;br&gt;
a single misplaced comma can break a 400-line document.&lt;/p&gt;

&lt;p&gt;A JSON formatter does three jobs at once: it validates your syntax, it pretty-prints&lt;br&gt;
the document so a human can read it, and it can minify it to save space. Here is how&lt;br&gt;
each of those works, and a workflow you can use every time an API response or config&lt;br&gt;
file misbehaves.&lt;/p&gt;

&lt;h2&gt;
  
  
  The three things a formatter does
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Validation&lt;/strong&gt; runs a parser over the document and either returns the parsed value or&lt;br&gt;
a precise error location. A good validator tells you the line and character where&lt;br&gt;
parsing failed, which is half the battle.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Pretty-printing&lt;/strong&gt; adds indentation and puts one key-value pair on each line. The&lt;br&gt;
data does not change - only whitespace does - so a pretty-printed document carries&lt;br&gt;
exactly the same information in a shape your eyes can follow:&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;{"name":"SwiftTools","tools":50,"free":true}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;becomes:&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;{
  "name": "SwiftTools",
  "tools": 50,
  "free": true
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;&lt;strong&gt;Minifying&lt;/strong&gt; removes all insignificant whitespace, collapsing the document to one&lt;br&gt;
line - what you usually want to send over a network or store in a build artifact.&lt;/p&gt;

&lt;h2&gt;
  
  
  The errors that actually happen
&lt;/h2&gt;

&lt;p&gt;Nearly every "my JSON is broken" case is one of these (all of them parse fine in&lt;br&gt;
JavaScript, which is how they sneak in):&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Trailing comma after the last item in an array or object&lt;/li&gt;
&lt;li&gt;Unquoted keys ({ name: "x" } is invalid)&lt;/li&gt;
&lt;li&gt;Single quotes around string values&lt;/li&gt;
&lt;li&gt;Comments (// or /* */)&lt;/li&gt;
&lt;li&gt;NaN, Infinity and undefined (use null instead)&lt;/li&gt;
&lt;li&gt;Duplicate keys (parsers keep only the last value - data silently disappears)&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  A workflow for debugging API responses
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;Capture the raw response from your client, a REST client, or the browser network
tab. Save it exactly as received; do not edit it yet.&lt;/li&gt;
&lt;li&gt;Validate it. If it parses, your problem is not the syntax but the shape or values.&lt;/li&gt;
&lt;li&gt;Pretty-print it. With indentation, structure becomes visible at a glance.&lt;/li&gt;
&lt;li&gt;Search the formatted document for the field your code expects. Mismatched key names
(snake_case vs camelCase) are a classic cause of "null" values.&lt;/li&gt;
&lt;li&gt;Minify it before pasting it into a bug report - one line beats 300.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Keep the raw copy separate from your edited version: the moment you start fixing a&lt;br&gt;
suspect file by hand, you lose the evidence of what the server actually sent.&lt;/p&gt;

&lt;h2&gt;
  
  
  Formatting is not parsing
&lt;/h2&gt;

&lt;p&gt;A document can be valid JSON and still not do what you expect. Formatting only makes&lt;br&gt;
structure visible; it cannot tell you that a field has the wrong type or that a value&lt;br&gt;
is off by a factor of ten. When the document validates but behaves wrongly, check the&lt;br&gt;
types of the fields you rely on, and compare the payload against the documented schema.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;We built &lt;a href="https://www.swifttool.site" rel="noopener noreferrer"&gt;SwiftTools&lt;/a&gt; - a free, no-sign-up collection of&lt;br&gt;
50 browser-based tools. The &lt;a href="https://www.swifttool.site/tools/json-formatter" rel="noopener noreferrer"&gt;JSON Formatter&lt;/a&gt;&lt;br&gt;
runs entirely in your browser, so sensitive payloads never leave your machine.&lt;/em&gt;&lt;/p&gt;

</description>
      <category>json</category>
      <category>javascript</category>
      <category>webdev</category>
      <category>tutorial</category>
    </item>
  </channel>
</rss>
