July 3, 2020
How to Check if a String is a Valid JSON String in Javascript
In this tutorial, you will learn how to check if a string is a valid JSON string in javascript. JSON stands for JavaScript object notation syntax which is a standard text-based format to represent structured data based on javascript object syntax.
We do have JSON.parse()
and JSON.stringify()
methods available to convert JSON string to javascript object and vice versa. But if the JSON string is malformed then JSON.parse()
method will throw an error. We are going to take advantage of this method to validate JSON string.
In the following example, we have one JSON string and upon click of a button, we want to validate if it’s valid or not. Our custom validation function will return true or false and we will display the result in the h1
element. Please have a look over the code example and steps given below for a better explanation.
HTML & CSS
- We have 3 elements in the HTML file (
div
,button
, andh1
).div
element is just a wrapper for the rest of the elements. - The inner text for the
button
element is“Check”
and for theh1
element is“Result”
. - We have done some basic styling using CSS and added the link to our
style.css
stylesheet inside thehead
element. - We have also included our javascript file
script.js
with ascript
tag at the bottom.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <div> <button>Check</button> <h1>Result</h1> </div> <script src="script.js"></script> </body> </html>
body { text-align: center; } div { display: inline-block; } button { display: inline-block; padding: 10px 20px; }
Javascript
- We have selected two elements
button
andh1
using thedocument.querySelector()
method and stored them inbtnCheck
andresult
variables respectively. - We have a global variable
jsonObj
and it holds a JSON string. - We have attached the
click
event listener to thebutton
element. - In the
click
event handler function, we are callingisValidJson()
method and passing our global variablejsonObj
as a parameter. - We are setting the inner text of the
h1
element to the Boolean value returned byisValidJson()
method. - In
isValidJson()
method, we are using the try and catch block. Inside this block, we are first checking if thestr
type is a string. Then, we are callingJSON.parse()
method and passingstr
as a parameter. If it’s a valid JSON string, parsing will happen without any error, otherwise, it will throw an error. - Based on the above logic, we are returning
true
in the try block andfalse
in the catch block.
let btnCheck = document.querySelector('button'); let result = document.querySelector('h1'); let jsonObj = '{"name":"Marks", "age":"27"}'; btnCheck.addEventListener('click', () => { result.innerText = isValidJson(jsonObj) ? 'True' : 'False'; }); function isValidJson(str) { try { if(typeof str != 'string') return false; JSON.parse(str); return true } catch (error) { return false } }