将用户输入与csv文件进行比较，返回第二列值javascript

Question

我遇到了以下主题，它只有1行而不是2列。如何在这里返回第二个值(见下面的主题) 将我的变量与csv文件进行比较，并在javascript中获得匹配的值。

这是我的CSV文件值：

csv栏目截图

​

​

这就是我目前所做的--它只是检查文件中来自用户的序列号，并用文本“有效”标记div。此有效值应该具有第二个列值。

<script>
    const checkm = document.getElementById('check');
    checkm.addEventListener('click', serialChecker)
    async function serialChecker(){
        const url = 'http://localhost/validator/serials.csv';
        const response = await fetch(url);
        // wait for the request to be completed
        const serialdata = await response.text();
        console.log(serialdata);
        const inputserialnumber = document.getElementById('serialnumber').value.toString();
        console.log(inputserialnumber);
        // serialdata.match(/inputserialnumber/)
        // serialdata.includes(inputserialnumber)
        if(serialdata.includes(inputserialnumber) == true && inputserialnumber.length == 7 ){
            document.getElementById('validity').innerHTML = "Valid";
            startConfetti(); // from confetti.js
        }else {
            document.getElementById('validity').innerHTML = "Invalid";
            stopConfetti(); // from confetti.js
        }


        //document.getElementById('test').innerHTML = "Valid";
    }


</script>

这是我的控制台输出它显示了完整的csv(当前)&用户输入

将csv数据更改为不同的数组，如果这有帮助的话：数组

提前感谢大家抽出时间回答我的愚蠢问题！

额外澄清：

我想做的是一个验证网站检查器。因此，用户通过一个简单的输入字段输入他们的序列。&我在csv文件中有一个额外的列，该列的名称与序列相匹配。因此，如果用户在CSV文件中输入1234567，那么我当前的代码将返回value = true。因为它存在于CSV文件中。

但我希望它返回1234567旁边的值(在第二列中是这样)，在本例中是"test1“。因此，我可以使用这个值，而不是只是一个标准的“有效”文本被推回网站。

Answer 1

谢谢大家的反馈。我未能完全按照你的意图使用你的建议。但我成功地结合了这个想法，并创造了一个新的作品，为我发挥了作用！

const checkm = document.getElementById('check');
  checkm.addEventListener('click', serialChecker)
  async function serialChecker(){
              const url = 'http://localhost/validator2/naamloos.csv';
              const response = await fetch(url);
              // wait for the request to be completed
              const serialdata = await response.text();
              const table = serialdata.split('\r\n');  

              const serialsArray = [];
              const nameArray = [];

              table.forEach(row =>{
              const column = row.split(',');
              const sArray = column[0]; 
              const nArray = column[1]; 
              
              serialsArray.push(sArray);
              nameArray.push(nArray);
              
            })

            var array1 = serialsArray,
              array2 = nameArray,
              result = [],
              i, l = Math.min(array1.length, array2.length);
              
              for (i = 0; i < l; i++) {
                  result.push(array1[i], array2[i]);
              }
              result.push(...array1.slice(l), ...array2.slice(l));

              function testfunction(array, variable){
                  var varindex = array.indexOf(variable)
                  return array[varindex+1] 
              }
              //calling the function + userinput for serial

              const inputserialnumber = document.getElementById('serialnumber').value.toString();
              console.log(testfunction(result, inputserialnumber))

              if(serialsArray.includes(inputserialnumber) == true && inputserialnumber.length == 7 ){
                document.getElementById('validity').innerHTML = "Valid " + testfunction(result, inputserialnumber);

                startConfetti();
              }else {
                  document.getElementById('validity').innerHTML = "Invalid";

                  stopConfetti();
              }
  }

希望这可以帮助用户在他们的网站上有一个输入字段，后端有一个.csv文件(可能有多个选项供用户使用带有异步函数的下拉框进行选择)。

这将检查文件&将返回与序列匹配的csv值(基于序列号和序列号的长度(7个字符))。

Answer 2

可以通过两个数组的索引来匹配它们的值。在您的例子中，我认为使用Array.map()返回基于循环槽的转换数组是最简单的。例如，如果有两个名为namesArray和valuesArray的数组，请执行以下操作：

const validationResults = valuesArray.map((value, index) => {
  return {
    valid: checkValidity(value), // or whatever your validation function is called
    name: namesArray[index] // match the index of the namesArray with the index of this one (valuesArray)
  };
  // or `return namesArray[index] + ', valid: ' + checkValidity(value)`
});

这个循环通过valuesArray，然后validationResults将是您在上面的映射函数中的每个项返回的数组。

一个重要的注意事项是，这假设数组都是按相同顺序排列的。例如，如果您想对它们进行排序，请在之后执行。

Answer 3

查找并在Map中注册这些值似乎是最好的答案。

    // ...
    const serialdata = await response.text();
    const seriallookup = new Map();
    // Set all Serial values to Names
    for (let s in serialdata.split("\n")) {
        let data = s.split(',');
        seriallookup.set(data[0], data[1]);
    }

使用此方法，可以使用.has()来检查序列是否存在

    if (inputserialnumber.length == 7 && seriallookup.has(inputserialnumber)) {

设置为元素文本。

    document.getElementById('validity').innerHTML = serialdata.get(inputserialnumber);

如果.csv文件很可能不会在多个请求之间更改(或者只发送一个请求)，则应该初始化并请求函数之外的数据。