POST request for nested objects - Angular

I'm currently trying to allow users to post hotels using an angular front end. This is supported with a python backend. Certain attributes such as 'lat', 'lng' and 'html_attributions' are nested within objects. You can see this layout within the python backend:

new_hotel = {
            "name": request.form["name"],
            "address": request.form["address"],
            "rating":request.form["rating"],
            "geometry": {
                "location": {
                    "lat": request.form["lat"],
                    "lng": request.form["lng"]
                }
            },
            "photos": [
                {
                "html_attributions": [
                    request.form["html_attributions"]
                ]
                }
            ]

I'm unsure how to allow users to POST a new hotel because of this. Currently, my web service looks like:

    postHotel(hotel:any){
      let postData = new FormData();
      postData.append('name', hotel.name);
      postData.append('address', hotel.address);
      postData.append('rating', hotel.rating);
      postData.append('lat', hotel.geometry.location.lat );
      postData.append('lng', hotel.geometry.location.lng );
      postData.append('photo', hotel.photos.html_attributions);

  
      return this.http.post(
        'http://localhost:5000/api/v1.0/hotels', postData
      );
  
    }

I'm however getting the error 'ERROR TypeError: Cannot read properties of undefined (reading 'location')'

Any help with this would be greatly appreciated!

I would recommend taking the strongly typed form approach. First, you'll need an interface for your hotel data:

interface IHotel {
  name: string;
  address: string;
  rating: string;
  geometry: {
    location: {
      lat: number;
      lng: number;
    }
  };
  photos: Array<{
    html_attributions: Array<{
      html_attributions: string; // guessing here
    }>;
  }>;
}

Next, you'll need a strongly-typed form to accept user input:

import { FormArray, FormControl, FormGroup } from '@angular/forms';

export interface IHotelForm {
  name: FormControl<string>,
  address: FormControl<string>,
  rating: FormControl<string>,
  geometry: FormGroup<{
    location: FormGroup<{
      lat: FormControl<number>,
      lng: FormControl<number>,
    }>,
  }>,
  photos: FormArray<FormGroup<{
    html_attributions: FormControl<string>,
  }>>,
}

Now when you hand off the data to your service, you can be assured that the structure and types are correct.

class YourService {

  postHotel(hotel: IHotel): Observable<IHotel> {
    return this.httpClient.post<IHotel>(yourUrl, hotel);
  }

}

Yes, it takes some time to describe these structures, but the benefits far outweigh the investment in time.

Of course, if your photos data consists of files, you'll need to create a multi-part form data object.