在现代web开发中，从外部api获取数据是常见的任务。当api返回的数据格式为csv时，我们需要特定的工具来解析它，并确保数据能够正确地映射到我们定义的变量中。本教程将以一个具体的案例为例，详细介绍如何使用javascript和papaparse库从csv api获取学校信息，解析数据，并解决变量填充不正确的问题。
1. 环境准备与HTML结构
首先，我们需要一个基本的HTML页面来承载用户输入和触发数据获取的按钮，并引入PapaParse库来处理CSV数据。
获取学校信息 // JavaScript 代码将放在这里
在上述HTML中，我们创建了一个文本输入框 (schoolName) 用于接收用户输入的学校名称，一个按钮 (Get Information) 来触发数据获取函数，并引入了PapaParse库。
2. 数据获取与API调用
getSchoolInformation 函数是整个流程的入口点。它负责从用户界面获取学校名称，并向指定的CSV API发起fetch请求。
// Function to retrieve school informationfunction getSchoolInformation() { let schoolName = document.getElementById("schoolName").value; console.log("尝试获取的学校名称:", schoolName); // 调试输出，检查输入值 // 使用 fetch API 从 CSV 文件获取数据 fetch('https://raw.githubusercontent.com/rfordatascience/tidytuesday/master/data/2020/2020-03-10/tuition_cost.csv') .then(response => { if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } return response.text(); // 将响应体解析为纯文本 }) .then(csvData => { // 成功获取 CSV 文本后，调用 findSchoolInformation 进行解析和筛选 let schoolInfo = findSchoolInformation(schoolName, csvData); displaySchoolInformation(schoolInfo); // 显示结果 }) .catch(error => { console.error('获取或解析数据时发生错误:', error); // 错误处理 });}
要点：
立即学习“Java免费学习笔记（深入）”；
fetch() API用于发起网络请求。它返回一个Promise，成功时.then()链式调用处理响应。response.text() 将响应体解析为文本，因为我们预期接收的是CSV字符串。console.log 是一个非常有用的调试工具，可以帮助我们检查变量的值和程序的执行流程。
3. CSV数据解析与信息查找
findSchoolInformation 函数是核心部分，它接收原始CSV数据和用户输入的学校名称，然后使用PapaParse解析CSV，并根据学校名称筛选出相关信息。
解决变量填充问题的关键在于：确保在访问CSV数据时使用的列名与CSV文件头中的实际列名完全一致。
// Function to find school information based on school namefunction findSchoolInformation(schoolName, csvData) { // 使用 PapaParse 解析 CSV 数据 let parsedData = Papa.parse(csvData, { header: true, // 将第一行作为列头，生成对象数组 skipEmptyLines: true // 跳过空行 }).data; let schoolInfo = []; // 用于存储找到的学校信息 // 调试输出：检查解析后的数据结构和列名 if (parsedData.length > 0) { console.log('解析后的第一行数据示例:', parsedData[0]); // 开发者应根据此输出确认正确的列名 } parsedData.forEach(function(row) { // ！！！ 关键修正点：使用 CSV 文件中实际的列名 ！！！ // 原始 CSV 文件的列名是 "name", "degree_length", "in_state_tuition" let collegeName = row.name; // 使用点符号访问，更简洁 let degreeLength = row.degree_length; let tuitionCost = row.in_state_tuition; // 筛选条件：学校名称存在且与用户输入匹配（不区分大小写） if (collegeName && collegeName.toLowerCase() === schoolName.toLowerCase()) { // 对获取到的数据进行类型转换 // 注意：这里将 collegeName 转换为小写是为了存储，如果需要原始大小写，则不应转换 // collegeName = collegeName.toLowerCase(); degreeLength = parseInt(degreeLength); tuitionCost = parseFloat(tuitionCost); // 确保转换后的数值有效 if (!isNaN(degreeLength) && !isNaN(tuitionCost)) { schoolInfo.push({ collegeName: collegeName, // 存储原始或转换后的名称，取决于需求 degreeLength: degreeLength, tuitionCost: tuitionCost }); } } }); console.log('筛选到的学校信息:', schoolInfo); // 调试输出，检查筛选结果 return schoolInfo;}
要点解析：
Papa.parse(csvData, { header: true, skipEmptyLines: true }): 这是PapaParse的核心用法。header: true 告诉PapaParse将CSV的第一行作为对象的键，这样每一行数据都会被解析成一个JavaScript对象，其属性名就是CSV的列头。列名匹配是关键：原始代码中使用了row[“INSTNM”]等列名，但通过检查CSV文件或其数据结构，可以发现实际的列名是name、degree_length、in_state_tuition。这是导致变量无法正确填充的根本原因。 务必根据实际API返回的CSV文件头来确定正确的列名。点符号访问：row.name 比 row[“name”] 更简洁，推荐使用。数据类型转换：CSV中的所有数据最初都是字符串。parseInt() 和 parseFloat() 用于将字符串转换为对应的数值类型，以便进行计算或比较。isNaN() 用于检查转换结果是否为有效的数字。调试：console.log(‘解析后的第一行数据示例:’, parsedData[0]); 在解析后立即打印第一行数据，可以帮助开发者直观地看到CSV的列名和数据结构，从而快速定位列名不匹配的问题。
4. 结果展示
displaySchoolInformation 函数负责将找到的学校信息输出到控制台。
// Function to display school information in the consolefunction displaySchoolInformation(schoolInfo) { if (schoolInfo.length === 0) { console.log("未找到匹配的学校信息。"); return; } for (let i = 0; i < schoolInfo.length; i++) { let collegeName = schoolInfo[i].collegeName; let degreeLength = schoolInfo[i].degreeLength; let tuitionCost = schoolInfo[i].tuitionCost; console.log("学校名称: " + collegeName); console.log("学制长度: " + degreeLength); console.log("学费 (州内): $" + tuitionCost.toFixed(2)); // 格式化为两位小数 console.log("------------------------------"); }}
要点：
立即学习“Java免费学习笔记（深入）”；
在循环之前添加对 schoolInfo.length 的检查，可以避免在没有数据时执行循环，并给出友好的提示。toFixed(2) 用于将浮点数格式化为指定小数位数的字符串。
5. 完整代码示例
将上述所有JavaScript代码整合到HTML文件的标签中，即可运行。
获取学校信息 // Function to retrieve school information function getSchoolInformation() { let schoolName = document.getElementById("schoolName").value; console.log("尝试获取的学校名称:", schoolName); fetch('https://raw.githubusercontent.com/rfordatascience/tidytuesday/master/data/2020/2020-03-10/tuition_cost.csv') .then(response => { if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } return response.text(); }) .then(csvData => { let schoolInfo = findSchoolInformation(schoolName, csvData); displaySchoolInformation(schoolInfo); }) .catch(error => { console.error('获取或解析数据时发生错误:', error); }); } // Function to find school information based on school name function findSchoolInformation(schoolName, csvData) { let parsedData = Papa.parse(csvData, { header: true, skipEmptyLines: true }).data; let schoolInfo = []; if (parsedData.length > 0) { console.log('解析后的第一行数据示例:', parsedData[0]); } parsedData.forEach(function(row) { let collegeName = row.name; let degreeLength = row.degree_length; let tuitionCost = row.in_state_tuition; if (collegeName && collegeName.toLowerCase() === schoolName.toLowerCase()) { degreeLength = parseInt(degreeLength); tuitionCost = parseFloat(tuitionCost); if (!isNaN(degreeLength) && !isNaN(tuitionCost)) { schoolInfo.push({ collegeName: collegeName, degreeLength: degreeLength, tuitionCost: tuitionCost }); } } }); console.log('筛选到的学校信息:', schoolInfo); return schoolInfo; } // Function to display school information in the console function displaySchoolInformation(schoolInfo) { if (schoolInfo.length === 0) { console.log("未找到匹配的学校信息。"); return; } for (let i = 0; i < schoolInfo.length; i++) { let collegeName = schoolInfo[i].collegeName; let degreeLength = schoolInfo[i].degreeLength; let tuitionCost = schoolInfo[i].tuitionCost; console.log("学校名称: " + collegeName); console.log("学制长度: " + degreeLength); console.log("学费 (州内): $" + tuitionCost.toFixed(2)); console.log("------------------------------"); } }
注意事项与总结
验证CSV列名：这是解决此类问题的首要步骤。在处理任何CSV数据时，务必先检查其标题行，确保代码中使用的字段名与实际数据源的列名完全匹配。可以通过在findSchoolInformation函数中添加console.log(‘解析后的第一行数据示例:’, parsedData[0]);来快速查看解析后的数据结构。错误处理：在fetch请求中加入.catch()块是良好的实践，可以捕获网络请求或数据处理过程中可能发生的错误，提高程序的健壮性。数据类型转换：从CSV解析的数据通常都是字符串类型。根据实际需求，需要手动将其转换为数字（parseInt, parseFloat）、布尔值或其他类型。同时，使用isNaN()等函数进行有效性检查是必不可少的。调试工具：浏览器开发者工具（F12）中的Console和Network标签页是调试API请求和数据处理逻辑的强大工具。console.log()可以帮助你追踪变量值和程序流程，Network标签页则可以查看API请求的详细信息和原始响应。代码可读性：使用有意义的变量名、适当的注释和清晰的函数职责划分，可以大大提高代码的可读性和可维护性。例如，使用let代替var是现代JavaScript的推荐做法。
通过遵循本教程的步骤和建议，您将能够更有效地从CSV API获取、解析和处理数据，避免常见的变量填充错误，并构建出更加稳定和可靠的Web应用程序。
以上就是JavaScript教程：正确从CSV API获取、解析并填充变量的实践指南的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1531683.html
微信扫一扫 
支付宝扫一扫 
