Populate predefined data property in vuejs-CodePudding

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?

CodePudding user response：

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.