Project practice | Js data structure transformation process

This is the 27th day of my participation in the August Genwen Challenge.More challenges in August

preface

In this example, three JS structures are used, Object, Array and Set. The reason why WE use Object instead of Map is that I think the API of Map is not easy to remember, and it is not as smooth as Object when using it. Of course, there must be differences between the two data structures. Should Object or Map be used in JS projects? (The author is a nuggets developer community?? Little embarrassed)

The functional requirements

Page access to an interface, need to get a lot of data analysis, at the same time need to import the original data into Excel for customers to look up

Because the raw data needs to be passed to the page, and the data processing has many dimensions, the Java operation would be more verbose, so we decided to move the processing logic to the page. Because this table is logically associated, some of the foreign key table data involved needs to be processed in the background and transferred to the page synchronously, and then called and transformed when the subsequent data needs to be associated

Another advantage is that if the data processing method needs to change, it can be directly adjusted on the page, no longer through the background adjustment

Background data return structure

For example, the list data is as follows. Other fields have been omitted. The background data received is similar to data = [{‘line’: ‘101’, ‘grade’: ‘A’},….] , a simple List

101 A 101 A 101 B 102 A 102 C 102 CCopy the code

One of the statistics functions

demand

According to the line of statistics, the total number of levels

Analysis of the

We need to record what lines are involved in this string of data, what grades are under the corresponding lines, and how many of these grades are there

Obj = {101: {A: 1, B: 2}, obj = {101: {A: 1, B: 2},… }

let obj = {};
data.forEach(n= > {
  data[n.line] = data[n.line] || {};	// Initialize the specific line, give the default value if it does not exist
	let num = data[n.line][n.grade] || 0;	// Initializes the specific level, does not exist, give 0
	data[n.line][n.grade] = num + 1;	++num is not recommended. This operation will alter the original data
})
Copy the code

Here are the final results

obj = {
	101: {
		A: 2.B: 1
	},
	102: {
		A: 1.C: 2}}Copy the code

Preliminary render effect

According to the processed data, if we directly render into the table, the general effect is as follows

This may not look anything, I posted a more realistic preview effect

Now look at the presentation of the data, the problem is very obvious! Because the line does not have their grade may be different! We can’t render directly to standard tabular data! Can not intuitive contrast, horizontal look good, vertical contrast, can not compare the same level of data!

To optimize the

Directly consider a dynamic processing, we will this batch of data involved in the grade, all extracted, improve the operation of the previous step

We first adjust data, use set to delete data, use… Expand to array data, then sort (this is why I prefer JS to handle data, concise!)

let grades = [...new Set(data.map(n= > n.grade))].sort();
Copy the code

Now, let’s modify the statistics of the previous step

let obj = {};
gradeObj = {};
grades.forEach(g= > gradeObj[g] = 0);	// Get a processed grade object, which can then be used by cloning
data.forEach(n= > {
  data[n.line] = data[n.line] || Object.assign({}, gradeObj);	// Initialize the specific line, give the default value if it does not exist
	let num = data[n.line][n.grade] || 0;	// Initialize the specific level, there is no zero
	data[n.line][n.grade] = num + 1;	++num is not recommended. This operation will alter the original data
})
Copy the code

Now that each line has the same hierarchy, we can directly optimize the table to look like this

In this case, we can see very intuitively the horizontal comparison of the number of these grades, vertical comparison, than the previous version of at least one grade