JS uses map to integrate double arrays
PrefaceRecently, due to the company's business needs, we wrote ECharts charts to display the changes in data related to the company's phased business. The server needs to query the data and return it to the front end for data display. However, since the returned data is not convenient for the front-end ECharts to display, data integration is required. However, due to my lack of experience, I can only ask the company's boss for help. With the help of the boss, I completed the data integration and learned an unprecedented merging method to share with you today. Simulating dataThe following figure shows the two arrays to be merged.
Merged dataThe merged data requires that the objects in the double array be merged with time as the only key. If the value in the object exists, it will be displayed. If not, the key that the object does not have will be initialized and the initial value will be 0 (if the expression is not clear, the final merged data is shown below)
Merger ideasThe js mapp technology is used in this merger. Since time is the only key, we need to traverse array 1 to initialize a map with time as the key, then traverse array 2 to complement the data, and then convert the processed map into an array. Code display & analysis first stepFirst declare the simulation data and create an empty object to carry the map
//Simulated data arr1
let testArrOne = [
{ date: "2021-8-11", testNumOne: 1 },
{ date: "2021-8-12", testNumOne: 2 },
{ date: "2021-8-13", testNumOne: 3 },
];
//Simulated data arr2
let testArrTwo = [
{ date: "2021-8-12", testNumTwo: 2 },
{ date: "2021-8-14", testNumTwo: 4 },
{ date: "2021-8-15", testNumTwo: 5 },
];
//Merge method let testMap = {}; //First declare an empty object as a map
Step 2Traverse the array to initialize the map
//Traverse the first array testArrOne.forEach((item) => {
testMap[item.date] = {
date: item.date, //initialization time testNumOne: item.testNumOne || 0, //initialization test data one testNumTwo: 0, //initialization test data two };
});
Then we get a map with time as the only key. We print the following data
Step 3Traverse array 2 to perform related assignment and initialization operations
//Traverse the second array testArrTwo.forEach((item) => {
//If the array contains a map object containing time, copy it. If a new time is found, initialize and assign an empty object testMap[item.date] = testMap[item.date] || {};
//Assignment timetestMap[item.date].date = item.date;
//Assign test data one. If not, initialize testMap[item.date].testNumOne = testMap[item.date].testNumOne || 0;
//Auxiliary test data twotestMap[item.date].testNumTwo = item.testNumTwo;
});
Print the map to get the integrated object as follows
Step 4Convert map to arr and you are done. this.listMapUtils.map2List(testMap); The following is the encapsulated code for converting between map and arr
listMapUtils: {
//arr to map method list2Map: function(list, key) {
let map = {};
if (list && Array.isArray(list) && list.length > 0) {
list.forEach((item) => {
item[key] ? (map[item[key]] = item) : "";
});
}
return map;
},
//map to arr method map2List: function(map) {
let list = [];
if (map && typeof map === "object") {
for (let key in map) {
list.push(map[key]);
}
}
return list;
},
},
Full codeBecause it is convenient to show the method of converting between map and arr, I have stated it in the data. Students should not write it like this. As a front-end, you still need to have a modular idea.
<template>
<div></div>
</template>
<script>
export default {
name: "App",
data() {
return {
listMapUtils: {
list2Map: function(list, key) {
let map = {};
if (list && Array.isArray(list) && list.length > 0) {
list.forEach((item) => {
item[key] ? (map[item[key]] = item) : "";
});
}
return map;
},
map2List: function(map) {
let list = [];
if (map && typeof map === "object") {
for (let key in map) {
list.push(map[key]);
}
}
return list;
},
},
};
},
created() {
this.mergeArr();
},
methods: {
mergeArr() {
//Simulated data arr1
let testArrOne = [
{ date: "2021-8-11", testNumOne: 1 },
{ date: "2021-8-12", testNumOne: 2 },
{ date: "2021-8-13", testNumOne: 3 },
];
//Simulated data arr2
let testArrTwo = [
{ date: "2021-8-12", testNumTwo: 2 },
{ date: "2021-8-14", testNumTwo: 4 },
{ date: "2021-8-15", testNumTwo: 5 },
];
//Merge method let testMap = {}; //First declare an empty object as a map
//Traverse the first array testArrOne.forEach((item) => {
testMap[item.date] = {
date: item.date,
testNumOne: item.testNumOne || 0,
testNumTwo: 0,
};
});
testArrTwo.forEach((item) => {
testMap[item.date] = testMap[item.date] || {}; //Initialize the object testMap[item.date].date = item.date;
testMap[item.date].testNumOne = testMap[item.date].testNumOne || 0;
testMap[item.date].testNumTwo = item.testNumTwo;
});
//map to arr
this.listMapUtils.map2List(testMap);
//Get the final result console.log(this.listMapUtils.map2List(testMap));
},
},
};
</script>
<style></style>
SummarizeThis is the end of this article about JS using map to integrate double arrays. For more relevant JS integration double array content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future! You may also be interested in:
|
>>: Install Jenkins with Docker and solve the problem of initial plugin installation failure
Recommend
Some small methods commonly used in html pages
Add in the <Head> tag <meta http-equiv=&q...
How to create an Nginx server with Docker
Operating environment: MAC Docker version: Docker...
MySQL 5.7.15 installation and configuration method graphic tutorial (windows)
Because I need to install MySQL, I record the ins...
Tips on setting HTML table borders
For many people who are new to HTML, table <ta...
Detailed explanation of the role of overflow:hidden (overflow hiding, clearing floats, solving margin collapse)
1. overflow:hidden overflow hidden If overflow:hi...
How to remotely connect to MySQL database with Navicat Premium
The party that creates a new connection is equiva...
Introduction to CSS style classification (basic knowledge)
Classification of CSS styles 1. Internal style --...
Detailed explanation of JavaScript timers
Table of contents Brief Introduction setInterval ...
MySQL Optimization Summary - Total Number of Query Entries
1. COUNT(*) and COUNT(COL) COUNT(*) usually perfo...
Example code for CSS to achieve image zooming effect and slow transition effect when the mouse moves in
transform:scale() can achieve proportional zoomin...
How to install Oracle_11g using Docker
Install Oracle_11g with Docker 1. Pull the oracle...
Install Linux rhel7.3 operating system on virtual machine (specific steps)
Install virtualization software Before installing...
Detailed explanation of JavaScript progress management
Table of contents Preface question principle test...
How to check whether the graphics driver has been successfully installed in Ubuntu
Run the command: glxinfo | grep rendering If the ...
Introduction to Jenkins and how to deploy Jenkins with Docker
1. Related concepts 1.1 Jenkins Concepts: Jenkins...