使用jQuery-csv解析csv數據

Question

我正在通過csv文件進行解析。 我的目標是查找以“ A”，“ B”開頭的名稱並計算出現次數。 以下代碼的問題是它永遠不會完成while循環。

HTML：

<form>
  <input type="button" id="csv1ButtonRun" value="Run" style="background-color: lightgray"/>
</form>

腳本包括：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="app.js"></script>
<script src="jquery.csv-0.71.js"></script>

JavaScript的：

var babyCsv = " Jacob, 1, boy, 2010, Isabella, 1, girl, 2010, Ethan, 2, boy, 2010, Sophia, 2, girl, 2010, Michael, 3, boy, 2010, Emma, 3, girl, 2010, Jayden, 4, boy, 2010, Olivia, 4, girl, 2010, William, 5, boy, 2010, Ava, 5, girl, 2010, Alexander, 6, boy, 2010, Emily, 6, girl, 2010, Noah, 7, boy, 2010, Abigail, 7, girl, 2010, Daniel, 8, boy, 2010, Madison, 8, girl, 2010, Aiden, 9, boy, 2010, Chloe, 9, girl, 2010, Anthony, 10, boy, 2010, Mia, 10, girl, 2010, Joshua, 11, boy, 2010, Addison, 11, girl, 2010, Mason, 12, boy, 2010, Elizabeth, 12, girl, 2010, Christopher, 13, boy, 2010, Ella, 13, girl, 2010, Andrew, 14, boy, 2010, Natalie, 14, girl, 2010, David, 15, boy, 2010, Samantha, 15, girl, 2010, Matthew, 16, boy, 2010";

var data = $.csv.toArray(babyCsv);

$("#csv1ButtonRun").click(function() {

    var arrayLength = data.length / 4;
    var count1 = 0;
    var count2 = 0;
    var i = 0;

    while (i <= arrayLength) {

        var name = data[i * 4];
        if (name.substring(0, 2) == " A") {
            count1 = count1 + 1;
        }
        else if (name.substring(0, 2) == " B") {
            count2 = count2 + 1;
        };
        i++;
    };

    document.write(count1 + count2);
});

Answer 1

的jsfiddle

您的CSV數據格式不正確，因此JS對象沒有任何有意義的結構。 您應使用換行符分隔文件中的各個記錄（行）。 使用逗號分隔單個行中的值。 喜歡：

var babyCsv = " Bryan, 1, boy, 2010 \n Isabella, 1, girl, 2010 \n Bobby, 2, boy, 2010 \n Sophia, 2, girl, 2010 \n Nina, 5, girl, 2010 \n Alexander, 6, boy, 2010 \n Aiden, 9, boy, 2010 \n Anthony, 10, boy, 2010";

然后，使用適當的$.csv.toArrays方法解析數據並返回記錄的二維數組。 然后，數組中的每個條目都針對一個孩子，格式為：

[
    [name1, age1, gender1, year1],
    [name2, age2, gender2, year2],
    ...
];

最后，在循環中，您必須在每次迭代中更新name變量的值，以便您確實對每個子代進行檢查。 目前，您不更改兩次迭代之間的name值。 這真的非常適合for循環。 $.trim還可以輕松消除字符串開頭的任何多余空格，盡管jquery-csv可能已經做到了。 因此您的最終代碼如下所示：

var babyCsv = "..."; // your data here

var data = $.csv.toArrays(babyCsv);

$(function () {
    $("#csv1ButtonRun").click(function () {

        var count1 = 0;
        var count2 = 0;

        console.log("Num kids: " + data.length);

        for (var i = 0; i < data.length; i++) {
            var name = $.trim(data[i][0]); //name is first column

            if (name[0] == "A") {
                count1++;
            } else if (name[0] == "B") {
                count2++;
            };
        };

        console.log("Kids with A or B names: " + (count1 + count2));
    });
});