How to output JSON with spaces and new lines?

Question

I have tried:

$("#dvCSV").append(JSON.stringify(dataArray, null, '\t'));

But the output is:

[ { "20": "10", "Barcellona": "Cagliari", "Dipendenti": "Dipendenti" }, { "20": "15", "Barcellona": "Sassari", "Dipendenti": "Dipendenti" }, { "20": "22", "Barcellona": "Torino", "Dipendenti": "Dipendenti" } ]

This answer on SO is perfect but I tried to apply it but did not manage it, this is the jsFiddle to play with:

$(function () { var csv = $("#fileUpload").val(); $("#upload").bind("click", function () { var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv|.txt)$/; if (regex.test($("#fileUpload").val().toLowerCase())) { if (typeof (FileReader) != "undefined") { var reader = new FileReader(); reader.onload = function (e) { var rows = e.target.result.split("\r\n"); if(rows.length>0){ var firstRowCells = GetCSVCells(rows[0], ","); var dataArray = new Array(); for(var i=1;i<rows.length;i++) { var cells = GetCSVCells(rows[i], ","); var obj = {}; for(var j=0;j<cells.length;j++) { obj[firstRowCells[j]] = cells[j]; } dataArray.push(obj); } $("#dvCSV").html(''); $("#dvCSV").append(JSON.stringify(dataArray, null, '\t')); } } reader.readAsText($("#fileUpload")[0].files[0]); } else { alert("This browser does not support HTML5."); } } else { alert("Please upload a valid CSV file."); } }); }); function GetCSVCells(row, separator){ return row.split(separator); }

#heading { font-size: x-large; font-weight: bold; } .text { width: 99%; height: 200px; } .small { font-size: small; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <input type="file" id="fileUpload" name="fileUpload" /> <input type="button" id="upload" value="Upload" name="upload"/> <hr /> <div id="dvCSV"></div>

Asons · Accepted Answer · 2018-03-31 12:24:59Z

Since you append this to a HTML element, you need something like e.g. set it's white-space to pre-wrap for it to wrap properly.

Stack snippet

var arr = [ { "20": "10", "Barcellona": "Cagliari", "Dipendenti": "Dipendenti" }, { "20": "15", "Barcellona": "Sassari", "Dipendenti": "Dipendenti" }, { "20": "22", "Barcellona": "Torino", "Dipendenti": "Dipendenti" } ]; document.getElementById('dvCSV').innerHTML = JSON.stringify(arr, null, '\t');

#dvCSV { white-space: pre-wrap }

<div id="dvCSV"></div>

oooh that's what it was! The css!! Didn't think about it, yes it works fine now. Will accept as soon as it let me

Sébastien · Accepted Answer · 2018-03-31 12:17:55Z

It works fine with spaces, like:

JSON.stringify(arr, null, ' '); // Using 2 spaces as the 'space' argument

var arr = [ { "20": "10", "Barcellona": "Cagliari", "Dipendenti": "Dipendenti" }, { "20": "15", "Barcellona": "Sassari", "Dipendenti": "Dipendenti" }, { "20": "22", "Barcellona": "Torino", "Dipendenti": "Dipendenti" } ]; console.log(JSON.stringify(arr, null, ' '));

mm tried var arr = (dataArray); $("#dvCSV").append(JSON.stringify(arr, null, ' ')); with no luck, dataArray is an array if that helps
Upvoting because even though it doesn't address the question (formatting readable JSON within HTML), it is also nice to point out that the same effect can be done within the console.

Collectives™ on Stack Overflow

How to output JSON with spaces and new lines?

2 Answers 2

1 Comment

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Linked

Related