Load vue-json-csv library

Dashboard
1

Can the vue-json-csv library be loaded into dashboard 2.0? If so, what is the correct way to load it.

Thank you

2

Can i ask why?

A search on that lib seems to suggest all it does is convert JSON data to CSV - something you can do already using the CSV node.

3

@Steve-Mcl I can already us the code below to convert the data in a function

let jsonData = [];
jsonData = msg.payload;

function convertJsonToCsv(jsonData) {
  if (!Array.isArray(jsonData) || jsonData.length === 0) {
    return ""; 
  }

  const headers = Object.keys(jsonData[0]);

  const csvHeader = headers.join(',');

  // Create the data rows
  const csvRows = jsonData.map(obj => {
    return headers.map(header => {
      let value = obj[header];
      if (value === null || value === undefined) {
        value = '';
      } else if (typeof value === 'string' && value.includes(',')) {
        value = `"${value}"`; 
        value = value.replace(/(\r\n|\n|\r)/g, "");
      }
      return value;
    }).join(',');
  });

  return [csvHeader, ...csvRows].join('\n');
}

const csvOutput = convertJsonToCsv(jsonData);
console.log(csvOutput);
return {payload: csvOutput}

The examples I found online using the library looked to me like it would handle user notification as well. Maybe I am wrong.

4

I don't understand why you are not using the CSV node and I don't get what notifications have to do with JSON to CSV.

If you can state what you are trying to achieve we can give you ideas.

As for importing the Vue lib, it is possible but it requires either using an online CDN or serving the JavaScript via endpoints and importing it in a template node. But tbh, it's entirely pointless. The JSON data is likely server side so use the CSV node (or your function).

As for notifications there is the notification node. Or you could hook up mobile notifications using telegram or...

5

@Steve-Mcl I have a v-data-table where the :items=msg.payload from a mysql db. This data comes over as an array of json objects. Here is a snapshot of a couple of items…

image
image413×477 23.1 KB

As you can see I have the download icon in the nav bar via . I want to be able to @click and then down load the data to a csv file .

 <v-tooltip location="bottom" text="Download CSV"> 
    <template v-slot:activator="{ props }">
      <v-icon class="ml-4" size="small" v-bind="props" class="mr-4" @click="exportToCsv" color='cyan-lighten-4'>
        mdi-download
      </v-icon>
    </template>
  </v-tooltip>

Here is the methods I was using…

ConvertToCsv(item) {
      const header = Object.keys(data[0]).join(',');
      const rows = data.map(item => Object.values(item).join(','));
      return `${header}\n${rows.join('\n')}`;
    },
    exportToCsv() {
      const csvContent = this.convertToCsv(this.item); // Use your v-data-table items
      const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
      const link = document.createElement('a');
      const url = URL.createObjectURL(blob);
      link.setAttribute('href', url);
      link.setAttribute('download', 'table_data.csv');
      link.style.visibility = 'hidden';
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    },

When I click on it nothing happens. I tested both functions by adding an alert on the 1st line and it does show an alert they are being called. When I inspect the page I see the error…

errorCaptured TypeError: Cannot read properties of undefined (reading '0').

Since I could not make this work I was trying alternate options (json-to-csv) > write node.

6

I figured out how to do it the vue using parent / child components…

Regards