CODEWITHSUNDEEP
javascriptangular
onTheInternet
onTheInternet

Reputation: 7253

Angular FormGroup.value puts values in array

I'm using the Angular Material Stepper to create a simple True / False test. At the end of the test, you hit a submit button that calls a service that gathers the users answers and stores them.

The structure of my app looks like this:

Project structure

It's quite simple. Here is the typescript code for the questions-stepper that uses the answers service

  //Push results to service so other components can use it
  gatherResults(){
    this._answerService.setAnswers(
                          Object.values(this.firstFormGroup.value),
                          Object.values(this.secondFormGroup.value), 
                          Object.values(this.thirdFormGroup.value),
                          Object.values(this.fourthFormGroup.value),
                          Object.values(this.fifthFormGroup.value),
                          Object.values(this.sixthFormGroup.value),
                          Object.values(this.seventhFormGroup.value),
                          Object.values(this.eigthFormGroup.value),
                          Object.values(this.ninthFormGroup.value),
                          Object.values(this.tenthFormGroup.value),
                          Object.values(this.eleventhFormGroup.value),
                          Object.values(this.twelthFormGroup.value)
                          );
    let answers = this._answerService.retrieveAnswers();
    console.log(answers);
  }

And here is the full code for the answers service

export class AnswersService {

  answers = {};
  constructor() { }

  setAnswers(a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, a11, a12){
    this.answers = {
      answer1 : a1,
      answer2: a2,
      answer3: a3,
      answer4: a4,
      answer5: a5,
      answer6: a6,
      answer7: a7,
      answer8: a8,
      answer9: a9,
      answer10: a10,
      answer11: a11,
      answer12: a12
    }
  }

  retrieveAnswers(){
    return this.answers;
  }

}

All of this code works, however, I have one small problem. The format in which the answers object exists. When I log the answers object in the answers service, it returns an object that has arrays in it.

Javascript Object

Can I change this so that it's more like an object like this

Ideal Layout

EDIT

I've tried removing the Object.Values when calling the setAnswers function in the answers service. This just gives me another object in the value. This is what you get when you remove it from the first two.

Updated Object

Upvotes: 1

Views: 98

Answers (1)

Prachi
Prachi

Reputation: 3574

Object.values(object) transforms the object into an array, so if you want the first value only, then you can try this.

  //Push results to service so other components can use it
  gatherResults(){
    this._answerService.setAnswers(
                          Object.values(this.firstFormGroup.value)[0],
                          Object.values(this.secondFormGroup.value)[0], 
                          Object.values(this.thirdFormGroup.value)[0],
                          Object.values(this.fourthFormGroup.value)[0],
                          Object.values(this.fifthFormGroup.value)[0],
                          Object.values(this.sixthFormGroup.value)[0],
                          Object.values(this.seventhFormGroup.value)[0],
                          Object.values(this.eigthFormGroup.value)[0],
                          Object.values(this.ninthFormGroup.value)[0],
                          Object.values(this.tenthFormGroup.value)[0],
                          Object.values(this.eleventhFormGroup.value)[0],
                          Object.values(this.twelthFormGroup.value)[0]
                          );
    let answers = this._answerService.retrieveAnswers();
    console.log(answers);
  }

And if you want to name all the values by name, you can try this:

//Push results to service so other components can use it
gatherResults(){
this._answerService.setAnswers(
                              this.firstFormGroup.value.firstCtrl,
                              this.secondFormGroup.value.secondCtrl, 
                              ..
                              //And similarly for all forms
                              );
let answers = this._answerService.retrieveAnswers();
console.log(answers);

Upvotes: 3

Related Questions