JavaScript/jQuery Create HTML from Delimited List

Question

I know I am supposed to have a go at the code so I can post my effort here but I've tried a few times to do this and my code is a mess. Apologies.

I have a tab delimited string and I want to convert this to a HTML table with 3 columns. So if the string has 6 values then I would like this to be 2 rows. For example:

aa | bb | cc | dd | ee | ff

would become

aa | bb | cc
dd | ee | ff

Is there a way to do this with JavaScript or jQuery?

Thanks for your help.

Please post your messy code, we're not going to write it for you. Convert the string to an array with `split()`. Loop through the array in increments of 3, and then add elements `i`, `i+1`, and `i+2` as cells in the table, and start a new row for each group. — Barmar, Sep 28 '17 at 07:32
If my code was anywhere near presentable then I would but it was so far away from being correct I felt it would have been a hindrance/distraction, rather than a help. Thanks to everyone who has posted solutions — Kevin Middleton, Sep 28 '17 at 11:06
They should be condemned for letting you get away with such an incomplete question. — Barmar, Sep 28 '17 at 16:09

score 2 · Accepted Answer · answered Sep 28 '17 at 07:53

Hope this helps. You can find the comments in the code below.

$(document).ready(function () {
 var strColumn = "aa | bb | cc | dd | ee | ff";

 var table = $("<table/>"); //Create new table element
 $.each(strColumn.split("|"), function (i, val){
  if (i == 0 || i % 3 == 0) row = $("<tr/>"); //Create new row after every 3 columns
  row.append($("<td>" + val.trim() + "</td>")); //Create table column and append to row
  table.append (row); //Append row to table
 });
 $("body").append(table); //Append table to body element
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

score 1 · Answer 2 · answered Sep 28 '17 at 07:39

You can use some simple logic to achieve this with jQuery as shown below.

var input = "aa | bb | cc | dd | ee | ff | aaa | fsf";

//Frmat the input
input = input.split("|").map(function(text) {
  return text.trim();
});


var MAX_COL_COUNT = 3,
  table = $("#table"),
  cellCounter = 0,
  rowCounter = 0;

//Add into a table with tr and td
input.forEach(function(text) {
  if (cellCounter == MAX_COL_COUNT || cellCounter == 0) {
    table.append("<tr></tr>");
    rowCounter++;
    cellCounter = 0;
  }

  table.find("tr").eq(rowCounter - 1).append("<td>" + text + "</td>");
  cellCounter++;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<table id="table">

</table>

score 0 · Answer 3 · answered Sep 28 '17 at 07:46

First you need to make an array from the string with split(); use this:

var str = "aa | bb | cc | dd | ee | ff";
var array = str.split("|");

This wil give you an array like this:

[aa,bb,cc,dd,ee,ff]

Next we are going to split this array every 3 items to make a 2 dimensional array.

var str = "aa | bb | cc | dd | ee | ff";
var array = str.split("|");

var 2dArray = [];
var  count = 0;
var arr = [];
for(var i in array){
    arr.push(array[i]);
    count++;
    if(count > 2){
       2dArray.push(arr);
       arr = [];
       count = 0;
    }
}

Now we have a two dimensional array. You can easily parse it to a table. For example check this out: Generate HTML table from 2D JavaScript array

NOTE: I have came up with this out of my head. So maybe it needs some finetuning, but it will give you an idea.

JavaScript/jQuery Create HTML from Delimited List

3 Answers3