如何解决使用 url 访问 github csv 文件时请求失败的问题？

Question

我正在尝试创建一个 Vue.js 网络应用程序。它有一个下拉菜单，该菜单使用 github 中的 csv 文件并访问其中一列作为下拉菜单的项目。我正在使用 syncfusion 创建下拉列表。

.

谁能帮我解决这个“请求失败”的问题。 csv 文件包含世界上几乎所有上市公司的数据。或者还有另一种方法可以从 csv 文件创建 url 吗？或者甚至能够访问本地 csv 文件数据会很棒。

<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"></ejs-dropdownlist>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { DropDownListPlugin } from '@syncfusion/ej2-vue-dropdowns';
import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';
// import QueryString from 'qs';
Vue.use(DropDownListPlugin);
var remoteDataSource = new DataManager({
  url: 'https://raw.githubusercontent.com/Azmart/IxFintech/main/identifier_mapper.csv',
  adaptor: new WebApiAdaptor,
  crossDomain: true
});
export default Vue.extend({
  data: function () {
    return {
      // query: new QueryString().from('identifier_mapper').select(['company_name', 'exchange_symbol']).take(6),
      remoteData: remoteDataSource,
      dataFields: { text: 'company_name', value: 'exchange_symbol' },
    };
  }
});
</script>

<style>
/* @import '../node_modules/@syncfusion/ej2-base/styles/material.css'; */

@import url('https://cdn.syncfusion.com/ej2/material.css');

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

这是我的代码。运行这个没有错误。但是网络应用程序显示“请求失败”。尝试从 url 加载数据时。

Answer 1

您使用的链接将以 CSV 格式返回数据。您需要将 CSV 数据转换为对象数组，然后将数据绑定到 DropdownList 组件。有关更多信息，请参阅下面的代码片段和示例。

<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>

Syncfusion Vue DropdownList组件创建时调用onCreated函数。此函数通过向托管在 GitHub 上的 CSV 文件发送 GET 请求来从远程服务器加载数据。

CSV数据加载成功后，函数执行以下操作：

• CSV 数据被拆分成行数组，每一行 表示为字符串。
• 标题行从行数组中删除。
• 每一行被拆分成一个列数组，每一列
  表示为字符串。
• 每一行都转换成一个 JavaScript 对象，每一列
  映射到特定属性名称的值。
• 生成的 JavaScript 对象数组被分配给
  Vue 组件的 remoteData 属性，作为数据
  下拉列表的来源。

如果数据加载失败，错误消息将记录到控制台。

示例：https://www.syncfusion.com/downloads/support/directtrac/general/ze/Vue_Dropdown_CSV_DataBind-688425747