javascript - 如何将 csv 数据导入 javascript 以创建搜索器？

Question

我正在尝试建立一个搜索器。它必须使用代码（项目具有唯一代码）遍历 csv 数据，并返回与输入搜索器中输入的代码匹配的项目（代码、名称、金额...）。我正在使用 Visual Studio 代码作为 IDLE。我正在使用实时服务器扩展来检查进展情况，并且一切正常。但后来我尝试使用浏览器并出现此错误：“Fetch API 无法加载文件：///C:/Users/nilan/.vscode/pieper-landtechnik/assets/BESTAND_08042021.csv。URL 方案必须是“http”或“https”用于 CORS 请求。” .

我不擅长 fetch、API 和所有这些东西，所以我想问题就在那里。如果有人可以帮助我，我将不胜感激。我想在我的网站中使用该搜索器，但我不知道搜索器如何浏览 csv 数据。我的意思是，虽然我的电脑没有打开，但搜索者是否完美地浏览了文件？或者我应该将文件上传到一台服务器，并使用 HTTP API？如果我每天晚上都想更新 csv 文件，因为有些商品已售出，我该如何确保搜索者迭代更新的文件？这就是我导入文件的方式：

async function getData () {
    const response = await fetch("assets/BESTAND_08042021.csv");
    const csvData = await response.text();

    data = csvData.split("\n"). slice(1);  
}
```

As I told you, it works for a live server but not for a browser.
The file is: BESTAND_08042021.csv
I save the data in an array, and then I iterate it and I look for a match using the code entered in the input. Then it is displayed as a row, but this is not the important part. 

```
data.forEach(code => { 
            const row = code.split(";");
            if (row[0] === input.value) {
                divTableResultItems.classList.add("divInfo");

                const table = document.createElement("table");
                table.classList.add("u-full-width", "prova")
                table.innerHTML = `
                    <tbody>
                        <tr>
                            <td class= "column20i" id = "artnr">${row[0]}</td>
                            <td class= "column40i" id = "bez">${row[1]}</td>
                            <td class= "column20i" id = "lagerort">${row[3]}</td>
                            <td class= "column20i" id = "best">${parseInt(row[4])}</td>
                        </tr>
                    </tbody>
                `;
                divTableResultItems.appendChild(table);
                const inputNumber = document.createElement("input");
                inputNumber.id = "amount-input"
                inputNumber.type = "number";
                inputNumber.max = parseInt(row[4]);
                inputNumber.min = 0;
                inputNumber.value = 1;
                inputNumber.classList.add("amount");
                divAmountAndBtn.appendChild(inputNumber)

                const btnAddItem = document.createElement("button");
                btnAddItem.classList.add("btn", 'btnAddItem');
                btnAddItem.textContent = "Add";
                btnAddItem.addEventListener("click", addItem);
                divAmountAndBtn.appendChild(btnAddItem)
            }
        })
```

So, someone that could help me with this? And give me some tips or somewhere where I could get some API/Fetch/... knowledge :)

标签： javascriptapicsvsearchfetch