Angular 4 & Rails 5 Post Request JSON Formatting

I am developing angular app using rails backend. I'm having trouble formatting the parameters hash so rails can use it. The data is a many to many relationship, and the form contains nested attributes. In Rails, my models use a helper accepts_nested_attributes_for

. I know exactly what the rails format expects, but when I make a request POST

there is one small detail that is off. I'm going to list below two hash parameters. The first is what angular produces and the other is what Rails expects.

As far as angular request is concerned, rails expect a deeper level of nesting in attributes expense_expense_categories

. I never understood why it requires rails. What angular is producing looks logical to me. My question is, what do I need to do to format the parameters in Angular? Looking at what I have so far, am I doing it in a way that suits the best angular practices?

Angular:

{
    "expense": {
        "date": "2017/4/13",
        "check_number": "132",
        "debit": "0",
        "notes": "har",
        "amount": "24",
        "payee_id": "334"
    },
    "expense_expense_categories_attributes": [{
            "expense_category_id": "59",
            "amount": 12
        },
        {
            "expense_category_id": "62",
            "amount": 11
        }
    ]
}

      

        
        
        
      

    

What Rails expects:

{
    "expense": {
        "date": "2017/12/12",
        "check_number": "122",
        "debit": "0",
        "notes": "har",
        "amount": "24",
        "payee_id": "334",
        "expense_expense_categories_attributes": {
            "210212312": {
                "expense_category_id": "72",
                "amount": "12"
            },
            "432323432": {
                "expense_category_id": "73",
                "amount": "12"
            }
        }
    }
}

      

        
        
        
      

    

My code in angular looks like this.

onSubmit()

method in component:

onSubmit() {
    this.expenseService.addExpense(this.expenseForm.value)
      .subscribe(
        () => {
          this.errorMessage = '';
        },
        error =>  {
          this.errorMessage = <any>error;
        }
      );
    this.expenseForm.reset();
  }

      

        
        
        
      

    

addExpense in my service file:

addExpense(expense: Expense): Observable<any> {
  let headers = new Headers({'Content-Type': 'application/json'});
  let options = new RequestOptions({headers: headers});

  return this.http.post('http://localhost:3000/expenses', expense, options)
    .map(
      (res: Response) => {
        const expenseNew: Expense = res.json();
        this.expenses.push(expenseNew);
        this.expensesChanged.next(this.expenses.slice());
      })
    .catch(this.handleError);
}

      

        
        
        
      

    

my main form:

private initForm() {
    let expense_expense_categories_attributes = new FormArray([]);
    this.expenseForm = this.fb.group({
      id: '',
      date: '',
      amount: '',
      check_number: '',
      debit: '',
      payee_id: '',
      notes: '',
      expense_expense_categories_attributes: expense_expense_categories_attributes
    });
  }

      

        
        
        
      

    

My FormArray for nested attributes:

onAddExpenseCategories() {

(<FormArray>this.expenseForm.get('expense_expense_categories_attributes')).push(
      new FormGroup({
        'expense_category_id': new FormControl(null, Validators.required),
        'amount': new FormControl(null, [
          Validators.required
        ])
      })
    );
  }

      

        
        
        
      

    

UPDATE: I was able to get it to work, but I had to use god rich regex to manipulate the query to what I wanted. It was a very ugly option, so I still need to find a better option. Is there a better way to format JSON objects and replace content? I'm not sure how to do this correctly. Help is needed.