Shulou(Shulou.com)06/02 Report--

This article will explain in detail about the application of JSON data row transfer, the content of the article is of high quality, so the editor will share it with you for reference. I hope you will have a certain understanding of the relevant knowledge after reading this article.

Background

First of all, let's talk about why we need to change the rows.

Time category charges 2014-07-08 electricity charges 1202014-07-08 water charges 232014-07-09 electricity charges 442014-07-09 water charges 772014-07-10 electricity charges 452014-07-10 water charges 212014-07-11 electricity charges 342014-07-11 water charges 27

Hard to get out of the table, only to find that the daily water and electricity bills, but test data, do not pay attention to these details.

Most of the time, we query the above data in the database through the sql statement, so when it comes to the page, it is bound to be in one of the following formats.

Time, electricity, water, 2014-07-0812023, 2014-07-0844772014-07-0945662014-07-0943772014-07-1021452014-07-1054212014-07-1165342014-07-116527

Let's loop to generate the html of table.

Some friends who are good at asking questions may ask, since it is to be displayed in this way, the electricity and water charges can be stored in table as columns. This topic is not discussed much here, because there are more and more fees in China, such as property fees, protection fees, taxes, natural gas and so on.

Therefore, it is hoped that no matter how many expense categories there are, it can be automatically converted into column name information and presented to the user in tabular form.

Realize

It is easy to implement, specify the primary key field, which is used as the column name field, the value field, corresponding to the above examples are "time", "category", "cost".

The main idea is to iterate through the JSON and take the category value of each row and store it as a column name.

A default value is added here to solve the problem of incomplete data.

Once again, using the above example, the correct thing to do is to read the water meter and electricity meter every day to calculate the cost. What if it is not written on one day? isn't the structure incomplete after conversion? for example, 2014-07-09 only has electricity charges. There is no data on the line of water charges, so after the conversion is successful, we deliberately detect whether such a situation exists, and if so, set the default value.

/ * json data Source * @ idField conditional Field * @ colField generates column name Field * @ valueField generated value Field * @ emptyValue default value avoids some incomplete data * / function row2col (jsonData, idField, colField, valueField, emptyValue) {var result = [] / / storing the returned data idIndexData = {}, / / storing the information (location) of id in the array resultColumns = {}, / / storing column name data curRecord = null / / Store the current data var colFields = colField.split (','); / loop the entire JSON array: [{.},...] For (var idx = 0; idx < jsonData.length; idx++) {/ / the current json data object var cdata = jsonData [idx]; / / based on the primary key value, find the index number var idValue = cdata [idField]; var num = idIndexData [idValue] in the result array / / get the array index number if (num! = null) {curRecord = result [num];} else {/ / maintain complete structural information when initializing the data to avoid the lack of specified column data due to lack of data curRecord = {} } / / if the data under the specified colFields column is taken as the y-axis, you can for (var i in colFields) {var key = colFields [I]; / / get the value of colField as the column name var value = cdata [valueField] CurRecord [value] = cdata [key]; / / Storage column name resultColumns [value] = null; break;} / / in addition to the data content, you need to add primary key data curRecord [idField] = idValue / / if the object is new, the newly enhanced array if (num = = null) {idIndexData [idValue] = result.push (curRecord)-1 }} / / data check because row data is used as column name, there may be some rows missing other column data. If it is missing, specify the default value for (var i in result) {for (var name in resultColumns) {if (! result [I] .hasOwnProperty (name)) result [I] [name] = emptyValue }} return result;}

Download the complete sample

About the application of JSON data row transfer column is shared here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.