JAVASCRIPT 将 JSON Obj 转换为 CSV txt 文件？

Question

I have a form with a submit button.

Right now I have a bit of code that when the button is pressed it converts all of the form inputs into an object and downloads a.json file that looks like this:-

{"productNumber":"12345678","cat1":"sports","val1":"yes","val2":"yes","val3":"no","val4":"no","val5":"no"}

The code I'm using to generate this is from a previous SO thread here: -

<script>
(function() {
    function toJSONString( form ) {
        var obj = {};
        var elements = form.querySelectorAll( "input, select" );
        for( var i = 0; i < elements.length; ++i ) {
            var element = elements[i];
            var name = element.name;
            var value = element.value;

            if( name ) {
                obj[ name ] = value;
            }
        }

        return JSON.stringify( obj );
    }

    document.addEventListener( "DOMContentLoaded", function() {
        var form = document.getElementById( "generatePayload" );
        var output = document.getElementById( "output" );
        form.addEventListener( "submit", function( e ) {
            e.preventDefault();
            var json = toJSONString( this );
            output.innerHTML = json;

            console.log(json)

            var data = "text/json;charset=utf-8," + json;
            var a = document.createElement('a');
            var accountNumber = document.getElementById( "productNumber" ).value
            a.href = 'data:' + data;
            a.download = accountNumber + '.json';
            a.innerHTML = 'download FILE';

            var container = document.querySelector( "#exportPayload" );
            container.appendChild(a);
            a.click();

            a.remove();

            console.log("Payload Export Successful!")

        }, false);

    });

})();
</script>

What I'm trying to do is modify the code so my output button produces a.csv or.txt file that looks like this: -

12345678,sports,yes,yes,no,no,no

Is there a function I can use within Javascript to make this transformation before downloading the file? I'm trying to reverse engineer this as a learning exercise so any insight you can provide over code snippets would help me a lot with this question!

Answer 1

You can get CSV by quoting the values. If there are quotes IN the values, we would need to escape them

 const obj = {"productNumber":"12345678","cat1":"sports","val1":"yes","val2":"yes","val3":"no","val4":"no","val5":"no"} const csv = `"${Object.values(obj).join('","')}"` console.log(csv);

If you do not need the quotes, do this

 const obj = {"productNumber":"12345678","cat1":"sports","val1":"yes","val2":"yes","val3":"no","val4":"no","val5":"no"} const csv = Object.values(obj).join(",") console.log(csv);