JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <textarea id="json" class="text">[{"hotel_id":16950,"preferred":false,"negotiated":false,"rate_access_code_ids":["faesfesr"],"custom_branding":false,"custom_sold_out_message":"","custom_sold_out_message_enabled":true,"hotel_name":"Hotel Andra","hotel_address":{"street_address":"2000 4th Ave","city":"Seattle","state":"WA","country":"USA","latitude":47.61318,"longitude":-122.34009,"zip_code":"98121"},"providers":[{"id":1,"property_id":"BT04185"}]}]</textarea>
    <br />
    <input id="quote" type="checkbox" checked="true" /> Wrap values in double quotes
    <br />
    <input id="labels" type="checkbox" checked="true" /> Include labels in first row
    <br />
    <button id="convert">Convert to CSV</button>
    &nbsp;&nbsp;
    <button id="download">Download CSV</button>
    <textarea id="csv" class="text"></textarea>
    <p>Based on code posted <a href="http://stackoverflow.com/a/4130939/317" target="_blank">here on StackOverflow</a></p>

CSS

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

JavaScript

function JSON2CSV(objectArray) {

        //Generate the first row
        var headerLine = [];
        var currentLine = "";
        var firstObject = objectArray[0];
        var i = 0;
        for (var key in firstObject) {
            headerLine[i] = key;
            currentLine += key + ",";
            i++;
        }

        //Define the final csv file which's a string format
        var result = "";
        //include labels in first row
        currentLine = currentLine.slice(0, -1); //Remove the last delimiter
        result += currentLine + "\n";

        //Append rows to csv file
        for (var i = 0; i < objectArray.length; i++) {
            var currentLine = "";
            for (var j = 0; j < headerLine.length; j++) {
                var value = "";
                if (headerLine[j] === "rate_access_code_ids") {
                    var racArray = objectArray[i]["rate_access_code_ids"];
                    
                    for (var k = 0; k < racArray.length; k++) {
                        value += racArray[k] + ";";
                    }
                    value = value.slice(0, -1);
                } else if (headerLine[j] === "hotel_address") {
                    var hotel_address = objectArray[i]["hotel_address"];
                    value = hotel_address["city"] + " " + hotel_address["state"] + " " + hotel_address["country"];
                } else if (headerLine[j] === "providers") {
                    var providersArray = objectArray[i]["providers"];
                    
                    for (var k = 0; k < providersArray.length; k++) {
                        value += providersArray[k]["property_id"] + ";";
                    }
                    value = value.slice(0, -1);
                } else {
                    value = objectArray[i][headerLine[j]];
                }
                currentLine += value + ",";
            }

            currentLine = currentLine.slice(0, -1); //Remove the last delimiter
            result...