Adding default values to a Vuejs data property

Question

Adding default values to a Vuejs data property

My goal is to populate the predefined data property that I have set.

reportGroupData: [
  { 
    program_name: "",
    iteration_name: "",
    report_template_name: "",
    toggle: true,
    report_details: [],
  },
]

This portion of code shows how I am trying to utilize my API in order to populate the predefined data property. It's worth mentioning that async is being used in this process.

api.get(`get-coach-reports/${this.userData.ind_id}`).then((res) => {
        this.reportData = res.data;
        this.reportGroupData.forEach(element => {
          this.reportData.forEach((mapElement)=>{
            element.program_name = mapElement.program_name
            element.iteration_name = mapElement.iteration_name
            element.report_template_name = mapElement.report_template_name
            element.report_details.push(this.reportData)
          })
        });

The information retrieved from my API, res.data, looks like this:

[
    {
        "full_name": "Arnd Philipp Von Frese Von Issendorff", 
        "report_file": "5Step.html", 
        "report_template_name": "Five STeP Profile Coach Report", 
        "suborg_name": "Masters Degrees", 
        "program_name": "Masters in Financial Analysis (MFA)", 
        "iteration_name": "MFA2023"
    },
    ...
]

My objective is to structure the data in a specific way, as shown here:

[ 
    {
        "report_template_name": "Five STeP Profile Coach Report", 
        "program_name": "Masters in Financial Analysis (MFA)", 
        "iteration_name": "MFA2023",
        "toggle": true,
        "report_details":[
            {
                "full_name": "Arnd Philipp Von Frese Von Issendorff", 
                ...
            },
            ...
        ]
    },
    ...
]

In my console output, I can see that the report_details are successfully populated inside reportGroupData. https://i.sstatic.net/2XIIv.png

I have also explored a solution on Stack Overflow for restructuring arrays, but encountered errors with spread/rest operators within forEach or map functions. Could this be due to using Vue instead of plain JavaScript?

javascript arrays vue.js

Answer 1

Answer №1

It's puzzling why errors would occur with spread syntax, but it's also unclear how you ended up utilizing it in the first place. Vue functions seamlessly with JavaScript, except for older versions of Vue/vue-loader. Upon reviewing your code, it seems that the final array output is as expected. To achieve your desired outcome:

Firstly, ensure that the reportGroupData variable begins empty. You will progressively populate it while iterating through the API data.

reportGroupData: []

Secondly, iterate through the reportData first. Your decision to iterate through reportGroupData initially only resulted in a single loop (as it contained just one predefined object).

While looping through reportData, add new elements to reportGroupData. Each iteration may fall into one of two scenarios:

If an element in reportGroupData already matches the current reportData element's report_template_name (along with other header fields), simply append the reportData element to the corresponding reportGroupData element's report_details array.
If no matching element in reportGroupData is found for the reportData element, create a new reportGroupData element encompassing all the fields from reportData. The report_details array will be initialized with just this singular reportData element.

this.reportData = res.data;
this.reportData.forEach(dataEle => {
  // Search for matching elements between the two arrays
  let existingRgd = this.reportGroupData.find(
    rgd => rgd?.report_template_name === dataEle.report_template_name
  );
  // If a match is found, append the element to the existing report_details array
  if (existingRgd) {
    existingRgd.report_details.push(dataEle);
  // Otherwise, create a new element
  } else {
    this.reportGroupData.push({
      ...dataEle, // Includes all fields from dataEle
      report_details: [dataEle],
    });
  }
});

Following this process, the reportGroupData will contain the organized data as intended.

Answer 2

It's puzzling why errors would occur with spread syntax, but it's also unclear how you ended up utilizing it in the first place. Vue functions seamlessly with JavaScript, except for older versions of Vue/vue-loader. Upon reviewing your code, it seems that the final array output is as expected. To achieve your desired outcome:

Firstly, ensure that the reportGroupData variable begins empty. You will progressively populate it while iterating through the API data.

reportGroupData: []

Secondly, iterate through the reportData first. Your decision to iterate through reportGroupData initially only resulted in a single loop (as it contained just one predefined object).

While looping through reportData, add new elements to reportGroupData. Each iteration may fall into one of two scenarios:

If an element in reportGroupData already matches the current reportData element's report_template_name (along with other header fields), simply append the reportData element to the corresponding reportGroupData element's report_details array.
If no matching element in reportGroupData is found for the reportData element, create a new reportGroupData element encompassing all the fields from reportData. The report_details array will be initialized with just this singular reportData element.

this.reportData = res.data;
this.reportData.forEach(dataEle => {
  // Search for matching elements between the two arrays
  let existingRgd = this.reportGroupData.find(
    rgd => rgd?.report_template_name === dataEle.report_template_name
  );
  // If a match is found, append the element to the existing report_details array
  if (existingRgd) {
    existingRgd.report_details.push(dataEle);
  // Otherwise, create a new element
  } else {
    this.reportGroupData.push({
      ...dataEle, // Includes all fields from dataEle
      report_details: [dataEle],
    });
  }
});

Following this process, the reportGroupData will contain the organized data as intended.

Adding default values to a Vuejs data property

Answer №1

Similar questions

Mastering the utilization of componentDidMount and componentDidUpdate within React.js: a comprehensive guide

Is there a problem with renaming files using the multer module's filename options?

Unexpected error occurred when attempting to fetch the jQuery value of the radio button: "Unrecognized expression syntax error"

Identify when a user switches tabs within the browser and when they switch applications away from the

Leveraging jQuery for Adding Text to a Span While Hovering and Animating it to Slide from Left to

Does the positive Z axis move inward in threejs? The behavior of camera.near and camera.far seems strange

Is it possible to load images top to bottom?

Managing actions on dynamically generated dropdown options in <select> elements

Filtering JSON data in AngularJS is simple and effective

Showing the value of a JavaScript variable within an HTML input field

If a user refreshes too quickly or excessively, my server tends to crash

Issue with displaying jqplot in a jQuery page

Encountering an issue with my code in CodeIgniter

Unable to overwrite class in VueJS component

The loading indicator is not appearing inside the designated box

Setting up the CSS loader in a Vue.js project using webpack

The elastic image slideshow maintains the original size of the images and does not resize them

"Incorporate multiple data entries into a table with the help of Jquery

Tried to enroll the RCTBridgeModule category as RCTFileReaderModule

I would like to hide the button if there are fewer than five visible