When you develop a project, you sometimes encounter the conversion of rows and columns of data. Visiting the garden today is a great way to see it. You do not need to perform row and column conversions in the database, convert the data collection to a long JSON format using the following code.
<script>$ (document). Ready (function () {varJsondata =[{time:'2014-07-08', Name:'Electricity', Value: -}, {time:'2014-07-09', Name:'Electricity', Value: the}, {time:'2014-07-10', Name:'Electricity', Value: the}, {time:'2014-07-11', Name:'Electricity', Value: About}, {time:'2014-07-08', Name:'Water Charges', Value: -}, {time:'2014-07-09', Name:'Water Charges', Value: the}, {time:'2014-07-10', Name:'Water Charges', Value: the}, {time:'2014-07-11', Name:'Water Charges', Value: About}, {time:'2014-07-12', Name:'Water Charges', Value: the } ]; varColfield ='value', Valuefield ='name', IDfield =' Time'; varResultdata = Row2col (Jsondata, IDfield, Colfield, Valuefield,0); alert (resultdata.length); for(vari =0; i < resultdata.length; i++) { varTR = $ ("<tr></tr>"); varTD1 = $ ("<td></td>"); varTD2 = $ ("<td></td>"); varTD3 = $ ("<td></td>"); Td1.html (resultdata[i][' Time']); Td2.html (resultdata[i]['Electricity']); Td3.html (resultdata[i]['Water Charges']); Tr.append (TD1). Append (TD2). Append (TD3); Tr.appendto ($ ("#aaa")); } }); /*JSON data Column conversion * @jsonData JSON data source * @idField criteria field * @colField Generate column Name fields * @valueField fields that generate values * @empt Yvalue default value avoids some data incomplete*/function Row2col (Jsondata, IDfield, Colfield, Valuefield, emptyvalue) {varresult = [],//Store the returned dataIdindexdata = {},//Store ID information in the array (location)Resultcolumns = {},//Store column name DataCurrecord =NULL;//Store Current Data varColfields = Colfield.split (',');// //Loop through the entire JSON array: [{...},{...},{},...] for(varIDX =0; IDX < jsondata.length; idx++) { //current JSON data Object varCDATA =Jsondata[idx]; //finds the index number in the result array, based on the primary key value varIdvalue =Cdata[idfield]; varnum = Idindexdata[idvalue];//gets the array index number that stores the ID if(num! =NULL) {Currecord=Result[num]; } Else { //maintain complete structure information when initializing data avoid lack of data and the absence of specified column dataCurrecord = {}; } //The data under the specified Colfields column is used as the y-axis, then the data for that column is taken as the y-axis for(varIinchcolfields) { varKey =Colfields[i]; //gets the value to Colfield as the column name varValue =Cdata[valuefield]; Currecord[value]=Cdata[key]; //Store column namesResultcolumns[value] =NULL; Break; } //In addition to the data content, you need to add primary key dataCurrecord[idfield] =Idvalue; //Add an array if the object is new if(num = =NULL) {Idindexdata[idvalue]= Result.push (Currecord)-1; } } //data Check because the row data is the column name, there may be some rows missing other column data, if missing, specify the default value for(varIinchresult) { for(varNameinchresultcolumns) { if(!result[i].hasownproperty (name)) Result[i][name] =Emptyvalue; } } returnresult; }</script>
Remember to introduce the JQ file. (Original address)