{"id":69,"date":"2024-02-16T03:10:59","date_gmt":"2024-02-16T03:10:59","guid":{"rendered":"https:\/\/anuraggandhi.com\/?p=69"},"modified":"2024-03-03T19:36:56","modified_gmt":"2024-03-03T19:36:56","slug":"javascript-gotchas","status":"publish","type":"post","link":"http:\/\/ag.wp\/javascript-gotchas\/","title":{"rendered":"Javascript Gotchas"},"content":{"rendered":"\n<p>In most of the scenario we are looking for jquery plugin or 3rd party library for even simple stuffs that can easily be done using javascript. In this post, I will list down the simple javascript ways to do the stuffs so that we don&#8217;t need to overload our applications with so many plugins.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">JSON to Pretty Print JSON string<\/h3>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#0F111A\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"var emp = { name:'John Doe', 'email':'foo@bar.com', age: 40, address:{ line1: '1st  street', city:'New York', 'country': 'India'}};\nvar str = JSON.stringify(obj, undefined, 4); \/\/ indentation level = 4\" style=\"color:#babed8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki material-theme-ocean\" style=\"background-color: #0F111A\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #C792EA\">var<\/span><span style=\"color: #BABED8\"> emp <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">name<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #89DDFF\">&#39;<\/span><span style=\"color: #C3E88D\">John Doe<\/span><span style=\"color: #89DDFF\">&#39;<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&#39;<\/span><span style=\"color: #F07178\">email<\/span><span style=\"color: #89DDFF\">&#39;<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #89DDFF\">&#39;<\/span><span style=\"color: #C3E88D\">foo@bar.com<\/span><span style=\"color: #89DDFF\">&#39;<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">age<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F78C6C\">40<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">address<\/span><span style=\"color: #89DDFF\">:{<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">line1<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&#39;<\/span><span style=\"color: #C3E88D\">1st  street<\/span><span style=\"color: #89DDFF\">&#39;<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">city<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #89DDFF\">&#39;<\/span><span style=\"color: #C3E88D\">New York<\/span><span style=\"color: #89DDFF\">&#39;<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&#39;<\/span><span style=\"color: #F07178\">country<\/span><span style=\"color: #89DDFF\">&#39;<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&#39;<\/span><span style=\"color: #C3E88D\">India<\/span><span style=\"color: #89DDFF\">&#39;<\/span><span style=\"color: #89DDFF\">}};<\/span><\/span>\n<span class=\"line\"><span style=\"color: #C792EA\">var<\/span><span style=\"color: #BABED8\"> str <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #BABED8\"> JSON<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #82AAFF\">stringify<\/span><span style=\"color: #BABED8\">(obj<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">undefined,<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F78C6C\">4<\/span><span style=\"color: #BABED8\">)<\/span><span style=\"color: #89DDFF\">;<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #464B5D; font-style: italic\">\/\/ indentation level = 4<\/span><\/span><\/code><\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"<p>In most of the scenario we are looking for jquery plugin or 3rd party library for even simple stuffs that can easily be done using javascript. In this post, I will list down the simple javascript ways to do the stuffs so that we don&#8217;t need to overload our applications with so many plugins. JSON\u2026 <span class=\"read-more\"><a href=\"http:\/\/ag.wp\/javascript-gotchas\/\">Read More &raquo;<\/a><\/span><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"_links":{"self":[{"href":"http:\/\/ag.wp\/wp-json\/wp\/v2\/posts\/69"}],"collection":[{"href":"http:\/\/ag.wp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/ag.wp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/ag.wp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/ag.wp\/wp-json\/wp\/v2\/comments?post=69"}],"version-history":[{"count":1,"href":"http:\/\/ag.wp\/wp-json\/wp\/v2\/posts\/69\/revisions"}],"predecessor-version":[{"id":124,"href":"http:\/\/ag.wp\/wp-json\/wp\/v2\/posts\/69\/revisions\/124"}],"wp:attachment":[{"href":"http:\/\/ag.wp\/wp-json\/wp\/v2\/media?parent=69"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/ag.wp\/wp-json\/wp\/v2\/categories?post=69"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/ag.wp\/wp-json\/wp\/v2\/tags?post=69"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}