{"id":23400,"date":"2025-10-23T21:44:05","date_gmt":"2025-10-23T21:44:05","guid":{"rendered":"https:\/\/wedesignmarbella.com\/herramientas\/formateador-y-validador-json\/"},"modified":"2026-07-02T10:47:18","modified_gmt":"2026-07-02T10:47:18","slug":"formateador-y-validador-json","status":"publish","type":"page","link":"https:\/\/wedesignmarbella.com\/es\/herramientas\/formateador-y-validador-json\/","title":{"rendered":"Formateador y validador JSON"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"23400\" class=\"elementor elementor-23400 elementor-15181\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b03cb67 e-flex e-con-boxed e-con e-parent\" data-id=\"b03cb67\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a10614f elementor-widget__width-inherit elementor-widget elementor-widget-heading\" data-id=\"a10614f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Formateador y validador JSON<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ab956f7 elementor-widget__width-initial elementor-widget elementor-widget-text-editor\" data-id=\"ab956f7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Sube un archivo JSON para su formateo y validaci\u00f3n.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-fd68d8e e-flex e-con-boxed e-con e-parent\" data-id=\"fd68d8e\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6471c57 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"6471c57\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\r\n    <style>\r\n\r\n        .wdm-container {\r\n            max-width: 800px;\r\n            margin: 0 auto;\r\n            background-color: white;\r\n            padding: 20px;\r\n            border-radius: 8px;\r\n            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);\r\n        }\r\n        textarea {\r\n            width: 100%;\r\n            height: 200px;\r\n            font-family: monospace;\r\n            font-size: 14px;\r\n            padding: 10px;\r\n            border: 1px solid #ccc;\r\n            border-radius: 4px;\r\n            margin-bottom: 10px;\r\n            resize: none;\r\n        }\r\n        button {\r\n            background-color: #000000;\r\n            color: white!important;\r\n            border: none;\r\n            cursor: pointer;\r\n            width: 100%;\r\n            margin-bottom: 10px;\r\n        }\r\n        button:hover {\r\n            background-color: #34cccc;\r\n        }\r\n        .error {\r\n            color: red;\r\n            margin-top: 10px;\r\n        }\r\n        .formatted-json {\r\n            background-color: #f1f1f1;\r\n            padding: 10px;\r\n            font-family: monospace;\r\n            white-space: pre-wrap;\r\n            word-wrap: break-word;\r\n            border: 1px solid #ccc;\r\n            border-radius: 4px;\r\n        }\r\n    <\/style>\r\n\r\n        <label for=\"json-input\">Enter JSON Data:<\/label>\r\n<textarea id=\"json-input\" placeholder=\"Pegue aqu\u00ed su JSON...\"><\/textarea>\r\n\r\n<button onclick=\"formatAndValidateJSON()\">Format and Validate JSON<\/button>\r\n\r\n        <div id=\"json-output\"><\/div>\r\n        <div id=\"json-error\" class=\"error\"><\/div>\r\n\r\n    <script>\r\n        function formatAndValidateJSON() {\r\n            const inputText = document.getElementById(\"json-input\").value;\r\n            const outputDiv = document.getElementById(\"json-output\");\r\n            const errorDiv = document.getElementById(\"json-error\");\r\n\r\n            \/\/ Clear previous results\r\n            outputDiv.innerHTML = '';\r\n            errorDiv.innerHTML = '';\r\n\r\n            try {\r\n                \/\/ Try parsing the JSON to validate\r\n                const parsedJson = JSON.parse(inputText);\r\n                \r\n                \/\/ Format the JSON with indentation\r\n                const formattedJson = JSON.stringify(parsedJson, null, 4);\r\n\r\n                \/\/ Display formatted JSON\r\n                outputDiv.classList.add(\"formatted-json\");\r\n                outputDiv.textContent = formattedJson;\r\n\r\n            } catch (error) {\r\n                \/\/ If JSON is invalid, show the error message\r\n                errorDiv.textContent = \"Invalid JSON: \" + error.message;\r\n            }\r\n        }\r\n    <\/script>\r\n\r\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2b8516d elementor-widget elementor-widget-heading\" data-id=\"2b8516d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Caracter\u00edsticas del formateador y validador de JSON:<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d882334 elementor-widget elementor-widget-text-editor\" data-id=\"d882334\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p class=\"description\">&#8211; <strong>Input Text Area:<\/strong> Users can paste their JSON data into a text area.<br\/>&#8211; <strong>Format and Validate:<\/strong> When the button is clicked, the JSON is validated (checked for syntax errors). If valid, it formats the JSON and displays it in a readable format.<br\/>&#8211; <strong>Error Handling:<\/strong> If the JSON is invalid, an error message will appear showing what went wrong.<br\/>&#8211; <strong>Responsive:<\/strong> The tool is simple and responsive, working well on different screen sizes. <\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d91bd5c elementor-widget elementor-widget-heading\" data-id=\"d91bd5c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">C\u00f3mo funciona:<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1493289 elementor-widget elementor-widget-text-editor\" data-id=\"1493289\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p class=\"description\">&#8211; <strong>Validation:<\/strong> When the button is clicked, it uses <code>JSON.parse()<\/code> to validate the JSON syntax. If there are any syntax errors, they will be caught, and an error message will be displayed.<br\/>&#8211; <strong>Formatting:<\/strong> If the JSON is valid, it uses <code>JSON.stringify()<\/code> with indentation to format the JSON for readability. <\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fc3c27f elementor-widget elementor-widget-heading\" data-id=\"fc3c27f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Para usar:<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-948cd90 elementor-widget elementor-widget-text-editor\" data-id=\"948cd90\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p class=\"description\">Solo tienes que copiar el c\u00f3digo y guardarlo como un archivo, y podr\u00e1s abrirlo en cualquier navegador.<code>.html<\/code><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-54b623d e-flex e-con-boxed e-con e-parent\" data-id=\"54b623d\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e15b76c elementor-align-center elementor-widget__width-inherit elementor-widget elementor-widget-button\" data-id=\"e15b76c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/wedesignmarbella.com\/es\/herramientas\/\" title=\"Back to Tools\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Volver a Herramientas<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Formateador y validador JSON Sube un archivo JSON para su formateo y validaci\u00f3n. Enter JSON Data: Format and Validate JSON Caracter\u00edsticas del formateador y validador de JSON: &#8211; Input Text Area: Users can paste their JSON data into a text area.&#8211; Format and Validate: When the button is clicked, the JSON is validated (checked for [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":23340,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"ai_generated_summary":"","footnotes":""},"class_list":["post-23400","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wedesignmarbella.com\/es\/wp-json\/wp\/v2\/pages\/23400","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wedesignmarbella.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wedesignmarbella.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wedesignmarbella.com\/es\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wedesignmarbella.com\/es\/wp-json\/wp\/v2\/comments?post=23400"}],"version-history":[{"count":0,"href":"https:\/\/wedesignmarbella.com\/es\/wp-json\/wp\/v2\/pages\/23400\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/wedesignmarbella.com\/es\/wp-json\/wp\/v2\/pages\/23340"}],"wp:attachment":[{"href":"https:\/\/wedesignmarbella.com\/es\/wp-json\/wp\/v2\/media?parent=23400"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}