[Vuejs]-How do I resolve a request failed issue while accessing a github csv file using url?

by

0👍

The link you have used will return the data in CSV format. You need to convert the CSV data into an array of objects and then bind the data to the DropdownList component. For more information, please refer to the code snippet and sample below.

<template>
  <div id="app">
    <div>
      <h1>Welcome to Desche App.</h1>
    </div>
    <div>
      <div id="container" style="margin: 5rem auto 0; width: 20rem;">
        <br>
        <ejs-dropdownlist id="dropdownlist" :dataSource="remoteData" :fields="dataFields" :query="query"
          placeholder="Select a company name" :created="onCreated"></ejs-dropdownlist>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { DropDownListPlugin } from '@syncfusion/ej2-vue-dropdowns';
import { Query } from '@syncfusion/ej2-data';
Vue.use(DropDownListPlugin);

export default Vue.extend({
  data: function () {
    return {
      query: new Query().take(100),
      remoteData: [],
      dataFields: { text: 'company_name', value: 'exchange_symbol' },
    };
  },
  methods: {
    onCreated: function () {
      const xhr = new XMLHttpRequest();
      xhr.open('GET', 'https://raw.githubusercontent.com/Azmart/IxFintech/main/identifier_mapper.csv');
      xhr.onload = () => {
        if (xhr.status === 200) {
          const csvData = xhr.responseText;
          // Split CSV data into an array of rows
          const rows = csvData.split('\n');
          // Remove the header row
          rows.shift();
          // Split each row into an array of columns
          const data = rows.map((row) => {
            const columns = row.split(',');
            return {
              exchange_symbol: columns[0],
              company_name: columns[1],
              ticker: columns[2],
              market_cap: parseFloat(columns[3]),
              sector: columns[4],
              industry: columns[5],
            };
          });
          console.log(data);
          this.remoteData = data;
        } else {
          console.error(`Failed to fetch data: ${xhr.statusText}`);
        }
      };
      xhr.onerror = () => {
        console.error('Failed to fetch data');
      };
      xhr.send();
    }
  }
});
</script>

The onCreated function is called when the Syncfusion Vue DropdownList component is created. This function loads data from a remote server by sending a GET request to a CSV file hosted on GitHub.

When the CSV data is successfully loaded, the function performs the following operations:

  • The CSV data is split into an array of rows, with each row
    represented as a string.
  • The header row is removed from the array of rows.
  • Each row is split into an array of columns, with each column
    represented as a string.
  • Each row is transformed into a JavaScript object, with each column
    value mapped to a specific property name.
  • The resulting array of JavaScript objects is assigned to the
    remoteData property of the Vue component, which serves as the data
    source for the dropdown list.

If the data loading fails, an error message is logged to the console.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Vue_Dropdown_CSV_DataBind-688425747

Leave a comment