Converting JSON to YAML is useful when you need a human-readable, more compact representation of your data. YAML is often used for configuration files, where readability and simplicity are key.
Example JSON:
json
[
{
"Name": "John",
"Age": 28,
"Country": "USA"
},
{
"Name": "Jane",
"Age": 22,
"Country": "Canada"
},
{
"Name": "Tom",
"Age": 30,
"Country": "UK"
}
]
Converted YAML Output:
yaml
- Name: John
Age: 28
Country: USA
- Name: Jane
Age: 22
Country: Canada
- Name: Tom
Age: 30
Country: UK
How to Convert JSON to YAML
1. Using JavaScript (For Web Use)
You can convert JSON to YAML using JavaScript and a YAML library, such as js-yaml. Here's an example using JavaScript in the browser:
JavaScript Code:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSON to YAML</title>
<script src="https://cdn.jsdelivr.net/npm/js-yaml@4.1.0/dist/js-yaml.min.js"></script>
</head>
<body>
<h2>Convert JSON to YAML</h2>
<button onclick="generateYAML()">Generate YAML</button>
<pre id="yaml-output"></pre>
<script>
const jsonData = [
{
"Name": "John",
"Age": 28,
"Country": "USA"
},
{
"Name": "Jane",
"Age": 22,
"Country": "Canada"
},
{
"Name": "Tom",
"Age": 30,
"Country": "UK"
}
];
function generateYAML() {
// Use js-yaml library to convert JSON to YAML
const yaml = jsyaml.dump(jsonData);
// Display the YAML output in the <pre> tag
document.getElementById("yaml-output").textContent = yaml;
}
</script>
</body>
</html>
Explanation:
JSON Data: The jsonData variable holds your JSON data.
generateYAML() Function: This function uses the js-yaml library to convert the JSON data to YAML format.
The YAML output is displayed in the <pre> tag, which preserves formatting.
Steps:
Copy and paste the code into an HTML file.
Open the file in your web browser.
Click the "Generate YAML" button to see the YAML output.
2. Using Python (For Server-Side or Automated Conversion)
Python has an excellent library called PyYAML that makes it easy to convert JSON to YAML. Here's how you can do it:
Python Script:
python
import json
import yaml
# Sample JSON data
json_data = [
{"Name": "John", "Age": 28, "Country": "USA"},
{"Name": "Jane", "Age": 22, "Country": "Canada"},
{"Name": "Tom", "Age": 30, "Country": "UK"}
]
# Convert JSON to YAML
yaml_data = yaml.dump(json_data, default_flow_style=False)
# Save to a YAML file
with open('output.yaml', 'w') as file:
file.write(yaml_data)
print("YAML file 'output.yaml' has been created.")
Explanation:
yaml.dump(): This method converts Python dictionaries (in this case, the JSON data) into a YAML string.
default_flow_style=False: This argument ensures the YAML is written in the block style, making it more readable.
The resulting YAML data is saved to output.yaml.
Steps:
Install the PyYAML library if you don't have it already: pip install pyyaml.
Save the script as a .py file.
Run the script, and the YAML data will be saved to output.yaml.
3. Using Online Tools
If you don't want to write code, you can use online tools to quickly convert JSON to YAML.
JSON to YAML Converter:
Paste your JSON data into the tool.
The tool will automatically convert it to YAML, and you can download or copy the output.
ConvertJSON:
Paste or upload your JSON file.
The tool will generate the YAML output for you.
4. Manually Writing YAML from JSON
For small JSON datasets, you can manually convert JSON to YAML by following this structure:
JSON:
json
[
{"Name": "John", "Age": 28, "Country": "USA"},
{"Name": "Jane", "Age": 22, "Country": "Canada"}
]
Manually Written YAML:
yaml
- Name: John
Age: 28
Country: USA
- Name: Jane
Age: 22
Country: Canada
Summary of Methods:
JavaScript: Use js-yaml in the browser to convert JSON to YAML dynamically.
Python: Use the PyYAML library to convert JSON to YAML in Python for automation or large datasets.
Online Tools: Use tools like JSON to YAML Converter or ConvertJSON for quick conversions without writing code.
Manual Writing: For small datasets, manually format the JSON into YAML.