如何用JS中的对象元素填充CSV文件

Question

I've got an object and I'd like to put the elements of this object into a CSV file, however when I'm trying to get the key of the object it gives back a type error: Uncaught TypeError: Cannot convert undefined or null to object.

When I console log the object it actually shows all the elements but for some reason I can't get the key and values back.

This is how I console logged the object: console.log(JSON.stringify(records));

And here is what I get back: {"id":"5e7b389911c2125dfaf2b5f2","title":"Example Application Number 1","status":"Ready For Submission","principalInvestigator":"Mr. Harry Styles","coInvestigators":["Niall Horan, Liam Payne, Zayn Malik, Louis Tomilson"],"partners":null,"funder":"Innovate UK","researchGroup":"AHIVES","scheme":"GCRF","requestedAmount":null,"estimatedAmount":1234,"submissionDate":"2020-03-23T00:00:00.000+01:00","startDate":"2020-03-29T00:00:00.000+01:00","estimatedDuration":null,"endDate":null,"facility":null,"comments":null,"dateCreated":"2020-03-25T11:55:21.902+01:00","lastUpdated":"2020-03-25T11:55:21.902+01:00","dateDeleted":null}

Here is the full js function:

window.downloadCsv = function(records) {

    console.log(JSON.stringify(records));

    // Use first element to choose the keys and the order
    let keys = Object.keys(records[0]);

    // Build header
    let result = keys.join("\t") + "\n";

    // Add the rows
    records.forEach(function(obj){
        result += keys.map(k => obj[k]).join("\t") + "\n";
    });

    return result;

Here is how I parse the object to js from thymeleaf:

 <button title="Downloads the data from the query into a CSV"
                        class="inline-flex items-center bg-red-600 text-white font-bold px-4 py-1
                        rounded shadow hover:bg-red-500"
                        type="submit"
                        th:onclick="downloadCsv(/*[[${record}]]*/)">

                    <span>Download</span>
                    <svg class="fill-current w-4 h-4 ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                        <path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z" /></svg>
                </button>

Answer 1

In your case, you're expecting records to be an array, but it's an object (perhaps one value in the array). Additionally, fields such as coInvestistigators are an array, not string, which is a separate case you'll need to handle.

You're accessing records[0] , which means you're trying to access { 0: <some_value> } in your JSON object. In your case, records isn't an array and it doesn't contain the key 0 so records[0] is undefined .

Object.keys takes in a Javascript object and returns all the keys in an array.

This means that Object.keys(records[0]) would cause an error since the value of records[0] is undefined.

Object.keys(records) would return ["id", "title", "status", ...]