JSON to Text Tool

 

Explanation

1. HTML Structure:

• <textarea>: The main input field where users can paste or type JSON data.

• Convert Button: Triggers the convertJSONToText function to parse the input and render it as readable text.

• <div id="textOutput">: Displays the converted text output.

2. CSS Styling:

• Container & Colors: Uses a light blue background, vibrant colours for buttons and borders.

• Button Hover Effect: Changes button colour slightly on hover.

• Responsive Design: Adjusts font sizes and layout for smaller screens.

3. JavaScript Function:

• convertJSONToText:

• Parsing: Attempts to parse the JSON input. If successful, it converts the JSON to a formatted text string using jsonToText.

• Error Handling: If the JSON is invalid, an error message is displayed in red.

• jsonToText:

• Recursive Conversion: Recursively traverses each key-value pair in the JSON object, handling nested objects with indentation for readability.

How to Use

1. Enter JSON Data: Copy and paste or manually enter JSON data into the input field. An example format:

2. Click "Convert to Text": This will parse the JSON input and display it as text.

3. View Output: The structured, formatted text output appears below. If invalid JSON, an error message will appear.

This tool is fully responsive and provides error feedback if the input data cannot be parsed as JSON.

{ "name": "John", "age": 30, "city": "New York", "hobbies": { "indoor": ["reading", "coding"], "outdoor": ["cycling", "hiking"] } }

JSON to Text Tool

Enter JSON Data: