如何用JSON数组填充Javascript表？

Question

I have JSON array similar to this :

{"X":[
    {"Time":"05:45","Count":70},
    {"Time":"06:30","Count":40},
    {"Time":"08:15","Count":80}
]},
{"Y":[
    {"Time":"09:15","Count":70},
    {"Time":"10:30","Count":84},
    {"Time":"12:00","Count":95}
]},
{"Z":[
    {"Time":"14:00","Count":80},
    {"Time":"16:00","Count":70},
    {"Time":"15:00","Count":40}
]}

I have to populate table like this dynamically :

Name    05:45   06:30   08:15   09:15   10:30   12:00   14:00   16:00   15:00

  X       70      40       80     0       0       0       0       0       0
  Y        0       0        0     70     84       95      0       0       0 
  Z        0       0        0     0       0       0       80      70      40

I don't know how to populate this as Javascript table. Could anyone please help me with this?

Answer 1

Use JSON.parse(//your json string). Now you can dynamically create rows by looping through this json array something like this--

 var DataArray = JSON.parse(data.d);
      var tableelement = $("#DataSetTbl");        //get table id from jquery

        tableelement.append(createRow(DataArray));            //call this function from the action you want to show table

    function createRow(Object) {                              //dynamically adding rows to the Table

        var trElement = "<tr>";                 //design this according to your requirement

  for(var s=0;s<Object.length; s++)
        trElement += "<td >" + Object[s].Time + "</td>";


        return trElement;
    }

Similarly append a new row for count :)

Answer 2

Try creating valid json array of objects , utilizing $.each() , .after() , Object.keys() ; table , tr , tbody , tr , td elements ; css

 $(function() { var data = [{ "X": [{ "Time": "05:45", "Count": 70 }, { "Time": "06:30", "Count": 40 }, { "Time": "08:15", "Count": 80 }] }, { "Y": [{ "Time": "09:15", "Count": 70 }, { "Time": "10:30", "Count": 84 }, { "Time": "12:00", "Count": 95 }] }, { "Z": [{ "Time": "14:00", "Count": 80 }, { "Time": "15:00", "Count": 70 }, { "Time": "16:00", "Count": 40 }] }]; res = {}; var table = $("<table><tbody></tbody></table>"); $.each(data, function(key, value) { var name = Object.keys(value)[0]; table.find("tbody") .append("<tr class=" + name + "><td>" + name + "</td></tr>"); if (!res[name]) { res[name] = []; } $.each(value[name], function(index, obj) { res[name].push([obj.Count, obj.Time]) table.append("<th>" + obj.Time + "</th>"); return obj.Time }); table.find("th").prependTo(table) }); table.find("th:first").before("<th>Name</th>"); $.each(res, function(index, count) { $("tr[class=" + index + "]", table).after(function() { return $.map(Array($("th", table).length - 1), function(v, k) { var html = count.filter(function(val) { return val[1] === $("th", table).eq(k + 1).text() }); return "<tr><td>" + (!!html.length ? html[0][0] : 0) + "</td></tr>" }) }) }); table.appendTo("body") }); 

 table tr:not([class]), table th { display: inline-block; } table tr:not([class]) { width: 39px; position: relative; left: 44px; top:-24px; } 

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

Answer 3

You would have to correct your data so it is a proper object as show in the demo below.

• First so that you may be able to iterate through the times combine all the array data into array, say a
• Iterate through the keys of the object and the iterate through the elements of a
• If current element of a exists in the value of the outer iteration, val , then output elm.Count , otherwise output 0 .

 var o = { "X":[ {"Time":"05:45","Count":70}, {"Time":"06:30","Count":40}, {"Time":"08:15","Count":80} ], "Y":[ {"Time":"09:15","Count":70}, {"Time":"10:30","Count":84}, {"Time":"12:00","Count":95} ], "Z":[ {"Time":"14:00","Count":80}, {"Time":"16:00","Count":70}, {"Time":"15:00","Count":40} ] }; //merge arrays for purpose getting all times var a = []; $.each(o, function(k,v) { a = a.concat( v ); }); //select table var table = $('table'); //create row to clone var row = $('<tr/>'); //construct header var theadRow = row.clone().html( '<th>Name</th>' ); $.each(a, function(i,v) { theadRow.append( '<th>' + v.Time + '</th>' ); }); //append header row to table table.find('thead').append( theadRow ); //rows var tbody = table.find('tbody'); $.each(o, function(key,val) { //construct row var tbodyRow = row.clone().html( '<th>' + key + '</th>' ); $.each(a, function(index, elm) { tbodyRow.append( '<td>' + (val.indexOf( elm ) > -1 ? elm.Count : 0) + '</td>' ); }); //append row to table tbody.append( tbodyRow ); }); 

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

Answer 4

 var data = { "X":[ {"Time":"05:45","Count":70}, {"Time":"06:30","Count":40}, {"Time":"08:15","Count":80} ], "Y":[ {"Time":"09:15","Count":70}, {"Time":"10:30","Count":84}, {"Time":"12:00","Count":95} ], "Z":[ {"Time":"14:00","Count":80}, {"Time":"16:00","Count":70}, {"Time":"15:00","Count":40} ] }; var keys = Object.keys(data), times = {}, rows = {}; (function processData(){ var row, key, r; for(key in data) { row = rows[key] = {}; for(r in data[key]) addInfo(row, data[key][r]); } function addInfo(row, record) { times[record.Time] = true; row[record.Time] = record.Count; } })(); (function createTable() { var key, count, time, tr = $('<tr>'), $body = $('body'), $table = $('<table>'), $thead = $('<thead>'), $tbody = $('<tbody>'); $body.append($table); $table.append($thead); $table.append($tbody); $thead.append(tr); tr.append('<th>name</th>'); for(time in times) tr.append('<th>'+time+'</th>'); for(key in rows) { tr = $('<tr>'); tr.append('<th>'+key+'</th>'); for(time in times) { count = (rows[key][time] || 0); tr.append('<td>'+count+'</td>'); } $tbody.append(tr); } })(); 

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