javascript - 附加到列表

Question

我正在尝试将数据从 csv 文件附加到无序 HTML 列表。我的 csv 文件包含列表的两种不同类型的数据。单个和分组如下所示:

Test Group Name A,Test Link Name 1,Test URL 1
Test Group Name A,Test Link Name 2,Test URL 2
Test Group Name B,Test Link Name 3,Test URL 3
Test Group Name B,Test Link Name 4,Test URL 4
Test Link Name 5,Test URL 5
Test Link Name 6,Test URL 6

最终结果需要如下所示:

Test Group Name A
        Test Link Name 1,Test URL 1
        Test Link Name 2,Test URL 2
Test Group Name B
        Test Link Name 3,Test URL 3
        Test Link Name 4,Test URL 4
Test Link Name 5,Test URL 5
Test Link Name 6,Test URL 6

我可以很好地附加单个链接，但将分组链接从 csv 中取出并放入单独的 <ul> 中。用id=""因为每一个都被证明是相当棘手的。我想我可能需要将每个组项添加到它自己的数组或对象中，然后从中构建 html，但我想不出该怎么做。到目前为止我创建的代码如下所示:

var htmlMenu = '';

$.get(csvFileFolder, function( csvFile ) {
    var data = $.csv.toArrays(csvFile);
        for(var row in data) {
            if (data[row].length > 2){
                htmlMenu += '<li><a href="#">'+data[row][0]+'</a><ul><li><a href="'+data[row][1]+'" target="_blank">'+data[row][2]+'</a></li></ul></li>' //I need to be able to add items to a <ul> by group names
               }else{
                htmlMenu += '<li><a href="'+data[row][1]+'" target="_blank">'+data[row][0]+'</a></li>'; //This works fine
               }
            }
    $('#usefulLinks').append(htmlMenu);
});

有人能帮忙吗？

谢谢

本

Answer 1

似乎您想在指定组时将 (name, test) 对分组在子列表中，或者如果未指定则将其添加到主列表中。这应该有效:

// csv set as dummy string to illustrate
var csv = 'Test Group Name A,Test Link Name 1,Test URL 1\nTest Group Name A,Test Link Name 2,Test URL 2\nTest Group Name B,     Test Link Name 3,Test URL 3\nTest Group Name B,Test Link Name 4,Test URL 4\nTest Link Name 5,Test URL 5\nTest Link Name 6,Test URL 6';
var lines = csv.split('\n');
// initialize main list
var mainUl = $('<ul></ul>');
var group;
var id = 0;
for (var i = 0; i < lines.length; i++) {
    // split lines by comma ommiting space
    row = lines[i].split(/\s*,\s*/g);
    if (row.length === 3) {
        //if belonging to a group
        if (row[0] !== group) {
            group = row[0];

            // create new sub list with unique id
            var subUl = $('<ul id="ul' + id + '"></ul>');

            // add sublist to new list item on main list
            var li = $('<li><h6>' + row[0] + '</h6></li>');
            li.append(subUl);
            li.appendTo(mainUl);
            id += 1;
            // increment id after each subgroup to access each group's ul sequencially
            // as <ul id="ul0">, <ul id="ul1">... with ul preix so it works with
            // with older versions of HTML (where ids cannot start with number)
        }

        // add items to group
        $('<li>' + row[1] + ',' + row[2] + '</li>').appendTo(subUl);
    } else {
        // add li without sub list if 
        // not belonging to group
        var li = $('<li></li>');
        li.text(row[0] + ',' + row[1]);
        mainUl.append(li);
    }
};

// add main list to body
$('body').append(mainUl);