Populate predefined data property in vuejs

Question

I am trying to populate my predefined data property.

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

this is my API, and the code I try to populate my predefined data property. I'm using async in this BTW.

api.get(`get-coach-reports/${this.userData.ind_id}`).then((res) => {
        this.reportData = res.data;
        this.reportGroupData.forEach(element => {
          this.reportData.forEach((mapElement)=>{ //i tried using map in here but same result
            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)
          })
        });

This is the data we get from my API, res.data:

[
    {
        "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"
    },
    {
        "full_name": "Arnd Philipp Von Frese Von Issendorff 123", 
        "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"
    },
    {
        "full_name": "Arnd Philipp Von Frese Von Issendorff 321", 
        "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"
    },
    {
        "full_name": "Chris Hallett", 
        "report_file": "TeamLeader360Report.html", 
        "report_template_name": "Team Leader 360 Coach Report", 
        "suborg_name": "Sandbox", 
        "program_name": "LBS Test Programme", 
        "iteration_name": "TEST2022"
    },
    {
        "full_name": "John Doe", 
        "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"
    },
    {
        "full_name": "John Doe 123", 
        "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"
    }
]

I'm trying to achieve this result:

[ 
    {
        "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", 
                "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"
            },
            {
                "full_name": "Arnd Philipp Von Frese Von Issendorff 123", 
                "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"
            },
            {
                "full_name": "Arnd Philipp Von Frese Von Issendorff 321", 
                "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"
            }
        ]
    },

    {
        "report_template_name": "Team Leader 360 Coach Report", 
        "program_name": "Masters in Financial Analysis (MFA)", 
        "iteration_name": "MFA2023",
        "toggle": true,
        "report_details":[
            {
                "full_name": "John Doe", 
                "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"
            },
            {
                "full_name": "John Doe 123", 
                "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"
            }
        ]
    },

    {
        "report_template_name": "Pressure Point 'Big 5' Coach Report", 
        "program_name": "Senior Executive Programme (SEP)", 
        "iteration_name": "SEP107",
        "toggle": true,
        "report_details":
        [
            {
                "full_name": "Chris Hallett", 
                "report_file": "TeamLeader360Report.html", 
                "report_template_name": "Pressure Point 'Big 5' Coach Report", 
                "suborg_name": "Sandbox", 
                "program_name": "Senior Executive Programme (SEP)", 
                "iteration_name": "SEP107"
            }
        ]
    }
]

This is what I get in my console, It just populates the report_details inside my reportGroupData

I also tried this solution in here Reconstructing array but the spread / rest operator returns an error inside my forEach or map. Is it because I'm using Vue not just vanilla javascript?

yoduh · Accepted Answer · 2022-10-18 04:06:09Z

Not sure why you would get errors with spread syntax, but also not sure how you ended up using it either. Vue is a javascript framework and all javascript works with Vue (old Vue/vue-loader versions not withstanding). I did step through your code and it looks like the final array you're getting is expected. To get what you want:

First, the reportGroupData should start empty. You'll add elements to it as you loop through the API data

reportGroupData: []

Second, loop through reportData first. Your choice to loop through reportGroupData first only did one loop (it only contained your one pre-defined object).

Now when looping through reportData you need to add new elements to reportGroupData. Each loop you'll encounter one of two scenarios:

An element in reportGroupData already exists matching the current reportData element's report_template_name (and other header fields I suppose). Simply add the reportData element to the matching reportGroupData element's report_details array.
No element in reportGroupData matches the reportData element. Create a new reportGroupData element using all the fields of reportData. The report_details array will be initialized with just this one reportData element.

this.reportData = res.data;
this.reportData.forEach(dataEle => {
  // look for matching elements between the two object arrays
  let existingRgd = this.reportGroupData.find(
    rgd => rgd?.report_template_name === dataEle.report_template_name
  );
  // if match is found, add to existing element's report_details array
  if (existingRgd) {
    existingRgd.report_details.push(dataEle);
  // else create new element
  } else {
    this.reportGroupData.push({
      ...dataEle, // adds all fields of dataEle
      report_details: [dataEle],
    });
  }
});

afterwards, this.reportGroupData will have all the data organized the way you want.

Thanks for the help and a clear explanation, more power to you bro.

Collectives™ on Stack Overflow

Populate predefined data property in vuejs

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related