{"id":107220,"date":"2025-05-07T15:50:38","date_gmt":"2025-05-07T10:20:38","guid":{"rendered":"https:\/\/www.mygreatlearning.com\/blog\/?page_id=107220"},"modified":"2025-05-07T14:59:50","modified_gmt":"2025-05-07T09:29:50","slug":"json-to-excel-tool","status":"publish","type":"page","link":"https:\/\/www.mygreatlearning.com\/blog\/json-to-excel-tool\/","title":{"rendered":"JSON to Excel Converter"},"content":{"rendered":"\n<style>\n  .excel-course-cta-section {\n    width: 100%;\n    padding: 1rem;\n    box-sizing: border-box;\n  }\n\n  .excel-course-cta-card {\n    max-width: 600px !important;\n    height: 120px;\n    margin: 0 auto;\n    background-color: #ffffff;\n    border: 1px solid #e5e7eb;\n    border-radius: 0.5rem;\n    overflow: hidden;\n  }\n\n  .excel-course-cta-content {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    height: 100%;\n    padding: 2rem;\n    gap: 2px;\n  }\n\n  .excel-course-cta-left {\n    display: flex;\n    align-items: center;\n    gap: 1rem;\n  }\n\n  .excel-course-cta-icon {\n    width: 2rem;\n    height: 2rem;\n    color: hsl(217.2, 91.2%, 59.8%);\n  }\n\n  .excel-course-cta-text {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .excel-course-cta-title {\n    font-size: 1.25rem;\n    font-weight: 700;\n    color: #111827;\n    line-height: 1.2;\n    margin-bottom: 5px !important;\n  }\n\n  .excel-course-cta-subtitle {\n    font-size: 0.95rem;\n    margin-bottom: 0 !important;\n  }\n\n  .excel-course-cta-button-wrapper {\n    display: flex;\n    gap: 0.5rem;\n    flex-shrink: 0;\n    justify-content: center;\n  }\n\n  .excel-course-cta-button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 0.5rem;\n    white-space: nowrap;\n    border-radius: 0.375rem;\n    font-size: 0.875rem;\n    font-weight: 600;\n    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    cursor: pointer;\n    height: 2.25rem;\n    padding: 0 0.75rem;\n    background-color: hsl(24.6, 95%, 53.1%);\n    color: #ffffff;\n    border: none;\n    text-decoration: none;\n    max-width: 200px;\n  }\n\n  .excel-course-cta-button:hover {\n    background-color: hsl(24.6, 95%, 48%);\n    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);\n    transform: scale(1.05);\n  }\n\n  .excel-course-cta-button:active {\n    transform: scale(0.98);\n  }\n\n  @media (max-width: 640px) {\n    .excel-course-cta-card {\n      height: auto;\n    }\n\n    .excel-course-cta-content {\n      flex-direction: column;\n      align-items: flex-start;\n      padding: 1.5rem;\n      gap: 15px;\n    }\n\n    .excel-course-cta-left {\n      width: 100%;\n    }\n\n    .excel-course-cta-button-wrapper {\n      width: 100%;\n    }\n\n    .excel-course-cta-button {\n      width: 100%;\n    }\n  }\n<\/style>\n\n\n\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n<link rel=\"stylesheet\"\n      href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0\/css\/all.min.css\"\n      integrity=\"sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==\"\n      crossorigin=\"anonymous\"\n      referrerpolicy=\"no-referrer\" \/>\n<style>\n  \/* Base styles for the entire tool container *\/\n  .json-converter-wrapper {\n    font-family: 'Inter', sans-serif;\n    color: #333;\n    line-height: 1.6;\n    background: #f4f7fc; \/* Light background for the overall page look *\/\n    padding: 20px 0;\n  }\n\n  \/* Main converter container *\/\n  .converter-container {\n    max-width: 896px;\n    margin-left: auto;\n    margin-right: auto;\n    background-color: #ffffff;\n    border-radius: 1rem;\n    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n    padding: 2rem; \/* Increased padding for better spacing *\/\n    margin-top: 20px;\n    box-sizing: border-box; \/* Include padding in element's total width and height *\/\n  }\n\n  \/* Header styles *\/\n  .converter-container h1 {\n    font-size: 2.25rem; \/* Larger font size for main title *\/\n    font-weight: 700;\n    color: #1a202c; \/* Darker color for prominence *\/\n    margin-bottom: 0.75rem;\n    text-align: center; \/* Center the main title *\/\n    background: linear-gradient(to right, #6a11cb 0%, #2575fc 100%); \/* Gradient background as in screenshot *\/\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n  }\n\n  .converter-container .subtitle {\n    color: #555;\n    margin-bottom: 2rem; \/* More space below subtitle *\/\n    margin-top: 0.5rem;\n    font-size: 1.125rem;\n    text-align: center; \/* Center the subtitle *\/\n  }\n\n  \/* Data Converter section *\/\n  .data-converter-section {\n    border: 1px dashed #c0c0c0; \/* Dashed border for the converter area *\/\n    border-radius: 0.75rem; \/* Slightly more rounded corners *\/\n    padding: 1.5rem;\n    margin-bottom: 2rem;\n    background-color: #f8faff; \/* Light background for this section *\/\n    position: relative;\n  }\n\n  .data-converter-section .section-header {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 0.5rem;\n    font-size: 1.25rem;\n    font-weight: 600;\n    color: #333;\n    margin-bottom: 1.5rem;\n  }\n\n  .data-converter-section .section-header i {\n    color: #2575fc; \/* Icon color *\/\n  }\n\n  \/* Input tabs (Upload, From URL, Paste JSON) *\/\n  .input-tabs {\n    display: flex;\n    justify-content: center;\n    margin-bottom: 1.5rem;\n    border-bottom: 1px solid #e0e0e0;\n  }\n\n  .input-tab {\n    padding: 0.75rem 1.5rem;\n    cursor: pointer;\n    font-weight: 500;\n    color: #666;\n    border-bottom: 3px solid transparent;\n    transition: all 0.3s ease;\n  }\n\n  .input-tab.active {\n    color: #2575fc;\n    border-bottom-color: #2575fc;\n  }\n\n  .input-tab:hover:not(.active) {\n    color: #2575fc;\n  }\n\n  \/* Input content areas *\/\n  .input-content {\n    display: none;\n    flex-direction: column;\n    align-items: center;\n    padding: 1rem 0;\n  }\n\n  .input-content.active {\n    display: flex;\n  }\n\n  .drop-area {\n    display: block;\n    border: 2px dashed #a0a0a0;\n    border-radius: 0.5rem;\n    padding: 3rem 1.5rem;\n    text-align: center;\n    color: #666;\n    cursor: pointer;\n    width: 100%;\n    margin-bottom: 1rem;\n    transition: border-color 0.3s ease;\n  }\n\n  .drop-area:hover {\n    border-color: #2575fc;\n  }\n\n  .drop-area i {\n    font-size: 3rem;\n    color: #2575fc;\n    margin-bottom: 1rem;\n  }\n\n  .drop-area p {\n    font-size: 1.125rem;\n    font-weight: 600;\n    margin-bottom: 0.5rem;\n  }\n\n  .drop-area small {\n    font-size: 0.875rem;\n    color: #888;\n  }\n\n  .input-file-browse {\n    display: none; \/* Hide default file input *\/\n  }\n\n  .url-input-group {\n    display: flex;\n    width: 100%;\n    gap: 0.75rem;\n  }\n\n  .json-textarea,\n  .output-name-input,\n  .url-input { \/* Added url-input for specific styling *\/\n    width: 100%;\n    padding: 0.75rem 1rem;\n    border: 1px solid #d1d5db;\n    border-radius: 0.5rem; \/* More rounded corners for inputs *\/\n    font-size: 1rem;\n    color: #333;\n    box-sizing: border-box;\n    background-color: white; \/* Ensure white background *\/\n  }\n\n  .json-textarea:focus,\n  .output-name-input:focus,\n  .url-input:focus {\n    outline: none;\n    border-color: #2575fc;\n    box-shadow: 0 0 0 3px rgba(37, 117, 252, 0.2); \/* Blue glow on focus *\/\n  }\n\n  .load-json-btn, .fetch-json-btn, .generate-btn { \/* Combined button styles *\/\n    background-color: #2575fc; \/* Primary button color *\/\n    color: white;\n    padding: 0.75rem 1.5rem;\n    border-radius: 0.5rem;\n    font-weight: 600;\n    text-align: center;\n    cursor: pointer;\n    transition: background-color 0.3s ease, box-shadow 0.3s ease;\n    border: none; \/* Remove default button border *\/\n  }\n\n  .load-json-btn:hover, .fetch-json-btn:hover, .generate-btn:hover {\n    background-color: #1a60cc; \/* Darker blue on hover *\/\n    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n  }\n\n  .load-json-btn:active, .fetch-json-btn:active, .generate-btn:active {\n    background-color: #134b99; \/* Even darker on active *\/\n    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);\n  }\n\n  .fetch-json-btn {\n    flex-shrink: 0; \/* Prevent button from shrinking in flex container *\/\n    padding: 0.75rem 1.25rem; \/* Slightly adjusted padding for fetch button *\/\n  }\n\n  .error-message {\n    margin-top: 1rem;\n    color: #e53e3e; \/* Red for error messages *\/\n    font-size: 0.95rem;\n    display: none;\n    text-align: center;\n  }\n  .error-message.visible {\n    display: block;\n  }\n  \n  \/* NEW LOADING MESSAGE STYLE *\/\n  .loading-message {\n    margin-top: 1rem;\n    color: #2575fc; \/* Blue color *\/\n    font-size: 1rem;\n    font-weight: 600;\n    display: none;\n    text-align: center;\n  }\n  .loading-message.visible {\n    display: block;\n  }\n\n  \/* Conversion Options *\/\n  .conversion-options {\n    margin-bottom: 2rem;\n    padding: 1.5rem;\n    background-color: #f8faff;\n    border-radius: 0.75rem;\n  }\n\n  .conversion-options .section-header {\n    font-size: 1.125rem;\n    font-weight: 600;\n    color: #333;\n    margin-bottom: 1.25rem;\n  }\n\n  .options-grid {\n    display: grid;\n    grid-template-columns: 1fr;\n    gap: 1.5rem;\n  }\n  @media (min-width: 640px) {\n    .options-grid {\n      grid-template-columns: 1fr 1fr;\n    }\n  }\n\n  .options-group label {\n    display: block;\n    font-size: 0.95rem;\n    font-weight: 500;\n    color: #444;\n    margin-bottom: 0.75rem;\n  }\n\n  .options-flex {\n    display: flex;\n    gap: 1.5rem; \/* Space between radio buttons *\/\n  }\n\n  .option-label {\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n    font-size: 1rem;\n    color: #555;\n  }\n\n  .option-label input[type=\"radio\"],\n  .option-label input[type=\"checkbox\"] {\n    margin-right: 0.6rem;\n    \/* Customizing radio\/checkbox appearance *\/\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    appearance: none;\n    width: 1.25rem;\n    height: 1.25rem;\n    border: 2px solid #a0a0a0;\n    border-radius: 50%; \/* For radio *\/\n    outline: none;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    position: relative;\n  }\n\n  .option-label input[type=\"checkbox\"] {\n    border-radius: 0.25rem; \/* For checkbox *\/\n  }\n\n  .option-label input[type=\"radio\"]:checked {\n    border-color: #2575fc;\n  }\n\n  .option-label input[type=\"radio\"]:checked::before {\n    content: '';\n    display: block;\n    width: 0.75rem;\n    height: 0.75rem;\n    background-color: #2575fc;\n    border-radius: 50%;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n  }\n\n  .option-label input[type=\"checkbox\"]:checked {\n    border-color: #2575fc;\n    background-color: #2575fc;\n  }\n\n  .option-label input[type=\"checkbox\"]:checked::before {\n    content: '\\2713'; \/* Checkmark character *\/\n    display: block;\n    color: white;\n    font-size: 0.8rem;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n  }\n\n  .output-name-input {\n    background-color: #ffffff !important;\n  }\n\n  .checkbox-options {\n    margin-top: 1.5rem;\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n  }\n  @media (min-width: 640px) {\n    .checkbox-options {\n      flex-direction: row;\n    }\n  }\n\n  \/* Field Mapping *\/\n  .field-mapping {\n    margin-bottom: 2rem;\n    padding: 1.5rem;\n    background-color: #f8faff;\n    border-radius: 0.75rem;\n  }\n\n  .field-mapping .section-header {\n    font-size: 1.125rem;\n    font-weight: 600;\n    color: #333;\n    margin-bottom: 1.25rem;\n  }\n\n  .mapping-list {\n    border: 1px solid #e0e0e0;\n    border-radius: 0.5rem;\n    max-height: 28rem; \/* Taller mapping list *\/\n    overflow-y: auto;\n    overflow-x: hidden; \/* Prevent horizontal scroll unless necessary for item content *\/\n    margin: 0;\n    padding: 0;\n    list-style: none; \/* Remove default list style *\/\n    background-color: #ffffff;\n  }\n\n  .mapping-item {\n    display: flex;\n    align-items: center;\n    padding: 0.75rem 1rem;\n    border-bottom: 1px solid #f0f0f0;\n    background-color: #ffffff;\n    cursor: grab;\n    transition: background-color 0.2s ease, transform 0.2s ease;\n  }\n\n  .mapping-item:last-child {\n    border-bottom: none;\n  }\n\n  .mapping-item:hover {\n    background-color: #f5f5f5;\n  }\n\n  .mapping-item.dragging {\n    opacity: 0.7;\n    transform: scale(1.02);\n    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);\n  }\n\n  .mapping-checkbox {\n    margin-right: 1rem;\n    flex-shrink: 0;\n  }\n\n  .mapping-label {\n    flex: 1;\n    font-size: 0.95rem;\n    color: #444;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    margin-right: 0.75rem;\n  }\n\n  .mapping-input {\n    width: 120px; \/* Fixed width for input for consistency *\/\n    flex-shrink: 0;\n    margin-right: 0.75rem;\n    padding: 0.4rem 0.75rem; \/* Smaller padding for mapping input *\/\n    border-radius: 0.375rem;\n  }\n\n  .arrow-icon {\n    color: #666;\n    margin-left: 0.5rem;\n    cursor: pointer;\n    font-size: 1.1rem;\n    transition: color 0.2s ease, transform 0.2s ease;\n    flex-shrink: 0;\n  }\n\n  .arrow-icon:hover {\n    color: #2575fc;\n    transform: translateY(-2px);\n  }\n\n  .arrow-icon.fa-arrow-down:hover {\n    transform: translateY(2px);\n  }\n\n  .or-text {\n    text-align: center;\n    color: #888;\n    margin: 1.25rem 0; \/* More space around \"or\" *\/\n    font-size: 0.95rem;\n    position: relative;\n    overflow: hidden;\n  }\n\n  .or-text::before,\n  .or-text::after {\n    content: '';\n    position: absolute;\n    top: 50%;\n    width: 40%; \/* Line length *\/\n    height: 1px;\n    background-color: #ddd;\n  }\n\n  .or-text::before {\n    left: 0;\n  }\n\n  .or-text::after {\n    right: 0;\n  }\n\n  \/* Generate section *\/\n  .generate-section {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    margin-top: 2.5rem;\n  }\n\n  .generate-btn {\n    width: auto; \/* Auto width for button *\/\n    padding: 0.85rem 2rem; \/* Larger padding for main button *\/\n    font-size: 1.1rem;\n    box-shadow: 0 5px 15px rgba(37, 117, 252, 0.2);\n  }\n\n  .progress-container {\n    width: 100%;\n    height: 0.6rem; \/* Slightly taller progress bar *\/\n    background-color: #e0e0e0;\n    border-radius: 9999px;\n    overflow: hidden;\n    margin-top: 1.5rem;\n    display: none;\n  }\n  .progress-container.visible {\n    display: block;\n  }\n\n  .progress-bar {\n    height: 100%;\n    background-color: #2575fc;\n    transition: width 0.3s ease-in-out;\n    border-radius: 9999px;\n  }\n\n  \/* Features section *\/\n  .features-section {\n    max-width: 896px;\n    margin: 3rem auto 0 auto; \/* More margin from top *\/\n    background-color: #ffffff;\n    border-radius: 1rem;\n    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n    padding: 2.5rem; \/* Increased padding *\/\n    box-sizing: border-box;\n  }\n\n  .features-section h2 {\n    font-size: 1.75rem; \/* Larger section titles *\/\n    font-weight: 700;\n    color: #1a202c;\n    margin-bottom: 1.5rem;\n    text-align: center;\n  }\n\n  .features-list, .how-to-list {\n    list-style-position: outside; \/* Bullet\/number outside the text *\/\n    padding-left: 1.5rem; \/* Indent for list items *\/\n    margin-bottom: 2rem;\n    font-size: 1rem;\n    color: #555;\n  }\n\n  .features-list li, .how-to-list li {\n    margin-bottom: 0.75rem;\n  }\n\n  .example-section {\n    margin-top: 2.5rem;\n  }\n\n  .example-section h3 {\n    font-size: 1.3rem; \/* Slightly larger heading for examples *\/\n    font-weight: 600;\n    color: #333;\n    margin-bottom: 1rem;\n    text-align: center;\n  }\n\n  .json-example {\n    background-color: #f0f3f7; \/* Lighter background for code block *\/\n    padding: 1.25rem;\n    border-radius: 0.5rem;\n    font-size: 0.9rem; \/* Slightly smaller font for code *\/\n    overflow-x: auto;\n    white-space: pre-wrap; \/* Ensure line breaks are respected *\/\n    word-wrap: break-word; \/* Break long words *\/\n    color: #333;\n    border: 1px solid #e0e0e0;\n  }\n\n  .table-container {\n    overflow-x: auto;\n    border: 1px solid #e0e0e0;\n    border-radius: 0.5rem;\n    margin-top: 1.5rem;\n  }\n\n  .preview-table {\n    width: 100%;\n    font-size: 0.95rem;\n    border-collapse: collapse;\n    min-width: 700px; \/* Ensure table doesn't get too squished on smaller screens *\/\n  }\n\n  .preview-table thead {\n    background-color: #f5f8fa; \/* Lighter header background *\/\n  }\n\n  .preview-table th {\n    padding: 0.8rem 1rem; \/* More padding in table headers *\/\n    text-align: left;\n    font-weight: 600;\n    color: #444;\n    border-bottom: 1px solid #d0d0d0;\n  }\n\n  .preview-table tbody {\n    background-color: #ffffff;\n  }\n\n  .preview-table td {\n    padding: 0.7rem 1rem;\n    border-bottom: 1px solid #eef1f4;\n    color: #555;\n  }\n\n  \/* Responsive adjustments *\/\n  @media (max-width: 768px) {\n    .converter-container, .features-section {\n      padding: 1.5rem;\n      margin-top: 30px;\n    }\n\n    .converter-container h1 {\n      font-size: 1.8rem;\n    }\n\n    .converter-container .subtitle {\n      font-size: 1rem;\n      margin-bottom: 1.5rem;\n    }\n\n    .data-converter-section {\n      padding: 1rem;\n    }\n\n    .drop-area {\n      padding: 2rem 1rem;\n    }\n\n    .drop-area i {\n      font-size: 2.5rem;\n    }\n\n    .drop-area p {\n      font-size: 1rem;\n    }\n\n    .url-input-group {\n      flex-direction: column;\n      gap: 1rem;\n    }\n\n    .fetch-json-btn {\n      width: 100%;\n    }\n\n    .conversion-options, .field-mapping {\n      padding: 1rem;\n    }\n\n    .options-grid {\n      grid-template-columns: 1fr;\n    }\n\n    .mapping-item {\n      flex-wrap: wrap; \/* Allow items to wrap in field mapping *\/\n      padding: 0.5rem 0.75rem;\n    }\n\n    .mapping-checkbox {\n      margin-bottom: 0.5rem;\n    }\n\n    .mapping-label, .mapping-input {\n      width: 100%;\n      margin-right: 0;\n      margin-bottom: 0.5rem;\n    }\n\n    .arrow-icon {\n      margin-left: 0;\n      margin-right: 0.5rem;\n    }\n\n    .generate-btn {\n      width: 100%;\n      font-size: 1rem;\n      padding: 0.75rem 1.5rem;\n    }\n\n    .features-section h2 {\n      font-size: 1.5rem;\n    }\n\n    .features-list, .how-to-list {\n      padding-left: 1rem;\n      font-size: 0.95rem;\n    }\n\n    .example-section h3 {\n      font-size: 1.1rem;\n    }\n    .preview-table {\n      min-width: 500px; \/* Adjust min-width for smaller screens *\/\n    }\n  }\n\n  @media (max-width: 480px) {\n    .converter-container, .features-section {\n      padding: 1rem;\n      margin-top: 20px;\n    }\n\n    .converter-container h1 {\n      font-size: 1.5rem;\n    }\n\n    .converter-container .subtitle {\n      font-size: 0.9rem;\n      margin-bottom: 1rem;\n    }\n\n    .data-converter-section .section-header {\n      font-size: 1.1rem;\n    }\n\n    .input-tab {\n      padding: 0.6rem 1rem;\n      font-size: 0.9rem;\n    }\n\n    .drop-area {\n      padding: 1.5rem 0.75rem;\n    }\n\n    .drop-area i {\n      font-size: 2rem;\n    }\n\n    .drop-area p {\n      font-size: 0.9rem;\n    }\n\n    .json-textarea,\n    .output-name-input,\n    .url-input {\n      padding: 0.6rem 0.8rem;\n      font-size: 0.9rem;\n    }\n\n    .load-json-btn, .fetch-json-btn, .generate-btn {\n      padding: 0.6rem 1rem;\n      font-size: 0.9rem;\n    }\n\n    .options-group label {\n      font-size: 0.85rem;\n    }\n\n    .option-label span {\n      font-size: 0.9rem;\n    }\n\n    .mapping-label, .mapping-input {\n      font-size: 0.9rem;\n    }\n\n    .features-section h2 {\n      font-size: 1.25rem;\n    }\n\n    .features-list, .how-to-list {\n      font-size: 0.85rem;\n    }\n\n    .json-example {\n      font-size: 0.8rem;\n      padding: 1rem;\n    }\n    .preview-table {\n      font-size: 0.85rem;\n      min-width: 400px; \/* Further adjust for very small screens *\/\n    }\n    .preview-table th, .preview-table td {\n      padding: 0.5rem 0.75rem;\n    }\n  }\n<\/style>\n\n<div class=\"json-converter-wrapper\">\n\n<section class=\"excel-course-cta-section\">\n  <div class=\"excel-course-cta-card\">\n    <div class=\"excel-course-cta-content\">\n      <div class=\"excel-course-cta-left\">\n        <div class=\"excel-course-cta-text\">\n          <p class=\"excel-course-cta-title\">Free Excel Course with Certificate<\/p>\n          <p class=\"excel-course-cta-subtitle\">Learn essential Excel skills for data analysis, including functions, formulas, and data visualization techniques.<\/p>\n        <\/div>\n      <\/div>\n\n      <div class=\"excel-course-cta-button-wrapper\">\n        <a href=\"https:\/\/www.mygreatlearning.com\/academy\/learn-for-free\/courses\/excel-for-beginners?utm_source=blog\" class=\"excel-course-cta-button\" target=\"_blank\" rel=\"noopener noreferrer\">\n          Enroll Free\n        <\/a>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n  <div class=\"converter-container\">\n    <h1 id=\"json-to-excel-converter\">JSON to Excel Converter<\/h1>\n    <p class=\"subtitle\">Transform your JSON data into beautiful Excel spreadsheets with ease and style. No restrictions and Size Limits<\/p>\n\n    <div class=\"data-converter-section\">\n      <div class=\"section-header\">\n        <i class=\"fas fa-database\"><\/i> Data Converter\n      <\/div>\n      <p class=\"text-center text-gray-600 mb-4\">Upload, paste, or fetch JSON data and convert it to Excel format<\/p>\n\n      <div class=\"input-tabs\">\n        <div class=\"input-tab active\" data-tab=\"upload\">\n          <i class=\"fas fa-upload mr-2\"><\/i> Upload File\n        <\/div>\n        <div class=\"input-tab\" data-tab=\"url\">\n          <i class=\"fas fa-link mr-2\"><\/i> From URL\n        <\/div>\n        <div class=\"input-tab\" data-tab=\"paste\">\n          <i class=\"fas fa-paste mr-2\"><\/i> Paste JSON\n        <\/div>\n      <\/div>\n\n      <div id=\"upload-content\" class=\"input-content active\">\n        <label for=\"jsonFile\" class=\"drop-area\">\n          <i class=\"fas fa-cloud-upload-alt\"><\/i>\n          <p>Drop your JSON file here or click to browse<\/p>\n          <small>Supports files up to 100MB<\/small>\n          <input type=\"file\" id=\"jsonFile\" accept=\"application\/json\" class=\"input-file-browse\">\n        <\/label>\n      <\/div>\n\n      <div id=\"url-content\" class=\"input-content\">\n        <div class=\"url-input-group\">\n          <input type=\"text\" id=\"jsonUrl\" placeholder=\"Enter JSON URL (e.g., https:\/\/example.com\/data.json)\" class=\"url-input\">\n          <button id=\"fetchJsonBtn\" class=\"fetch-json-btn\">Fetch JSON<\/button>\n        <\/div>\n      <\/div>\n\n      <div id=\"paste-content\" class=\"input-content\">\n        <textarea id=\"jsonText\" rows=\"10\" placeholder=\"Paste JSON here...\" class=\"json-textarea\"><\/textarea>\n      <\/div>\n\n      <button id=\"loadJsonBtn\" class=\"load-json-btn mt-4 w-full\">Load JSON Data<\/button>\n      <div id=\"error\" class=\"error-message\"><\/div>\n      <div id=\"loadingMessage\" class=\"loading-message\">\n        <i class=\"fas fa-spinner fa-spin\"><\/i> Processing data, please wait...\n      <\/div>\n    <\/div>\n\n    <div class=\"conversion-options\">\n      <div class=\"section-header\">Output Options<\/div>\n      <div class=\"options-grid\">\n        <div class=\"options-group\">\n          <label>Output Format<\/label>\n          <div class=\"options-flex\">\n            <label class=\"option-label\">\n              <input type=\"radio\" name=\"format\" value=\"xlsx\" checked>\n              <span>.xlsx<\/span>\n            <\/label>\n            <label class=\"option-label\">\n              <input type=\"radio\" name=\"format\" value=\"xls\">\n              <span>.xls<\/span>\n            <\/label>\n            <label class=\"option-label\">\n              <input type=\"radio\" name=\"format\" value=\"csv\">\n              <span>.csv<\/span>\n            <\/label>\n          <\/div>\n        <\/div>\n        <div class=\"options-group\">\n          <label>Output File Name<\/label>\n          <input type=\"text\" id=\"outputName\" value=\"converted_data\" class=\"output-name-input\">\n        <\/div>\n      <\/div>\n      <div class=\"checkbox-options\">\n        <label class=\"option-label\">\n          <input type=\"checkbox\" id=\"includeHeader\" checked>\n          <span>Include Header Row in output<\/span>\n        <\/label>\n      <\/div>\n    <\/div>\n\n    <div class=\"field-mapping\">\n      <div class=\"section-header\">Field Mapping & Column Order<\/div>\n      <ul id=\"mappingList\" class=\"mapping-list\"><\/ul>\n    <\/div>\n\n    <div class=\"generate-section\">\n      <button id=\"generateBtn\" class=\"generate-btn\">Generate Excel File<\/button>\n      <div id=\"progressContainer\" class=\"progress-container\">\n        <div id=\"progressBar\" class=\"progress-bar\"><\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<div class=\"features-section\">\n      <h2 id=\"features-of-this-tool\">Features of This Tool<\/h2>\n      <ul class=\"features-list\">\n        <li>Supports JSON to Excel\/CSV conversion.<\/li>\n        <li>Imports JSON from file, text input, or web URL.<\/li>\n        <li>Automatically flattens nested objects into dotted-key columns.<\/li>\n        <li>Expands arrays of objects into separate <code>parent.key<\/code> columns.<\/li>\n        <li>Handles single-object JSON by converting it to an array.<\/li>\n        <li>Field mapping with drag-and-drop reorder and up\/down arrows.<\/li>\n        <li>Choose output format (.xlsx, .xls, .csv) and customize file name.<\/li>\n        <li>Include\/exclude header row.<\/li>\n        <li>Responsive, mobile-friendly design with progress indicator.<\/li>\n      <\/ul>\n\n\n      <h2 id=\"how-to-use-this-tool\">How to Use This Tool<\/h2>\n      <ol class=\"how-to-list\">\n        <li><strong>Load JSON:<\/strong> Upload a JSON file, paste JSON text, or enter a JSON URL, then click <em>Load JSON<\/em> or <em>Fetch JSON<\/em>.<\/li>\n        <li><strong>Configure Options:<\/strong> Select your desired output format, file name, and header settings.<\/li>\n        <li><strong>Map Fields:<\/strong> Check\/uncheck fields, rename columns, and reorder via drag-and-drop or arrows.<\/li>\n        <li><strong>Generate Excel:<\/strong> Click <em>Generate Excel<\/em> to download the file. Watch the progress bar for large datasets.<\/li>\n      <\/ol>\n      <div class=\"example-section\">\n        <h3 id=\"example-json\">Example JSON<\/h3>\n        <pre class=\"json-example\">[\n  {\n    \"id\": 1,\n    \"name\": \"John Doe\",\n    \"age\": 30,\n    \"isActive\": true,\n    \"birthdate\": \"1993-10-01\",\n    \"address\": {\n      \"street\": \"123 Main St\",\n      \"city\": \"New York\",\n      \"zip\": \"10001\"\n    },\n    \"orders\": [\n      { \"orderId\": 101, \"item\": \"Laptop\", \"price\": 999.99 },\n      { \"orderId\": 102, \"item\": \"Mouse\", \"price\": 29.99 }\n    ]\n  },\n  {\n    \"id\": 3,\n    \"name\": \"Bob Johnson\",\n    \"age\": 40,\n    \"isActive\": true,\n    \"birthdate\": \"1983-03-22\",\n    \"address\": {\n      \"street\": \"789 Pine Rd\",\n      \"city\": \"Chicago\"\n    },\n    \"orders\": []\n  },\n  {\n    \"id\": 2,\n    \"name\": \"Jane Smith\",\n    \"age\": 25,\n    \"isActive\": false,\n    \"birthdate\": \"1998-05-15\",\n    \"address\": {\n      \"street\": \"456 Oak Ave\",\n      \"city\": \"Los Angeles\",\n      \"zip\": \"90001\"\n    },\n    \"orders\": [\n      { \"orderId\": 201, \"item\": \"Phone\", \"price\": 699.99 }\n    ]\n  }\n]<\/pre>\n      <\/div>\n      <div class=\"example-section\">\n        <h3 id=\"resulting-excel-table-preview\">Resulting Excel Table Preview<\/h3>\n        <div class=\"table-container\">\n          <table class=\"preview-table\">\n            <thead>\n              <tr>\n                <th>id<\/th>\n                <th>name<\/th>\n                <th>age<\/th>\n                <th>isActive<\/th>\n                <th>birthdate<\/th>\n                <th>address.street<\/th>\n                <th>address.city<\/th>\n                <th>address.zip<\/th>\n                <th>orders.orderId<\/th>\n                <th>orders.item<\/th>\n                <th>orders.price<\/th>\n              <\/tr>\n            <\/thead>\n            <tbody>\n              <tr>\n                <td>1<\/td>\n                <td>John Doe<\/td>\n                <td>30<\/td>\n                <td>true<\/td>\n                <td>1993-10-01<\/td>\n                <td>123 Main St<\/td>\n                <td>New York<\/td>\n                <td>10001<\/td>\n                <td>101, 102<\/td>\n                <td>Laptop, Mouse<\/td>\n                <td>999.99, 29.99<\/td>\n              <\/tr>\n              <tr>\n                <td>3<\/td>\n                <td>Bob Johnson<\/td>\n                <td>40<\/td>\n                <td>true<\/td>\n                <td>1983-03-22<\/td>\n                <td>789 Pine Rd<\/td>\n                <td>Chicago<\/td>\n                <td><\/td>\n                <td><\/td>\n                <td><\/td>\n                <td><\/td>\n              <\/tr>\n              <tr>\n                <td>2<\/td>\n                <td>Jane Smith<\/td>\n                <td>25<\/td>\n                <td>false<\/td>\n                <td>1998-05-15<\/td>\n                <td>456 Oak Ave<\/td>\n                <td>Los Angeles<\/td>\n                <td>90001<\/td>\n                <td>201<\/td>\n                <td>Phone<\/td>\n                <td>699.99<\/td>\n              <\/tr>\n            <\/tbody>\n          <\/table>\n        <\/div>\n      <\/div>\n    <\/div>\n\n<\/div>\n\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/xlsx\/0.18.5\/xlsx.full.min.js\"><\/script>\n<script>\nconst jsonFileInput = document.getElementById('jsonFile');\nconst jsonText = document.getElementById('jsonText');\nconst jsonUrl = document.getElementById('jsonUrl');\nconst loadJsonBtn = document.getElementById('loadJsonBtn');\nconst fetchJsonBtn = document.getElementById('fetchJsonBtn');\nconst errorDiv = document.getElementById('error');\nconst loadingMessage = document.getElementById('loadingMessage'); \/\/ Added\nconst mappingList = document.getElementById('mappingList');\nconst generateBtn = document.getElementById('generateBtn');\nconst progressContainer = document.getElementById('progressContainer');\nconst progressBar = document.getElementById('progressBar');\nconst inputTabs = document.querySelectorAll('.input-tab');\nconst inputContents = document.querySelectorAll('.input-content');\nconst dropArea = document.querySelector('.drop-area');\n\nlet jsonData = null;\nlet mappings = [];\nlet dragSrcIdx = null;\n\nconst EXCEL_CELL_LIMIT = 32767; \/\/ Max chars for an Excel cell\n\n\/\/ Helper to split a string into chunks at word boundaries\nfunction splitStringIntoChunks(str, chunkSize) {\n  const chunks = [];\n  let remaining = str;\n\n  while (remaining.length > chunkSize) {\n    \/\/ Find the last safe split point (space, comma, newline, etc.) before chunkSize\n    const chunk = remaining.slice(0, chunkSize);\n    const lastDelimiter = chunk.match(\/[\\s,;\\n](?=[^\\s,;\\n]*$)\/)?.index;\n\n    if (lastDelimiter) {\n      \/\/ Split at the last delimiter\n      chunks.push(remaining.slice(0, lastDelimiter));\n      remaining = remaining.slice(lastDelimiter + 1);\n    } else {\n      \/\/ No delimiter found; split at chunkSize as a fallback\n      chunks.push(remaining.slice(0, chunkSize));\n      remaining = remaining.slice(chunkSize);\n    }\n  }\n\n  \/\/ Add the remaining part\n  if (remaining) {\n    chunks.push(remaining);\n  }\n\n  return chunks;\n}\n\n\/\/ Handle tab switching\ninputTabs.forEach(tab => {\n  tab.addEventListener('click', () => {\n    inputTabs.forEach(t => t.classList.remove('active'));\n    inputContents.forEach(c => c.classList.remove('active'));\n\n    tab.classList.add('active');\n    document.getElementById(`${tab.dataset.tab}-content`).classList.add('active');\n  });\n});\n\n\/\/ Drag and Drop functionality\ndropArea.addEventListener('dragover', (e) => {\n  e.preventDefault();\n  dropArea.style.borderColor = '#2575fc'; \/\/ Highlight on drag over\n});\n\ndropArea.addEventListener('dragleave', () => {\n  dropArea.style.borderColor = '#a0a0a0'; \/\/ Reset on drag leave\n});\n\ndropArea.addEventListener('drop', (e) => {\n  e.preventDefault();\n  dropArea.style.borderColor = '#a0a0a0'; \/\/ Reset on drop\n\n  const files = e.dataTransfer.files;\n  if (files.length > 0) {\n    jsonFileInput.files = files; \/\/ Assign dropped files to the hidden input\n    handleJsonFileLoad();\n  }\n});\n\n\/\/ Handle file input change\njsonFileInput.addEventListener('change', handleJsonFileLoad);\n\nfunction handleJsonFileLoad() {\n  errorDiv.classList.remove('visible');\n  errorDiv.textContent = '';\n  const file = jsonFileInput.files[0];\n  if (file) {\n    loadingMessage.classList.add('visible'); \/\/ Show loading message\n    const reader = new FileReader();\n    reader.onload = e => {\n      \/\/ Use setTimeout to allow UI to update (show loading message) before heavy processing\n      setTimeout(() => {\n        try {\n          jsonData = JSON.parse(e.target.result);\n          jsonText.value = ''; \/\/ Clear other inputs\n          jsonUrl.value = '';\n          initMapping();\n          scrollToFieldMapping();\n        } catch (err) {\n          errorDiv.classList.add('visible');\n          errorDiv.textContent = 'Invalid JSON file.';\n        } finally {\n          loadingMessage.classList.remove('visible'); \/\/ Hide loading message\n        }\n      }, 50);\n    };\n    reader.readAsText(file);\n  }\n}\n\nloadJsonBtn.addEventListener('click', () => {\n  errorDiv.classList.remove('visible');\n  errorDiv.textContent = '';\n\n  const activeTab = document.querySelector('.input-tab.active').dataset.tab;\n\n  if (activeTab === 'paste') {\n    if (jsonText.value.trim()) {\n      loadingMessage.classList.add('visible'); \/\/ Show loading message\n      \/\/ Use setTimeout to allow UI to update\n      setTimeout(() => {\n          try {\n            jsonData = JSON.parse(jsonText.value);\n            jsonFileInput.value = ''; \/\/ Clear other inputs\n            jsonUrl.value = '';\n            initMapping();\n            scrollToFieldMapping();\n          } catch (e) {\n            errorDiv.classList.add('visible');\n            errorDiv.textContent = `Invalid JSON text: ${e.message}`;\n          } finally {\n            loadingMessage.classList.remove('visible'); \/\/ Hide loading message\n          }\n      }, 50);\n    } else {\n      errorDiv.classList.add('visible');\n      errorDiv.textContent = 'Please paste JSON text.';\n    }\n  } else if (activeTab === 'upload') {\n    if (!jsonFileInput.files[0]) {\n      errorDiv.classList.add('visible');\n      errorDiv.textContent = 'Please upload a JSON file.';\n    } else {\n      handleJsonFileLoad(); \/\/ Re-call if user clicks Load JSON Data without new file but a file is present\n    }\n  } else if (activeTab === 'url') {\n    errorDiv.classList.add('visible');\n    errorDiv.textContent = 'Please use the \"Fetch JSON\" button for URLs.';\n  }\n});\n\nfetchJsonBtn.addEventListener('click', async () => {\n  errorDiv.classList.remove('visible');\n  errorDiv.textContent = '';\n  const url = jsonUrl.value.trim();\n\n  if (!url) {\n    errorDiv.classList.add('visible');\n    errorDiv.textContent = 'Please enter a valid URL.';\n    return;\n  }\n\n  loadingMessage.classList.add('visible'); \/\/ Show loading message\n\n  try {\n    const response = await fetch(url, {\n      method: 'GET',\n      headers: {\n        'Accept': 'application\/json'\n      }\n    });\n\n    if (!response.ok) {\n      throw new Error(`HTTP error! Status: ${response.status}`);\n    }\n\n    const data = await response.json();\n    \n    \/\/ Process data inside a short timeout to ensure UI stays responsive if needed\n    setTimeout(() => {\n        try {\n            jsonData = data;\n            jsonFileInput.value = ''; \/\/ Clear other inputs\n            jsonText.value = '';\n            initMapping();\n            scrollToFieldMapping();\n        } catch (e) {\n             errorDiv.classList.add('visible');\n             errorDiv.textContent = `Error processing JSON: ${e.message}`;\n        } finally {\n             loadingMessage.classList.remove('visible');\n        }\n    }, 50);\n\n  } catch (error) {\n    errorDiv.classList.add('visible');\n    errorDiv.textContent = `Failed to fetch JSON: ${error.message}`;\n    loadingMessage.classList.remove('visible');\n  }\n});\n\n\/**\n * Flattens a JSON object.\n * Overly long string values will be split into multiple keys (e.g., key, key_part2).\n * Arrays of objects are concatenated into a single string, which is then also subject to splitting.\n *\n * @param {Object} obj The JSON object or value to flatten.\n * @param {string} prefix The current key prefix for nested properties.\n * @param {Object} result The object accumulating the flattened key-value pairs.\n *\/\nfunction flatten(obj, prefix = '', result = {}) {\n  if (obj === null || typeof obj !== 'object') {\n    let value = obj;\n    if (typeof value === 'string' && value.length > EXCEL_CELL_LIMIT) {\n      const chunks = splitStringIntoChunks(value, EXCEL_CELL_LIMIT);\n      chunks.forEach((chunk, index) => {\n        const chunkKey = index === 0 ? prefix : `${prefix}_part${index + 1}`;\n        result[chunkKey] = chunk;\n      });\n    } else {\n      result[prefix] = value;\n    }\n  } else if (Array.isArray(obj)) {\n    if (obj.every(el => el && typeof el === 'object' && !Array.isArray(el))) {\n      \/\/ This case is for an array of objects, e.g., [{\"a\":1}, {\"b\":2}]\n      \/\/ We'll concatenate values for each sub-key into a single string,\n      \/\/ then apply splitting if *that* combined string is too long.\n      const allKeys = Array.from(new Set(obj.flatMap(el => Object.keys(el))));\n      allKeys.forEach(key => {\n        const values = obj.map(el => el[key] != null ? el[key] : '').join(', ');\n        if (values.length > EXCEL_CELL_LIMIT) {\n          const chunks = splitStringIntoChunks(values, EXCEL_CELL_LIMIT);\n          chunks.forEach((chunk, index) => {\n            const chunkKey = index === 0 ? `${prefix ? prefix + '.' : ''}${key}` : `${prefix ? prefix + '.' : ''}${key}_part${index + 1}`;\n            result[chunkKey] = chunk;\n          });\n        } else {\n          result[`${prefix ? prefix + '.' : ''}${key}`] = values;\n        }\n      });\n    } else {\n      \/\/ This case is for an array of primitives or mixed types, e.g., [1,2,3] or [1, {\"a\":1}]\n      \/\/ We stringify the entire array, then apply splitting if the stringified result is too long.\n      let value = JSON.stringify(obj);\n      if (value.length > EXCEL_CELL_LIMIT) {\n        const chunks = splitStringIntoChunks(value, EXCEL_CELL_LIMIT);\n        chunks.forEach((chunk, index) => {\n          const chunkKey = index === 0 ? prefix : `${prefix}_part${index + 1}`;\n          result[chunkKey] = chunk;\n        });\n      } else {\n        result[prefix] = value;\n      }\n    }\n  } else {\n    Object.entries(obj).forEach(([k, v]) => {\n      const newKey = prefix ? `${prefix}.${k}` : k;\n      flatten(v, newKey, result);\n    });\n  }\n  return result;\n}\n\nfunction detectFields(data) {\n  const fields = new Set();\n  data.forEach(item => {\n    const flat = flatten(item); \/\/ Use the new flatten logic for field detection\n    Object.keys(flat).forEach(k => fields.add(k));\n  });\n  return Array.from(fields);\n}\n\nfunction renderMapping() {\n  mappingList.innerHTML = '';\n  mappings.forEach((m, idx) => {\n    const li = document.createElement('li');\n    li.className = 'mapping-item';\n    li.draggable = true;\n\n    const chk = document.createElement('input');\n    chk.type = 'checkbox';\n    chk.checked = m.include;\n    chk.className = 'mapping-checkbox';\n    chk.onchange = () => m.include = chk.checked;\n\n    const label = document.createElement('span');\n    label.textContent = m.key;\n    label.className = 'mapping-label';\n\n    const txt = document.createElement('input');\n    txt.type = 'text';\n    txt.value = m.header;\n    txt.className = 'mapping-input';\n    txt.onchange = () => m.header = txt.value;\n\n    const up = document.createElement('i');\n    up.className = 'fas fa-arrow-up arrow-icon';\n    up.onclick = () => {\n      if (idx > 0) {\n        [mappings[idx - 1], mappings[idx]] = [mappings[idx], mappings[idx - 1]];\n        renderMapping();\n      }\n    };\n\n    const down = document.createElement('i');\n    down.className = 'fas fa-arrow-down arrow-icon';\n    down.onclick = () => {\n      if (idx < mappings.length - 1) {\n        [mappings[idx + 1], mappings[idx]] = [mappings[idx], mappings[idx + 1]];\n        renderMapping();\n      }\n    };\n\n    li.append(chk, label, txt, up, down);\n    li.addEventListener('dragstart', e => { dragSrcIdx = idx; e.dataTransfer.effectAllowed = 'move'; li.classList.add('dragging'); });\n    li.addEventListener('dragover', e => { e.preventDefault(); e.dataTransfer.dropEffect = 'move'; });\n    li.addEventListener('dragleave', () => { \/* No specific action on dragleave for this example *\/ });\n    li.addEventListener('drop', e => {\n      e.preventDefault();\n      li.classList.remove('dragging');\n      if (dragSrcIdx !== null && dragSrcIdx !== idx) {\n        const d = mappings.splice(dragSrcIdx, 1)[0];\n        mappings.splice(idx, 0, d);\n        renderMapping();\n      }\n      dragSrcIdx = null; \/\/ Reset\n    });\n    li.addEventListener('dragend', () => {\n      li.classList.remove('dragging');\n      dragSrcIdx = null; \/\/ Reset\n    });\n\n    mappingList.append(li);\n  });\n}\n\nfunction initMapping() {\n  jsonData = Array.isArray(jsonData) ? jsonData : [jsonData];\n  \/\/ To detect fields for mapping, we apply flatten on a sample of data\n  \/\/ This will correctly identify `key` and `key_part2` etc.\n  const allDetectedFields = new Set();\n  jsonData.forEach(item => {\n    const flatItem = flatten(item);\n    Object.keys(flatItem).forEach(key => allDetectedFields.add(key));\n  });\n  mappings = Array.from(allDetectedFields).map(f => ({ key: f, header: f, include: true }));\n  renderMapping();\n}\n\nfunction scrollToFieldMapping() {\n  const fieldMapping = document.querySelector('.field-mapping');\n  const offset = 60; \/\/ Adjust if header\/sticky elements are present\n  const elementPosition = fieldMapping.getBoundingClientRect().top + window.pageYOffset;\n  window.scrollTo({\n    top: elementPosition - offset,\n    behavior: 'smooth'\n  });\n}\n\ngenerateBtn.addEventListener('click', () => {\n  if (!jsonData || jsonData.length === 0) {\n    errorDiv.classList.add('visible');\n    errorDiv.textContent = 'Load valid JSON data first.';\n    return;\n  }\n  errorDiv.textContent = '';\n  progressContainer.classList.add('visible');\n  progressBar.style.width = '0%';\n\n  const includeHeader = document.getElementById('includeHeader').checked;\n  const fmt = document.querySelector('input[name=\"format\"]:checked').value;\n  const filenameInput = document.getElementById('outputName').value.trim();\n  const filename = (filenameInput ? filenameInput : 'converted_data') + '.' + fmt; \/\/ Default filename if empty\n\n  const cols = mappings.filter(m => m.include);\n  const dataRows = jsonData.map(item => {\n    const flat = flatten(item); \/\/ Apply the splitting flatten logic\n    const row = {};\n    cols.forEach(c => row[c.header] = flat[c.key] !== undefined ? flat[c.key] : ''); \/\/ Ensure empty string for undefined\n    return row;\n  });\n\n  const workSheet = XLSX.utils.json_to_sheet(dataRows, { header: cols.map(c => c.header), skipHeader: !includeHeader });\n  const workBook = XLSX.utils.book_new();\n  XLSX.utils.book_append_sheet(workBook, workSheet, 'Sheet1');\n\n  \/\/ Simulate progress for large files, though XLSX.writeFile is sync\n  let progress = 0;\n  const interval = setInterval(() => {\n    progress += 10;\n    if (progress <= 100) {\n      progressBar.style.width = `${progress}%`;\n    } else {\n      clearInterval(interval);\n    }\n  }, 50);\n\n  \/\/ Actual file write is synchronous\n  setTimeout(() => { \/\/ Small delay to allow progress bar to show initial state\n    try {\n      XLSX.writeFile(workBook, filename, { bookType: fmt });\n      progressBar.style.width = '100%';\n      setTimeout(() => progressContainer.classList.remove('visible'), 1000); \/\/ Hide after a small delay\n    } catch (e) {\n      errorDiv.classList.add('visible');\n      errorDiv.textContent = `Error generating file: ${e.message}`;\n      progressContainer.classList.remove('visible');\n    }\n  }, 500); \/\/ Simulate processing time\n});\n<\/script>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Free Excel Course with Certificate Learn essential Excel skills for data analysis, including functions, formulas, and data visualization techniques. Enroll Free JSON to Excel Converter Transform your JSON data into beautiful Excel spreadsheets with ease and style. No restrictions and Size Limits Data Converter Upload, paste, or fetch JSON data and convert it to Excel [&hellip;]<\/p>\n","protected":false},"author":41,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"color","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"color","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"color","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[25860],"tags":[],"class_list":["post-107220","page","type-page","status-publish","hentry","category-software"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.3 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Convert JSON to Excel - Tool<\/title>\n<meta name=\"description\" content=\"Use this tool to convert JSON to Excel. It is fast, feature-rich, and easy to use.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.mygreatlearning.com\/blog\/json-to-excel-tool\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JSON to Excel Converter\" \/>\n<meta property=\"og:description\" content=\"Use this tool to convert JSON to Excel. It is fast, feature-rich, and easy to use.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.mygreatlearning.com\/blog\/json-to-excel-tool\/\" \/>\n<meta property=\"og:site_name\" content=\"Great Learning Blog: Free Resources what Matters to shape your Career!\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/GreatLearningOfficial\/\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@Great_Learning\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/json-to-excel-tool\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/json-to-excel-tool\\\/\"},\"author\":{\"name\":\"Great Learning Editorial Team\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#\\\/schema\\\/person\\\/6f993d1be4c584a335951e836f2656ad\"},\"headline\":\"JSON to Excel Converter\",\"datePublished\":\"2025-05-07T10:20:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/json-to-excel-tool\\\/\"},\"wordCount\":301,\"publisher\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#organization\"},\"articleSection\":[\"IT\\\/Software Development\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/json-to-excel-tool\\\/\",\"url\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/json-to-excel-tool\\\/\",\"name\":\"Convert JSON to Excel - Tool\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#website\"},\"datePublished\":\"2025-05-07T10:20:38+00:00\",\"description\":\"Use this tool to convert JSON to Excel. It is fast, feature-rich, and easy to use.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/json-to-excel-tool\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/json-to-excel-tool\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/json-to-excel-tool\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JSON to Excel Converter\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/\",\"name\":\"Great Learning Blog\",\"description\":\"Learn, Upskill &amp; Career Development Guide and Resources\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#organization\"},\"alternateName\":\"Great Learning\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#organization\",\"name\":\"Great Learning\",\"url\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/GL-Logo.jpg\",\"contentUrl\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/GL-Logo.jpg\",\"width\":900,\"height\":900,\"caption\":\"Great Learning\"},\"image\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/GreatLearningOfficial\\\/\",\"https:\\\/\\\/x.com\\\/Great_Learning\",\"https:\\\/\\\/www.instagram.com\\\/greatlearningofficial\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/school\\\/great-learning\\\/\",\"https:\\\/\\\/in.pinterest.com\\\/greatlearning12\\\/\",\"https:\\\/\\\/www.youtube.com\\\/user\\\/beaconelearning\\\/\"],\"description\":\"Great Learning is a leading global ed-tech company for professional training and higher education. It offers comprehensive, industry-relevant, hands-on learning programs across various business, technology, and interdisciplinary domains driving the digital economy. These programs are developed and offered in collaboration with the world's foremost academic institutions.\",\"email\":\"info@mygreatlearning.com\",\"legalName\":\"Great Learning Education Services Pvt. Ltd\",\"foundingDate\":\"2013-11-29\",\"numberOfEmployees\":{\"@type\":\"QuantitativeValue\",\"minValue\":\"1001\",\"maxValue\":\"5000\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#\\\/schema\\\/person\\\/6f993d1be4c584a335951e836f2656ad\",\"name\":\"Great Learning Editorial Team\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/unnamed.webp\",\"url\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/unnamed.webp\",\"contentUrl\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/unnamed.webp\",\"caption\":\"Great Learning Editorial Team\"},\"description\":\"The Great Learning Editorial Staff includes a dynamic team of subject matter experts, instructors, and education professionals who combine their deep industry knowledge with innovative teaching methods. Their mission is to provide learners with the skills and insights needed to excel in their careers, whether through upskilling, reskilling, or transitioning into new fields.\",\"sameAs\":[\"https:\\\/\\\/www.mygreatlearning.com\\\/\",\"https:\\\/\\\/in.linkedin.com\\\/school\\\/great-learning\\\/\",\"https:\\\/\\\/x.com\\\/https:\\\/\\\/twitter.com\\\/Great_Learning\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCObs0kLIrDjX2LLSybqNaEA\"],\"award\":[\"Best EdTech Company of the Year 2024\",\"Education Economictimes Outstanding Education\\\/Edtech Solution Provider of the Year 2024\",\"Leading E-learning Platform 2024\"],\"url\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/author\\\/greatlearning\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Convert JSON to Excel - Tool","description":"Use this tool to convert JSON to Excel. It is fast, feature-rich, and easy to use.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.mygreatlearning.com\/blog\/json-to-excel-tool\/","og_locale":"en_US","og_type":"article","og_title":"JSON to Excel Converter","og_description":"Use this tool to convert JSON to Excel. It is fast, feature-rich, and easy to use.","og_url":"https:\/\/www.mygreatlearning.com\/blog\/json-to-excel-tool\/","og_site_name":"Great Learning Blog: Free Resources what Matters to shape your Career!","article_publisher":"https:\/\/www.facebook.com\/GreatLearningOfficial\/","twitter_card":"summary_large_image","twitter_site":"@Great_Learning","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.mygreatlearning.com\/blog\/json-to-excel-tool\/#article","isPartOf":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/json-to-excel-tool\/"},"author":{"name":"Great Learning Editorial Team","@id":"https:\/\/www.mygreatlearning.com\/blog\/#\/schema\/person\/6f993d1be4c584a335951e836f2656ad"},"headline":"JSON to Excel Converter","datePublished":"2025-05-07T10:20:38+00:00","mainEntityOfPage":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/json-to-excel-tool\/"},"wordCount":301,"publisher":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/#organization"},"articleSection":["IT\/Software Development"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.mygreatlearning.com\/blog\/json-to-excel-tool\/","url":"https:\/\/www.mygreatlearning.com\/blog\/json-to-excel-tool\/","name":"Convert JSON to Excel - Tool","isPartOf":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/#website"},"datePublished":"2025-05-07T10:20:38+00:00","description":"Use this tool to convert JSON to Excel. It is fast, feature-rich, and easy to use.","breadcrumb":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/json-to-excel-tool\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.mygreatlearning.com\/blog\/json-to-excel-tool\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.mygreatlearning.com\/blog\/json-to-excel-tool\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/www.mygreatlearning.com\/blog\/"},{"@type":"ListItem","position":2,"name":"JSON to Excel Converter"}]},{"@type":"WebSite","@id":"https:\/\/www.mygreatlearning.com\/blog\/#website","url":"https:\/\/www.mygreatlearning.com\/blog\/","name":"Great Learning Blog","description":"Learn, Upskill &amp; Career Development Guide and Resources","publisher":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/#organization"},"alternateName":"Great Learning","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.mygreatlearning.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.mygreatlearning.com\/blog\/#organization","name":"Great Learning","url":"https:\/\/www.mygreatlearning.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.mygreatlearning.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2022\/06\/GL-Logo.jpg","contentUrl":"https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2022\/06\/GL-Logo.jpg","width":900,"height":900,"caption":"Great Learning"},"image":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/GreatLearningOfficial\/","https:\/\/x.com\/Great_Learning","https:\/\/www.instagram.com\/greatlearningofficial\/","https:\/\/www.linkedin.com\/school\/great-learning\/","https:\/\/in.pinterest.com\/greatlearning12\/","https:\/\/www.youtube.com\/user\/beaconelearning\/"],"description":"Great Learning is a leading global ed-tech company for professional training and higher education. It offers comprehensive, industry-relevant, hands-on learning programs across various business, technology, and interdisciplinary domains driving the digital economy. These programs are developed and offered in collaboration with the world's foremost academic institutions.","email":"info@mygreatlearning.com","legalName":"Great Learning Education Services Pvt. Ltd","foundingDate":"2013-11-29","numberOfEmployees":{"@type":"QuantitativeValue","minValue":"1001","maxValue":"5000"}},{"@type":"Person","@id":"https:\/\/www.mygreatlearning.com\/blog\/#\/schema\/person\/6f993d1be4c584a335951e836f2656ad","name":"Great Learning Editorial Team","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2022\/02\/unnamed.webp","url":"https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2022\/02\/unnamed.webp","contentUrl":"https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2022\/02\/unnamed.webp","caption":"Great Learning Editorial Team"},"description":"The Great Learning Editorial Staff includes a dynamic team of subject matter experts, instructors, and education professionals who combine their deep industry knowledge with innovative teaching methods. Their mission is to provide learners with the skills and insights needed to excel in their careers, whether through upskilling, reskilling, or transitioning into new fields.","sameAs":["https:\/\/www.mygreatlearning.com\/","https:\/\/in.linkedin.com\/school\/great-learning\/","https:\/\/x.com\/https:\/\/twitter.com\/Great_Learning","https:\/\/www.youtube.com\/channel\/UCObs0kLIrDjX2LLSybqNaEA"],"award":["Best EdTech Company of the Year 2024","Education Economictimes Outstanding Education\/Edtech Solution Provider of the Year 2024","Leading E-learning Platform 2024"],"url":"https:\/\/www.mygreatlearning.com\/blog\/author\/greatlearning\/"}]}},"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"web-stories-poster-portrait":false,"web-stories-publisher-logo":false,"web-stories-thumbnail":false},"uagb_author_info":{"display_name":"Great Learning Editorial Team","author_link":"https:\/\/www.mygreatlearning.com\/blog\/author\/greatlearning\/"},"uagb_comment_info":0,"uagb_excerpt":"Free Excel Course with Certificate Learn essential Excel skills for data analysis, including functions, formulas, and data visualization techniques. Enroll Free JSON to Excel Converter Transform your JSON data into beautiful Excel spreadsheets with ease and style. No restrictions and Size Limits Data Converter Upload, paste, or fetch JSON data and convert it to Excel&hellip;","_links":{"self":[{"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/pages\/107220","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/comments?post=107220"}],"version-history":[{"count":40,"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/pages\/107220\/revisions"}],"predecessor-version":[{"id":108591,"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/pages\/107220\/revisions\/108591"}],"wp:attachment":[{"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/media?parent=107220"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/categories?post=107220"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/tags?post=107220"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}