{"id":258,"date":"2018-05-01T04:54:10","date_gmt":"2018-05-01T04:54:10","guid":{"rendered":"https:\/\/restfulapi.net\/?p=258"},"modified":"2021-09-27T22:59:52","modified_gmt":"2021-09-27T17:29:52","slug":"json-parse","status":"publish","type":"post","link":"https:\/\/restfulapi.net\/json-parse\/","title":{"rendered":"JSON parse()"},"content":{"rendered":"\n

JSON parse()<\/code><\/strong> method, as the name suggests, deserializes a JSON string representation to a JavaScript object<\/strong><\/em>.<\/p><\/blockquote>\n\n\n\n

The JSON string is typically received from a remote location (e.g. API response) and needs to be used for modifying the UI in the browser. <\/p>\n\n\n\n

The parse()<\/code> the method takes the JSON string, as received from API response, and converts it into a JavaScript object.<\/p>\n\n\n\n

The parse()<\/code> method, optionally, can use a reviver<\/code> function<\/strong> to perform a transformation on the resulting object before it is returned.<\/p>\n\n\n\n

1. JSON.parse() Syntax<\/h2>\n\n\n\n

The syntax of the JSON.parse()<\/code> method is:<\/p>\n\n\n\n

JSON.parse(string[, reviver])<\/code><\/pre>\n\n\n\n
Note that the JSON string is a valid JSON document, or else you will get a syntax error.<\/p>\n\n\n\n
1.1. Method Parameters<\/h4>\n\n\n\n
  1. string<\/code> <\/strong>– a serialized JSON string.<\/li>
  2. reviver<\/code> <\/strong>– an optional function that prescribes how the value, originally produced by parsing, is transformed before being returned.<\/li><\/ol>\n\n\n\n
    1.2. Return Value<\/h4>\n\n\n\n
    The parse()<\/code> method returns the JavaScript object if parsing is successful. The return value can be assigned to a variable that allows the result of the transformation to be referenced later throughout the program.<\/p>\n\n\n\n
    If the string<\/code> is not a valid JSON document, parse()<\/code> will SyntaxError<\/strong><\/code> exception.<\/p>\n\n\n\n
    2. JSON.parse() Example<\/h2>\n\n\n\n
    var jsonString = '{ \"x\": 5, \"y\": 6 }';\r\n\r\nvar obj = JSON.parse( jsonString );\r\n\r\nconsole.log(obj);<\/code><\/pre>\n\n\n\n
    Program output.<\/p>\n\n\n\n
    {x: 5, y: 6}<\/code><\/pre>\n\n\n\n
    3. JSON.parse() Reviver Function Example<\/h2>\n\n\n\n
    The reviver function is invoked for each name-value pair in the JSON document string, and we can apply the custom logic to find and modify any value before the name-value pair is added to the result JavaScript object.<\/p>\n\n\n\n
    In this program, we are checking each value type and if the value is an even number, we are multiplying it with 2.<\/p>\n\n\n\n
    var obj = JSON.parse('{\"1\": 1, \"2\": 2, \"3\": {\"4\": 4, \"5\": {\"6\": 6}}}', (key, value) => {\r\n\tif(value % 2 == 0)\r\n\t\treturn value * 2; \/\/If value is even number than multiply by 2\r\n\telse\r\n\t\treturn value; \/\/else return original value\r\n});<\/code><\/pre>\n\n\n\n
    Program output.<\/p>\n\n\n\n
    {1: 1, 2: 4, 3: {4: 8, 5: {6: 12}}}<\/code><\/pre>\n\n\n\n
    4. JSON.parse() with JSON Array<\/h2>\n\n\n\n
    When using the parse()<\/code> on a JSON array string, the method will return a JavaScript array, instead of a JavaScript object.<\/p>\n\n\n\n
    var jsonArrayString = '[\"A\", \"B\", \"C\"]';\r\n\r\nvar arrObject = JSON.parse( jsonArrayString );\r\n\r\nconsole.log(arrObject);;<\/code><\/pre>\n\n\n\n
    Program output.<\/p>\n\n\n\n
    [\"A\", \"B\", \"C\"]<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
    JSON parse() method, as the name suggests, deserializes a JSON string representation to a JavaScript object. The JSON string is typically received from a remote location (e.g. API response) and needs to be used for modifying the UI in the browser. The parse() the method takes the JSON string, as received from API response, and … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":249,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[16],"tags":[17],"_links":{"self":[{"href":"https:\/\/restfulapi.net\/wp-json\/wp\/v2\/posts\/258"}],"collection":[{"href":"https:\/\/restfulapi.net\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/restfulapi.net\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/restfulapi.net\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/restfulapi.net\/wp-json\/wp\/v2\/comments?post=258"}],"version-history":[{"count":0,"href":"https:\/\/restfulapi.net\/wp-json\/wp\/v2\/posts\/258\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/restfulapi.net\/wp-json\/wp\/v2\/media\/249"}],"wp:attachment":[{"href":"https:\/\/restfulapi.net\/wp-json\/wp\/v2\/media?parent=258"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/restfulapi.net\/wp-json\/wp\/v2\/categories?post=258"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/restfulapi.net\/wp-json\/wp\/v2\/tags?post=258"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}