Data Formatting and Visualization with Vue.js

Introduction

In this project, you will learn how to convert and format table data to be displayed in a user-friendly way. This is a common task that frontend developers often encounter when working with data from the backend.

👀 Preview

🎯 Tasks

In this project, you will learn:

• How to send an HTTP request to fetch data from a JSON file
• How to format the data to match the required format for display
• How to render the formatted data in an HTML table using Vue.js and Element UI

🏆 Achievements

After completing this project, you will be able to:

• Use axios to send HTTP requests and fetch data
• Manipulate and transform data to the desired format
• Integrate Vue.js and Element UI to create a responsive and visually appealing table component

Set Up the Project Structure

In this step, you will set up the project files and structure. Follow the steps below to complete this step:

Open the project folder. The directory structure is as follows:

├── axios.min.js
├── element-ui.css
├── element-ui.js
├── fetchTableData.json
├── index.html
└── vue.js

Click on Go Live button in the bottom right corner of WebIDE, to run the project.

Next, open "Web 8080" on the top of the VM and refresh it manually and you will see the page.

Send a Request To Fetch the Data

In this step, you will learn how to send an HTTP request to fetch the data from the fetchTableData.json file.

1. Open the index.html file in the code editor.
2. In the <script> section, add a new getTableData() method to the methods in the Vue instance.
3. Inside the getTableData() method, use the axios.get() function to send a GET request to the fetchTableData.json file:

methods: {
  getTableData() {
    axios.get("./fetchTableData.json").then((response) => {
      // TODO: Format the data and assign it to tableData
    });
  }
}

4. Call the getTableData function in the mounted of the Vue instance.

mounted() {
  this.getTableData();
},

Format the Data

In this step, you will learn how to format the data to the required format and assign it to the tableData property.

1. Open the index.html file in the code editor.
2. In the <script> section, locate the getTableData() method inside the Vue instance.
3. Inside the success callback of the then() method in the getTableData() function, get the data property from the response object:

getTableData() {
   axios.get("./fetchTableData.json").then((response) => {
      let resData = response.data.data;
   });
}

4. Loop through the resData array and format the data according to the requirements:

   • For the datetime field, convert the format from YYYYMMDD to YYYY-MM-DD.
   • For the sex field, convert the value from 1 to "Man" and 0 to "Woman".
   • For the vip field, convert the value from 1 to "Yes" and 0 to "No".

   Here's the code to format the data:

   getTableData() {
      axios.get("./fetchTableData.json").then((response) => {
         let resData = response.data.data;
         resData.forEach((item) => {
            item.datetime = `${item.datetime.substring(0, 4)}-${item.datetime.substring(4, 6)}-${item.datetime.substring(6)}`;
            item.sex = item.sex ? "Man" : "Woman";
            item.vip = item.vip ? "Yes" : "No";
         });
      });
   }
   

5. After formatting the data, assign the resData array to the tableData property:

   getTableData() {
      axios.get("./fetchTableData.json").then((response) => {
         // ...
         this.tableData = resData;
      });
   }
   

Now, the data is formatted and assigned to the tableData property, which will be used to render the table in the HTML.

The final effect is as follows:

Summary

Congratulations! You have completed this project. You can practice more labs in LabEx to improve your skills.