Front-end Development: Data Processing Method Sharing (I)

In the front-end development process will encounter a variety of data processing requirements, developers will be based on different business requirements to achieve the corresponding business functions, but the data format is fixed, so in the encounter of some data is not the data you want to do? This requires the developer to perform secondary processing on the specific data obtained. Some simple processing can be achieved directly through data conversion type or concatenation, and more complex data involves algorithm processing.

This blog post will share a simple method of storing and valuing data that does not involve algorithms. The case is illustrated by the actual development process: to extract a field element from the array in the data source, and then concatenate the array elements, and finally assign a value to a string object.

<template> <Container> <div slot="body" class="done-detail"> < van-Divider content-position="left"> Personal information </ van-Divider > <van-cell-group> <van-cell title=" address ":value="addressStr" /> </van-cell-group> </div> </Container> </template> <script> export default { data() { return { odcAddress: [], addressStr:"" }; }, the methods: {method one: async getApplyDetail () {this. $service. Apply. ApplyQuery ({params: {id: this.$route.params.id } }) .then((r) => { if (r.success) { r.data.accessList.forEach(element => { this.addressStr += element.accessName; // Concatenate the elements of the array into a string (but note that the data type is automatically appended if it is not a string)}); }}); {}, method 2: async getApplyDetail (). This $service. Apply. ApplyQuery ({params: {id: this.$route.params.id } }) .then((r) => { if (r.success) { r.data.accessList.forEach(element => { this.odcAddress.push(element.accessName); }); this.addressStr = this.odcAddress.join(); // Concatenate the elements into a string}}); }, }, } </script>Copy the code

Requirements are not complex, processing methods are not complex, but very effective, to share, for later development use needs.

The above is all the content of this chapter. Welcome to pay attention to the wechat public account of Sanzhan “Program Ape by Sanzhan”, and the Sina Weibo account of Sanzhan “Sanzhan 666”, welcome to pay attention!