Generate HTML table from array

Question

0.00/5 (No votes)

See more:

I have data in Array format as below... (sample one) this is an array..Based on data , I need to generate a html table by custom condition... say, table header will be day1,2,3,4,5,6 and below array has to be based for each header to add row based on the conditions... I have given the details for reference

var array= [{"day":1,"summary":"proge1"},
{"day":1,"summary":"proge2"},
{"day":1,"summary":"proge3"},
{"day":2,"summary":"Tues1"},
{"day":2,"summary":"Tues2"},
{"day":2,"summary":"Tues3"},
{"day":3,"summary":"Wed1"},
{"day":3,"summary":"Wed2"},
{"day":3,"summary":"Wed3 "},
{"day":4,"summary":"Thur1"},
{"day":4,"summary":"Thur2"},
{"day":5,"summary":"Fri1"},
{"day":6,"summary":"Sat1"}]
I want to generate a html table based on this data such that it should display as below..can someone please suggest me how to accomplish this..

Day1

Day2

Day3

Day4

Day5

Day6

output:

----------------------------------------------
Day1 |Day2 Day3 Day4 Day5 Day6
-----------------------------------------------
proge1 Tue1 Wed1 Thur1 Fri1 Sat1

proge2 Tue2 Wed2 Thur2
proge3 Tue3 Wed3

What I have tried:

here is wat i did....

script

$(function () {
var json = [];
var tr,start=0;
console.log('here json check here',json);
for (var i = 0; i < json.length; i++) {
tr = $('');
tr.append("" + json[i].summary + "");
$('table').append(tr);
}
}},

But I am thinking how to call this function for each td....say... assign some value for each td like 1,2,3,4 and pass that value to function and get required data for each td.....Experts... I am new to html please advise if you have any idea

Posted 30-Jan-17 14:07pm

Member 12974741

Updated 30-Jan-17 19:46pm

Add a Solution

2 solutions

Solution 1

To simplify you HTML generation you will have to transform your array to different grouping, I would suggest transforming data to array based on Day, Something like

[{"day":1, summary : ["proge1","proge2","proge3"],
{"day":2,"summary":["Tues1", "Tues2", "Tues3"],
{"day":3,"summary":["Wed1","Wed2","Wed3 "],
{"day":4,"summary":["Thur1","Thur2"],
{"day":5,"summary":["Fri1"],
{"day":6,"summary":["Sat1"]}]

Once you transform this, get the max array length out of the summary array for all day's. In the above case, it will be 3. Put a loop on top of max length you get, an internal loop on no of days. Before adding data from the day's record check if the array day pointer does have data for that index.

Posted 30-Jan-17 17:24pm

Ashwin. Shetty

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Karthik_Mahalingam · Accepted Answer · 2017-01-30T19:46:00

Solution 2

try this

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery.js"></script>

    <script>
        var array = [{ "day": 1, "summary": "proge1" },
{ "day": 1, "summary": "proge2" },
{ "day": 1, "summary": "proge3" },
{ "day": 2, "summary": "Tues1" },
{ "day": 2, "summary": "Tues2" },
{ "day": 2, "summary": "Tues3" },
{ "day": 3, "summary": "Wed1" },
{ "day": 3, "summary": "Wed2" },
{ "day": 3, "summary": "Wed3 " },
{ "day": 4, "summary": "Thur1" },
{ "day": 4, "summary": "Thur2" },
{ "day": 5, "summary": "Fri1" },
{ "day": 6, "summary": "Sat1" }];

        $(function () {
            var temp = array;
            var uniqdays = [];
            for (var i = 0; i < array.length; i++)  
                if (uniqdays.indexOf(array[i].day) == -1) uniqdays.push(array[i].day);
            var maxAry = [];
            for (var i = 0; i < uniqdays.length; i++) {
                var tempary = [];
                for (var j = 0; j < array.length; j++) {
                    if(array[j].day == uniqdays[i])
                        tempary.push(array[j].summary)
                }
                maxAry.push(tempary.length);
            }           
            var maxValue = maxAry.sort().pop();

            var $tbl = $('#tbl');
            var $trhead = $('<tr>').appendTo($tbl);
            for (var i = 0; i < uniqdays.length; i++) {
                var day = uniqdays[i]; 
                var $td = $('<td>').appendTo($trhead);
                $td.text('day' + day); 
            }
           
            for (var i = 0; i < maxValue; i++) {
                var $tr = $('<tr>').appendTo($tbl);
                for (var j = 0; j < uniqdays.length; j++) {
                    var day = uniqdays[j];

                    for (var k = 0; k < temp.length; k++) {
                        if (temp[k].day == day && temp[k].summary != '') {
                            var $td = $('<td>').appendTo($tr);
                            $td.text(temp[k].summary);
                            temp[k].summary = '';
                            break;
                        }
                    }
                }
            }
        });

    </script>
</head>
<body>
    <table cellspacing="1" cellpadding="1" border="1" id="tbl">        
    </table>

</body>
</html>

Demo: JSFiddle[^]

Posted 30-Jan-17 19:46pm

Karthik_Mahalingam

Updated 30-Jan-17 19:49pm

v2

Comments

Member 12974741 31-Jan-17 14:01pm

you are awsm!! Thanks for that Karthik....I am trying to enhance the code with real data... but when i execute it shows some incorrect o/p... I think its based on td value passed....??? please suggest on this..

For more reference:
here is real array data :
Real Array : https://gist.github.com/mahakT/df9632be8b8929197041460efd335ac8
get : the sequecnce of data based on timing
Display in table format: this link shows data as per the code suggested by you.....https://firstappth.mybluemix.net/ ( but if you view.. column 1 has fetched colum 6 data as well.... not sure if that bec of td?)

This is the expected output in table....

Monday |Tuesday | Wednesday.....
-----------------------------------
Summary | Summary | Summary
4.00-4.45| 4.00-4.45 |4.00-4.45
---------------------------------
Summary | Summary |Summary
4.45-5.30 | 4.00-4.45 |4.00-4.45

table should show exact data as ics events(you can view the ics in calendar to see how exactly the output should luk like)... Array has the data from this ics....

https://calendar.google.com/calendar/ical/o8mfhn5drq7t875vosh3b5kdao%40group.calendar.google.com/public/basic.ics

Appreciate if you could provide your suggestion/thoughts...Thanks!!

Karthik_Mahalingam 31-Jan-17 23:19pm

could you post the expected output as screenshot

Member 12974741 31-Jan-17 21:41pm

please view this url in IE.....https://firstappth.mybluemix.net/

I used the above code... and just updated my array and you can see the output in above url.... Am i missing something here?

Karthik_Mahalingam 31-Jan-17 23:19pm

the url is not responding

Member 12974741 31-Jan-17 23:42pm

Hi.... How to send a screenshot... as i couldnt paste in the question/comment section...

Member 12974741 31-Jan-17 22:04pm

I did nothing... Just added one more entry to array to the abive given code... your can see the output.... just sharing details for your reference...... var array = [{ "day": 1, "summary": "proge1" },
{ "day": 1, "summary": "proge2" },
{ "day": 1, "summary": "proge3" },
{ "day": 2, "summary": "Tues1" },
{ "day": 2, "summary": "Tues2" },
{ "day": 2, "summary": "Tues3" },
{ "day": 3, "summary": "Wed1" },
{ "day": 3, "summary": "Wed2" },
{ "day": 3, "summary": "Wed3 " },
{ "day": 4, "summary": "Thur1" },
{ "day": 4, "summary": "Thur2" },
{ "day": 5, "summary": "Fri1" },
{ "day": 6, "summary": "Sat1" },
{"day": 6, "summary": "Sat1" }];

$(function () {
var temp = array;
var uniqdays = [];
for (var i = 0; i < array.length; i++)
if (uniqdays.indexOf(array[i].day) == -1) uniqdays.push(array[i].day);
var maxAry = [];
for (var i = 0; i < uniqdays.length; i++) {
var tempary = [];
for (var j = 0; j < array.length; j++) {
if(array[j].day == uniqdays[i])
tempary.push(array[j].summary)
}
maxAry.push(tempary.length);
}
var maxValue = maxAry.sort().pop();

var $tbl = $('#tbl');
var $trhead = $('').appendTo($tbl);
for (var i = 0; i < uniqdays.length; i++) {
var day = uniqdays[i];
var $td = $('').appendTo($trhead);
$td.text('day' + day);
}

for (var i = 0; i < maxValue; i++) {
var $tr = $('').appendTo($tbl);
for (var j = 0; j < uniqdays.length; j++) {
var day = uniqdays[j];

for (var k = 0; k < temp.length; k++) {
if (temp[k].day == day && temp[k].summary != '') {
var $td = $('').appendTo($tr);
$td.text(temp[k].summary);
temp[k].summary = '';
break;
}
}
}
}
});

Karthik_Mahalingam 31-Jan-17 22:07pm

Just now woke up.. I will update it after sometime.

-sent from mobile

Member 12974741 31-Jan-17 23:41pm

Hi.... How to send a screenshot... as i couldnt paste in the question/comment section...

Karthik_Mahalingam 31-Jan-17 23:42pm

take a screenshot and post the url
https://snag.gy/

Karthik_Mahalingam 1-Feb-17 0:10am

try this
$(function () {
var temp = array;
var uniqdays = [];
for (var i = 0; i < array.length; i++)
if (uniqdays.indexOf(array[i].seq) == -1)
if(array[i].seq != null)
uniqdays.push(array[i].seq);
var maxAry = [];
for (var i = 0; i < uniqdays.length; i++) {
var tempary = [];
for (var j = 0; j < array.length; j++) {
if(array[j].seq == uniqdays[i])
tempary.push(array[j].summary)
}
maxAry.push(tempary.length);
}
var maxValue = maxAry.sort().pop();

var $tbl = $('#tbl');
var $trhead = $('').appendTo($tbl);
for (var i = 0; i < uniqdays.length; i++) {
var seq = uniqdays[i];
var day ='';
for (var j = 0; j < array.length; j++) {
if(array[j].seq == seq){ day = array[j].day;break }
}
var $td = $('').appendTo($trhead);
$td.text( day);
}
debugger

for (var i = 0; i < maxValue; i++) {
var $tr = $('').appendTo($tbl);
for (var j = 0; j < uniqdays.length; j++) {
var seq = uniqdays[j];

for (var k = 0; k < temp.length; k++) {
if (temp[k].seq == seq && temp[k].summary != '') {
var $td = $('').appendTo($tr);
//$td.html(temp[k].summary + ' ' + temp[k].start);
$td.html('summary' + '' + temp[k].start);
temp[k].summary = '';
break;
}
}
}
}

});

Member 12974741 31-Jan-17 23:51pm

Array :https://gist.github.com/mahakT/df9632be8b8929197041460efd335ac8
1.(we can ignore "seq" field if not required)
2. I need to sort the Array.. and data should be fetched based on the start and end date sequence.... for your better understanding i have given in screenshot...https://snag.gy/wsjgTb.jpg

3.Expected output in table format from Array :https://snag.gy/S7YZD9.jpg

Please let me know if you need any more details..... Thanks

Karthik_Mahalingam 1-Feb-17 0:11am

check the above code and modify it as per your needs.

Member 12974741 1-Feb-17 0:39am

Thanks Karthik.... I still see the same output :( with above code...just run this code... Monday column fetching tuesday/saturday records also :(

https://gist.github.com/mahakT/7d62541a633f1e1464a4fa7e5ed4a5aa

Karthik_Mahalingam 1-Feb-17 0:48am

I have not done anything for sorting..

try to debug the code using debugger
am bit busy with my work now.. will check once iam free.

Member 12974741 1-Feb-17 10:56am

ok Thanks for that !!

Member 12974741 3-Feb-17 20:59pm

Hey Karthik... I was trying to modify your code....as I am in startup phase..I couldnt debug or proceed further...

I did tried different way...But I got stuck how to add data based on condition..can you please kindly check and see if you can provide me any suggestion?? Much Appreciate your help!!

http://jsfiddle.net/Thea123/x8uvxxjx/

Karthik_Mahalingam 4-Feb-17 1:58am

this fiddle has diff code..
ping me when you are online.

Member 12974741 4-Feb-17 10:43am

Hi Karthik.... yes its different code i tried...but it fetches data to only coln1.

here is your code....https://jsfiddle.net/Thea123/oeevhh30/

To my understanding....it passes array[i] in loop and if record has to be placed in 3rd row in coln 3... instead... it checks in order coln1,coln2,coln3... and if coln1 row3 is empty it passes data to coln1 instead of coln3.....

Karthik_Mahalingam 4-Feb-17 10:45am

Do you have team viewer

Member 12974741 4-Feb-17 10:51am

I have webex... will that work?

Karthik_Mahalingam 4-Feb-17 10:53am

.

Member 12974741 4-Feb-17 10:54am

ok sure...!!

Karthik_Mahalingam 5-Feb-17 0:08am

is this correct or wrong
https://jsfiddle.net/Thea123/oeevhh30/

Member 12974741 5-Feb-17 0:18am

if you see the output;data wed3 should come under column3(day3 header) and sat1 should be under day 6 header... If you see the results it works different....
Ideally, "day": 1, --> data should go under day1 header...
"day": 2--> day2 header....

Member 12974741 5-Feb-17 0:29am

I hope you got wat i mean and didn't confuse you.. :)

Karthik_Mahalingam 5-Feb-17 0:34am

hmm

Karthik_Mahalingam 5-Feb-17 0:36am

got it now.

Karthik_Mahalingam 5-Feb-17 0:49am

check this fiddle
https://jsfiddle.net/karthikjsf/oeevhh30/6/

Member 12974741 5-Feb-17 0:55am

Awesome.... you are amazing...!! This works.. Thanks a ton for all your help...

Karthik_Mahalingam 5-Feb-17 0:56am

welcome :)

Karthik_Mahalingam 5-Feb-17 0:57am

tamil ah?

Karthik_Mahalingam 5-Feb-17 1:01am

ok, me too.

Member 12974741 5-Feb-17 1:03am

oh okay...bdb how did you guess tat i might be tamilian...(thinkingggg)

Karthik_Mahalingam 5-Feb-17 1:04am

oru tamilanuku thaan adhu theriyum.

Member 12974741 5-Feb-17 1:09am

(Hope no sarcasm :\ ) and magizhchi :) :) again..Thanks....you're master in coding !!

Karthik_Mahalingam 5-Feb-17 1:31am

:)unga mail paathen, kathir nu poturnchu, so tamil nu guess panen.

Member 12974741 5-Feb-17 1:36am

ohhh ok ok :)

Karthik_Mahalingam 5-Feb-17 1:40am

:)

Member 12974741 4-Feb-17 10:50am

Nope.I dont have....

Karthik_Mahalingam 5-Feb-17 0:33am

ok i wil chk