jquery 如何将CSV文件中的一行文本显示到网站中？

我有下面的代码，试图创建一个基本的真心话大冒险应用程序，作为一个有趣/愚蠢的方式来学习制作网站。
我有一个基本的版本，工作，但目前的javascript设置在网页上的大胆。
我希望有它从一个CSV文件，我可以编辑添加100的在那里更快拉。
有什么建议吗？
我希望能够有不同的一套问题的基础上性别等，进入能够拉从不同的'困难'
目前，它们被编码为：

var maleDares = [
            "Sing a song from your favorite musical.",
            "Do an impersonation of your favorite celebrity.",
            "Dance like nobody is watching.",
            "Wear a silly costume and walk around the block."
        ];
        var femaleDares = [
            "Sing a song from your favorite musical.",
            "Do an impersonation of your favorite celebrity.",
            "Dance like nobody is watching.",
            "Wear a silly costume and walk around the block."
        ];

任何正确方向的帮助/指点都将不胜感激。

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
      .tab {
        display: inline-block;
        padding: 10px;
        margin: 10px;
        border: 1px solid #000;
        cursor: pointer;
      }
      .div {
        display: none;
      }
        body {
            font-family: sans-serif;
        }
        #playerList {
            width: 500px;
            margin: auto;
            padding: 25px;
            border: 1px solid #ccc;
        }
        #playerList h3 {
            font-weight: bold;
            font-size: 1.5em;
        }
        #playerList ul {
            padding: 0;
            margin: 0;
        }
        #playerList li {
            list-style: none;
            margin-bottom: 10px;
        }
        #playerList label {
            font-weight: bold;
            margin-right: 10px;
        }
        #dare {
         
           
        }
        #dare h3 {
            font-weight: bold;
            font-size: 1.5em;
        }
    </style>
  </head>
  <body>
    <div class="tab" id="tab1">Add Players</div>
    <div class="tab" id="tab2">Player List</div>
    <div class="tab" id="tab3">Play Game</div>
    <div class="div" id="div1">    <h3>Player List</h3>
        <ul>
            <li>
                <label>Name:</label>
                <input type="text" id="playerName" />
            </li>
            <li>
                <label>Gender:</label>
                <select id="playerGender">
                    <option value="male">Male</option>
                    <option value="female">Female</option>
                </select>
            </li>
            <li>
                <button id="addPlayer">Add Player</button>
            </li>
        </ul>
    </div>
    <div class="div" id="div2">
    <div id="playerListDisplay"></div>
    
    
    </div>
    <div class="div" id="div3"><div id="dare">
        <h3>Dare</h3>
        <div id="dareDisplay"></div>
        <button id="generateDare">Generate Dare</button>
    </div>
    </div>
    <script>
      $(document).ready(function(){
        $('#tab1').click(function(){
          $('#div1').show();
          $('#div2').hide();
          $('#div3').hide();
        });
        $('#tab2').click(function(){
          $('#div2').show();
          $('#div1').hide();
          $('#div3').hide();
        });
        $('#tab3').click(function(){
          $('#div3').show();
          $('#div1').hide();
          $('#div2').hide();
        });
      });
    </script>
    
     <script>
 var maleDares = [
            "Sing a song from your favorite musical.",
            "Do an impersonation of your favorite celebrity.",
            "Dance like nobody is watching.",
            "Wear a silly costume and walk around the block."
        ];
        var femaleDares = [
            "Sing a song from your favorite musical.",
            "Do an impersonation of your favorite celebrity.",
            "Dance like nobody is watching.",
            "Wear a silly costume and walk around the block."
        ];
        var players = [];

        document.getElementById("addPlayer").addEventListener("click", function() {
            var name = document.getElementById("playerName").value;
            var gender = document.getElementById("playerGender").value;

            if (name === "") {
                alert("Please enter a name!");
            } else {
                players.push({
                    name: name,
                    gender: gender
                });
                document.getElementById("playerName").value = "";
                updatePlayerListDisplay();
            }
        });

        document.getElementById("generateDare").addEventListener("click", function() {
            if (players.length === 0) {
                alert("Please add some players first!");
            } else {
                var randomPlayer = Math.floor(Math.random() * players.length);
                var player = players[randomPlayer];
                var dare;
                if (player.gender === "male") {
                    dare = maleDares[Math.floor(Math.random() * maleDares.length)];
                } else {
                    dare = femaleDares[Math.floor(Math.random() * femaleDares.length)];
                }
                document.getElementById("dareDisplay").innerHTML = player.name + ": " + dare;
            }
        });

        function updatePlayerListDisplay() {
            var listHTML = "<ul>";
            for (var i = 0; i < players.length; i++) {
                listHTML += "<li>" + players[i].name + " (" + players[i].gender + ")</li>";
            }
            listHTML += "</ul>";
            document.getElementById("playerListDisplay").innerHTML = listHTML;
        }
    </script>
  </body>
</html>

尝试了以下方法，但没有效果

let maleDares = [];

const fs = require('fs');

fs.readFile('dares.csv', 'utf8', (err, data) => {
    if (err) throw err;
    let lines = data.split('\n');
    let dares = lines.map(line => {
        let columns = line.split(',');

我的回答只是为了启发，你怎么能解决它：任务的纯文本应该满足您的需要。假设您的文件“f.txt”和“m.txt”位于data文件夹中：你可以在回调函数中用.text()将fetch传递给Promise.all来获取内容。然后，返回的文件内容数组是split by new lines in map函数，filter用于删除空字符串（空换行符）。你可以使用反结构语法来获取单个数组。

Promise.all([
  fetch('data/f.txt').then(r => r.text()),
  fetch('data/m.txt').then(r => r.text())
]).then((arrOfTxtFM) => {

const arrOfDareItemsFM = arrOfTxtFM.map((item)=> item.split("\n").filter(item => item));
const [fDaresArr,mDaresArr]= arrOfDareItemsFM;

console.log(fDaresArr)
console.log(mDaresArr)

});

jquery 如何将CSV文件中的一行文本显示到网站中？

1条答案

相关问题

热门标签

最新问答