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

在指定组时，您似乎希望在子列表中对（名称，测试）对进行分组，或者如果未指定，则将其添加到主列表中。这应该有效：

// 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);

Answer 2

下面是一个解决方案，它按照遇到的顺序对数据进行聚类并对组进行排序。为了说明我在你给出的例子中交换了第2行和第3行的组名。

    // csv set as dummy string to illustrate (shuffled the list a bit,
            // order encountered is still the same)
    var csv = 'Test Group Name A,Test Link Name 1,Test URL 1\nTest Group Name B,Test Link Name 2,Test URL 2\nTest Group Name A,   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');
    var id = 0;

    // table containing group names as key, member array as value
    var groups = {}; 

    // ungrouped entried go in here
    var ungrouped = [];

    // push new groups to list to keep original order
    var groupOrder = [];
    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 group property does not exist in object
            // initialize emtpy list
            if (!(row[0] in groups)){
                groups[row[0]] = [];
                groupOrder.push(row[0]);
            }

            // group member text
            text = row[1] + ',' + row[2];

            // add to list groups[<groupname>]
            groups[row[0]].push(text);
        } else {
            // otherwise add to list of ungrouped elements
            ungrouped.push(row.join(','));
        }
    };

    // we have the data clustered, now we gennenrate the HTML
    var mainUl = $('<ul></ul>');
    for (var h = 0; h < groupOrder.length; h++){
        var group = groupOrder[h]; // get group names in order presented
        var mainLi = $('<li><h6>' + group + '</h6></li>');
        var subUl = $('<ul id="ul' + id + '"></ul>');
        for (var i = 0; i < groups[group].length; i++){
            var subLi = $('<li>' + groups[group][i] + '</li>');
            subUl.append(subLi);
        }

        mainLi.append(subUl);
        mainLi.appendTo(mainUl);
    }

    // append the ungrouped entries at the end
    for (var i = 0; i < ungrouped.length; i++) {
        var mainLi = $('<li>' + ungrouped[i] + '</li>');
        mainUl.append(mainLi);
    };

    // add main list to body for illustration or other element
    $('body').append(mainUl);

附加到列表

2 个答案: