Creating a table to display json data with dynamic columns

Question

I am receiving Json formatted data from my WebMethod as:-

<script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            type: "POST",
            url: "Customer_History.aspx/GetData",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            success: function (data) {
                var returnedstring = data.d;

               }
        })
    });
</script>

The data is:- [Customer Name, Year : Money_Spent]. For every year (2000,2001...2017), a customer has spent some money with an online shopping agency.

Example:-[{"Customer Name":"XXXX","1999":76.000,"2000":68.000,"2001":49.000,"2002":41.000,"2003":47.000,"2004":56.000,"2005":33.000,"2006":51.000,"2007":56.000,"2008":52.000,"2009":55.000,"2010":52.000,"2011":57.000,"2012":55.000,"2013":93.000,"2014":92.000,"2015":62.000,"2016":71.833},{"Customer Name: "YYYY",......... etc etc

Now because the columns for years is dynamic. I am thinking I have to parse the data, find the min year value and max year value and then create a table structure based on that such that it looks like this:-

Customer | 1999 | 2000 | 2001 ----->
--------------------------------
 XXXX    | $$   | $$   | $$ --------->
--------------------------------
 YYYY    | $$   | $$   | $$ --------->
--------------------------------

I was also thinking once the column names have been defined, use jquery datables() to place the data in it.

Does anyone have more elegant/efficient suggestions?

Shiladitya · Accepted Answer · 2017-08-28 16:46:50Z

1

Here you go with a solution https://jsfiddle.net/qpu3cn5u/

var data = [{"Customer Name":"XXXX","1999":76.000,"2000":68.000,"2001":49.000,"2002":41.000,"2003":47.000,"2004":56.000,"2005":33.000,"2006":51.000,"2007":56.000,"2008":52.000,"2009":55.000,"2010":52.000,"2011":57.000,"2012":55.000,"2013":93.000,"2014":92.000,"2015":62.000,"2016":71.833},{"Customer Name": "YYYY","1999":76.000,"2000":68.000,"2001":49.000,"2002":41.000,"2003":47.000,"2004":56.000,"2005":33.000,"2006":51.000,"2007":56.000,"2008":52.000,"2009":55.000,"2010":52.000,"2011":57.000,"2012":55.000,"2013":93.000,"2014":92.000,"2015":62.000,"2016":71.833}];

var colHeader = Object.keys(data[0]);

for(var i=0; i<colHeader.length; i++) {
  $('table thead tr').append('<th>' + colHeader[i] + '</th>');
}

for(var i=0; i<data.length; i++){
  $('table tbody').append('<tr></tr>')
  for(var j= 0; j<colHeader.length; j++){
    $('table tbody tr').last().append('<td>' + data[i][colHeader[j]] + '</td>');
  }
}

th, td {
  border: 1px dashed #000;
  padding: 5px;
}

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

Only thing you need to check with the customer name is coming at the end.

Hope this will help you.

answered Aug 28, 2017 at 16:46

Shiladitya

12.2k17 gold badges29 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Philo Over a year ago

JavaScript runtime error: Object.keys: argument is not an Object... this is an IE 11 issue?

Collectives™ on Stack Overflow

Creating a table to display json data with dynamic columns

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related