Changing commas into colon after third consecutive commas

Question

I'm asking a question based on my previous question JQuery-csv not parsing all values ,this question will be a workaround on my problem which was solved but still needed a bit tweaking where the overflowed cell won't show up, but I can't figure out where or how to start with it.

My csv file looks like this: test.csv

header1, header2, header3, header4
value1, value2, value3, value4
value1, value2, value3, value4.1,value4.2,value4.3
value1, value2, value3, value4

Im parsing the csv using csv.parsers.splitLines , but this time I would like to check line by line that after the 3rd comma , I'll get all the remaining strings and replace the comma with some other separator like a colon :. ex:

value1, value2, value3, value4.1,value4.2,value4.3 --> value1, value2, value3, value4.1-value4.2-value4.3

at the moment I still don't know where to start in this issue a good nudge in this would be awesome. cheers!!

JSFiddle for my ideal output:

http://jsfiddle.net/xpvt214o/690880/

Answer 1

Fine, here we go:

            var separator = ",",
                agregator = "-";
            function generateTable(lines) {
                if (typeof(lines) === 'undefined' || lines.length == 0) {
                    return '';
                }
                var header = lines[0].split(separator);
                var html = '';
                var rows = [];
                // mapping
                for (var row in lines) {
                    if(row == 0) {
                        continue;
                    }
                    var cols = lines[row].split(separator),
                        values = {};
                    for (var col in cols) {
                        var item = header[col] ? header[col] : header[header.length-1];
                        if(values[item]) {
                            values[item].push(cols[col]);
                        } else {
                            values[item] = [cols[col]];
                        }
                    }
                    rows.push(values);
                }
                // printing
                for(var row in rows) {
                    html += '<tr>\r\n';
                    for(var item in rows[row]) {
                        html += '<td>' + item + ':' + rows[row][item].join(agregator) + '</td>\r\n';
                    }
                    html += '</tr>\r\n';
                }
                return html;
            }
            $.ajax({
                type: "GET",
                url: "test.csv",
                dataType: "text",
                success: function(response) {
                    $('#result').html(generateTable($.csv.parsers.splitLines(response)));
                }
            });

As I said on the previous question, to achieve what you want you must map those values first, then print those information. Please notice I changed a litle bit our code with new variables separator and agregator just to make it easy to change. Also that overflow solution just wraps the "lost cases" to the last header, if you know what I mean. As you got the last answer I will just talk about the changes.

Mapping

                for (var row in lines) {
                    if(row == 0) {
                        continue;
                    }
                    var cols = lines[row].split(separator),
                        values = {};
                    for (var col in cols) {
                        var item = header[col] ? header[col] : header[header.length-1];
                        if(values[item]) {
                            values[item].push(cols[col]);
                        } else {
                            values[item] = [cols[col]];
                        }
                    }
                    rows.push(values);
                }

Instead of populating the html variable, here I'll populate rows with simple objects. I decided to use a simple syntax: {headerName: [headerValues]}. So each header with the same name will be on the same array. Easy, right? One loop to rows, one loop to cols and we're done.

Printing

                for(var row in rows) {
                    html += '<tr>\r\n';
                    for(var item in rows[row]) {
                        html += '<td>' + item + ':' + rows[row][item].join(agregator) + '</td>\r\n';
                    }
                    html += '</tr>\r\n';
                }

Printing is more easy because the hardest part has gone. You just need to loop rows and cols again, just making a syntax conversion: {headerName:[headerValues]} to <td>headerName: [headerValues].join(agregator)</td>.