<div class="container">
<h1>JSON to FormData Converter</h1>
<div class="input-section">
<label for="jsonInput">Enter JSON Object:</label>
<textarea id="jsonInput" placeholder='{"name": "John", "email": "john@example.com", "age": 30}'></textarea>
</div>
<div class="button-group">
<button onclick="convertToFormData()">Convert to FormData</button>
<button onclick="clearAll()">Clear</button>
</div>
<div class="output-section">
<div class="output-title">FormData Entries:</div>
<div class="output-content" id="output">
<div style="color: #666; text-align: center; padding: 20px;">
Enter JSON and click Convert
</div>
</div>
</div>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0f0f0f 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
color: #e0e0e0;
}
.container {
width: 100%;
max-width: 900px;
background: linear-gradient(145deg, #1a1a1a, #0d0d0d);
border-radius: 16px;
padding: 40px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
border: 1px solid #2a2a2a;
}
h1 {
text-align: center;
margin-bottom: 30px;
font-size: 28px;
background: linear-gradient(135deg, #ffffff, #888888);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.input-section {
margin-bottom: 25px;
}
label {
display: block;
margin-bottom: 10px;
font-weight: 500;
color: #b0b0b0;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1px;
}
textarea {
width: 100%;
min-height: 200px;
padding: 15px;
background: #0a0a0a;
border: 1px solid #333;
border-radius: 8px;
color: #e0e0e0;
font-family: 'Courier New', monospace;
font-size: 14px;
resize: vertical;
transition: border-color 0.3s;
}
textarea:focus {
outline: none;
border-color: #555;
}
.button-group {
display: flex;
gap: 15px;
margin-bottom: 25px;
}
button {
flex: 1;
padding: 14px 24px;
background: linear-gradient(135deg, #2a2a2a, #1a1a1a);
color: #ffffff;
border: 1px solid #3a3a3a;
border-radius: 8px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
text-transform: uppercase;
letter-spacing: 0.5px;
}
button:hover {
background: linear-gradient(135deg, #3a3a3a, #2a2a2a);
border-color: #4a4a4a;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
button:active {
transform: translateY(0);
}
.output-section {
background: #0a0a0a;
border: 1px solid #2a2a2a;
border-radius: 8px;
padding: 20px;
min-height: 150px;
}
.output-title {
font-size: 14px;
color: #b0b0b0;
margin-bottom: 15px;
text-transform: uppercase;
letter-spacing: 1px;
}
.output-content {
background: #050505;
padding: 15px;
border-radius: 6px;
border: 1px solid #1a1a1a;
max-height: 300px;
overflow-y: auto;
}
.output-item {
padding: 8px 0;
border-bottom: 1px solid #1a1a1a;
font-family: 'Courier New', monospace;
font-size: 13px;
}
.output-item:last-child {
border-bottom: none;
}
.key {
color: #7aa2f7;
font-weight: 600;
}
.value {
color: #9ece6a;
}
.error {
color: #f7768e;
padding: 12px;
background: rgba(247, 118, 142, 0.1);
border-radius: 6px;
border: 1px solid rgba(247, 118, 142, 0.3);
}
.success {
color: #9ece6a;
padding: 12px;
background: rgba(158, 206, 106, 0.1);
border-radius: 6px;
border: 1px solid rgba(158, 206, 106, 0.3);
}
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #0a0a0a;
}
::-webkit-scrollbar-thumb {
background: #2a2a2a;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #3a3a3a;
}
function convertToFormData() {
const input = document.getElementById('jsonInput').value.trim();
const output = document.getElementById('output');
if (!input) {
output.innerHTML = '<div class="error">Please enter a JSON object</div>';
return;
}
try {
const jsonData = JSON.parse(input);
const formData = new FormData();
// Function to handle nested objects and arrays
function appendFormData(data, parentKey = '') {
if (data && typeof data === 'object' && !(data instanceof File)) {
if (Array.isArray(data)) {
data.forEach((item, index) => {
const key = parentKey ? `${parentKey}[${index}]` : `${index}`;
appendFormData(item, key);
});
} else {
Object.keys(data).forEach(key => {
const value = data[key];
const formKey = parentKey ? `${parentKey}[${key}]` : key;
appendFormData(value, formKey);
});
}
} else {
formData.append(parentKey, data);
}
}
appendFormData(jsonData);
// Display the FormData entries
let html = '<div class="success">✓ Successfully converted to FormData</div>';
let count = 0;
for (let [key, value] of formData.entries()) {
count++;
html += `
<div class="output-item">
<span class="key">${escapeHtml(key)}</span>:
<span class="value">${escapeHtml(String(value))}</span>
</div>
`;
}
if (count === 0) {
html += '<div class="error">No entries found in JSON</div>';
}
output.innerHTML = html;
} catch (e) {
output.innerHTML = `<div class="error">Invalid JSON: ${escapeHtml(e.message)}</div>`;
}
}
function clearAll() {
document.getElementById('jsonInput').value = '';
document.getElementById('output').innerHTML = '<div style="color: #666; text-align: center; padding: 20px;">Enter JSON and click Convert</div>';
}
function escapeHtml(text) {
const map = {
'&': '&',
'<': '<',
'>': '>',
'"': '"',
"'": '''
};
return text.replace(/[&<>"']/g, m => map[m]);
}
// Example data on load
window.addEventListener('load', () => {
document.getElementById('jsonInput').value = JSON.stringify({
name: "John Doe",
email: "john@example.com",
age: 30,
hobbies: ["reading", "coding"],
address: {
street: "123 Main St",
city: "New York"
}
}, null, 2);
});
No comments yet. Be the first!