如何将XML中的质数徽章数据转换为CSV文件？

我需要从XML文件中提取数据，将其中的质数徽章ID转换为CSV文件。目前已经能找出所有质数徽章ID并打印到控制台，但不知道怎么把这些数据导出成CSV文件，求帮忙。

我的HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Badges Task</title>
</head>
<body>

    <h1>Task</h1>
    <button id="action">Download csv</button>


    <script src="app.js"></script>
</body>
</html>

我的JavaScript代码 #

const getData = function() {

    fetch("task.xml").then(response => {
        return response.text()
    }).then(xmlString => {
        const xmlDocument = new DOMParser().parseFromString(xmlString, 'text/xml');
    
        const badges = xmlDocument.querySelectorAll('badge');

        console.log(xmlDocument)
    
        for(const badge of badges) {
            const id = badge.getAttribute('number');
            const date = badge.getAttribute('issued').slice(0,11);

            console.log(date)
    
            let isPrime = true;
    
            if(id <= 1) {
                console.log("1 is neither prime nor composite number")
            } else if(id > 1) {
                for(let i = 2; i < id; i++) {
                    if(id % i == 0) {
                        isPrime = false;
                        break;
                    }
                }
            }
    
            if(isPrime) {
                console.log(`${id} is a prime number`)
            } 

         
            
        }

   
    });

  
}

const btn = document.getElementById('action');
btn.addEventListener('click', getData);

XML数据片段 #

<?xml version="1.0" encoding="utf-8"?>
<accessControl>
    <badges>
        <badge number="1" passcode="535335" issued="02/03/2016 00:00:00"/>
        <badge number="2" passcode="988798" issued="23/02/1997 00:00:00"/>
        <badge number="3" passcode="823603" issued="22/08/2003 00:00:00"/>
        <badge number="4" passcode="767876" issued="12/11/1999 00:00:00"/>
        <badge number="5" passcode="905922" issued="19/11/2009 00:00:00"/>
        <badge number="6" passcode="773912" issued="11/08/2015 00:00:00"/>
        <badge number="7" passcode="689032" issued="24/01/2003 00:00:00"/>
        <badge number="8" passcode="158703" issued="03/01/2010 00:00:00"/>
        <badge number="9" passcode="877498" issued="10/11/2011 00:00:00"/>
        <badge number="10" passcode="960573" issued="19/06/2000 00:00:00"/>
        <badge number="11" passcode="936346" issued="16/10/2018 00:00:00"/>
        <badge number="12" passcode="472985" issued="19/09/2008 00:00:00"/>
        <badge number="13" passcode="113143" issued="28/07/2010 00:00:00"/>
        <badge number="14" passcode="512691" issued="20/11/2012 00:00:00"/>
        <badge number="15" passcode="112630" issued="02/03/2022 00:00:00"/>
        <badge number="16" passcode="656349" issued="19/12/2021 00:00:00"/>
        <badge number="17" passcode="919450" issued="03/11/2002 00:00:00"/>
        <badge number="18" passcode="359069" issued="28/12/2001 00:00:00"/>
      </badges>
     <failedaccesses>
        <accessattempt badge="2347" accessedDate="08/10/2022 00:00:00">
            <passcodeentered value="560775"/>
        </accessattempt>
        <accessattempt badge="2617" accessedDate="24/05/2023 00:00:00">
            <passcodeentered value="993700"/>
        </accessattempt>
        <accessattempt badge="1111" accessedDate="03/07/2023 00:00:00">
            <passcodeentered value="846599"/>
        </accessattempt>
        <accessattempt badge="300" accessedDate="13/09/2022 00:00:00">
            <passcodeentered value="308523"/>
        </accessattempt>
        <accessattempt badge="1509" accessedDate="09/09/2022 00:00:00">
            <passcodeentered value="149089"/>
        </accessattempt>
        <accessattempt badge="218" accessedDate="05/12/2022 00:00:00">
            <passcodeentered value="140284"/>
        </accessattempt>
        <accessattempt badge="1513" accessedDate="04/10/2022 00:00:00">
            <passcodeentered value="791493"/>
        </accessattempt>
        <accessattempt badge="1718" accessedDate="27/04/2023 00:00:00">
            <passcodeentered value="258773"/>
        </accessattempt>
        <accessattempt badge="2214" accessedDate="16/04/2023 00:00:00">
            <passcodeentered value="845822"/>
        </accessattempt>
    </failedaccesses>
</accessControl>

解决方案 #

你需要修改JavaScript代码，完成以下三步：收集符合条件的数据、生成CSV格式内容、触发浏览器下载。

修改后的完整JavaScript代码 #

const getData = function() {
    fetch("task.xml").then(response => {
        return response.text()
    }).then(xmlString => {
        const xmlDocument = new DOMParser().parseFromString(xmlString, 'text/xml');
        const badges = xmlDocument.querySelectorAll('badge');
        
        // 1. 收集质数徽章数据
        const primeBadges = [];
        // 添加CSV表头
        primeBadges.push(["Badge ID", "Issued Date"]);

        for(const badge of badges) {
            const id = badge.getAttribute('number');
            const date = badge.getAttribute('issued').slice(0, 11);
            let isPrime = true;

            if(id <= 1) {
                console.log("1 is neither prime nor composite number");
            } else if(id > 1) {
                for(let i = 2; i <= Math.sqrt(id); i++) { // 优化质数判断，减少循环次数
                    if(id % i === 0) {
                        isPrime = false;
                        break;
                    }
                }
            }

            if(isPrime && id > 1) { // 排除ID为1的情况
                console.log(`${id} is a prime number`);
                primeBadges.push([id, date]);
            }
        }

        // 2. 生成CSV字符串
        const csvContent = primeBadges.map(row => row.join(',')).join('\n');
        
        // 3. 创建下载链接并触发下载
        const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
        const url = URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', 'prime-badges.csv');
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        URL.revokeObjectURL(url);
    });
}

const btn = document.getElementById('action');
btn.addEventListener('click', getData);

关键说明 #

• 数据收集：用数组primeBadges存储表头和符合条件的徽章数据，确保CSV结构清晰。
• 质数判断优化：将循环上限改为Math.sqrt(id)，减少不必要的计算，提升效率。
• CSV生成：用map将数组每行转成逗号分隔的字符串，再用join('\n')拼接成完整CSV内容。
• 下载触发：通过Blob创建CSV文件对象，生成临时URL，用隐藏的<a>标签触发浏览器下载，完成后清理资源。

内容的提问来源于stack exchange，提问作者Rick Sanchez