title: JSON Object name returning as ID
body: <p>I'm learning Angular and .NET Core.  In my web application that I'm building I have two objects that are returned on my Organization Detail page.  They are as follows: </p>
  
  <ul>
  <li>Organization (retrieved via the API and gives details about an organization such as OrganizationName, StreetAddress, PhoneNumber, FirstName, LastName and so on) </li>
  <li>OwnedLocations (A list of all locations an organization owns and details on those locations.  IE: LocationName, ContactFirstName, ContactLastName, PhoneNumber, StreetAddress and so on). </li>
  </ul>
  
  <p>I am facing a problem though when these details are retrieved.  They are being listed in the returned json object with a name of 1<a href="https://i.stack.imgur.com/YQ8yJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YQ8yJ.png" alt="enter image description here"></a></p>
  
  <p>The Organization is called based on its ID in the database.  The OwnedLocations are called based on all locations owned by the organizations ID.  Is there a way to list them under a different name instead of the ID? Here are the relevant files: </p>
  
  <p>OrganizationDetailComponent.ts</p>
  
  <pre><code>    import { Component, OnInit, ViewChild, HostListener } from '@angular/core';
  import { NgForm, FormBuilder } from '@angular/forms';
  import { Organizations } from '../../../../_models/organizations';
  import { AlertifyService } from '../../../../_services/alertify.service';
  import { ActivatedRoute, Router } from '@angular/router';
  import { AuthService } from '../../../../_services/auth.service';
  import { OrganizationService } from '../../../../_services/Organization.service';
  import { LocationService } from '../../../../_services/location.service';
  import { Locations } from '../../../../_models/locations';
  
  @Component({
    selector: 'app-organization-detail',
    templateUrl: './organization-detail.component.html',
    styleUrls: ['./organization-detail.component.scss']
  })
  export class OrganizationDetailComponent implements OnInit {
    @ViewChild('editForm', {static: true}) editForm: NgForm;
    organizations: Organizations;
    orgLocations: Locations[];
    currentDate = new Date();
    isActive = false;
    @HostListener('window:beforeunload', ['$event'])
    unloadNotidication($event: any) {
      if (this.editForm.dirty) {
        $event.returnValue = true;
      }
    }
  
    constructor(private organizationService: OrganizationService, private alertify: AlertifyService, private route: ActivatedRoute, private fb: FormBuilder,
      private router: Router, private authService: AuthService, private locationService: LocationService) { }
  
    ngOnInit() {
      this.getOrgLocations();
  
      this.route.data.subscribe(data =&gt; {
        this.organizations = data['organization'];
      });
    }
  
    loadOrganization() {
      this.organizationService.GetOrganization(+this.route.snapshot.params['id']).subscribe((organization: Organizations) =&gt; {
        this.organizations = organization;
      }, error =&gt; {
        this.alertify.error(error);
      });
    }
  
    getOrgLocations() {
      this.locationService.getOwnedLocations(+this.route.snapshot.params['id']).subscribe((orgLocations: Locations) =&gt; {
        orgLocations = orgLocations;
        console.log(orgLocations);
      }, error =&gt; {
        this.alertify.error(error);
      });
    }
  
    updateClient() {
      this.organizationService.updateOrganization(this.organizations.id, this.organizations).subscribe(next =&gt; {
        this.alertify.success('Client updated successfully');
        this.editForm.reset(this.loadOrganization());
      }, error =&gt; {
        this.alertify.error(error);
      });
    }
  }
  
  
    getOrgLocations() {
      this.locationService.getOwnedLocations(+this.route.snapshot.params['id']).subscribe((orgLocations: Locations) =&gt; {
        orgLocations = orgLocations;
        console.log(orgLocations);
      }, error =&gt; {
        this.alertify.error(error);
      });
    }
  
    updateClient() {
      this.organizationService.updateOrganization(this.organizations.id, this.organizations).subscribe(next =&gt; {
        this.alertify.success('Client updated successfully');
        this.editForm.reset(this.loadOrganization());
      }, error =&gt; {
        this.alertify.error(error);
      });
    }
  }
  </code></pre>
  
  <p>Location.Service.ts</p>
  
  <pre><code> import { Injectable } from '@angular/core';
  import { HttpClient, HttpHeaders } from '@angular/common/http';
  import { environment } from '../../environments/environment';
  import { Locations } from '../_models/locations';
  import { Observable} from 'rxjs';
  import { map } from 'rxjs/operators';
  
  const httpOptions = {
    headers: new HttpHeaders({
      'Authorization': 'Bearer ' + localStorage.getItem('token')
    })
  };
  
  @Injectable({
    providedIn: 'root'
  })
  
  export class LocationService {
    baseUrl = environment.apiUrl;
  
    constructor(private http: HttpClient) { }
  
    getLocations(): Observable&lt;Locations[]&gt; {
      return this.http.get&lt;Locations[]&gt;(this.baseUrl + 'locations', httpOptions);
    }
  
    getOwnedLocations(id): Observable&lt;Locations&gt; {
      return this.http.get&lt;Locations&gt;(this.baseUrl + 'locations/getorglocations/' + id, httpOptions);
    }
  
    getLocation(id): Observable&lt;Location&gt; {
      return this.http.get&lt;Location&gt;(this.baseUrl + 'locations/' + id, httpOptions);
    }
  
    CreateLocations(location: Locations) {
      return this.http.post(this.baseUrl + 'locations', location, httpOptions)
      .pipe(
        map((response: any) =&gt; {
          const locationId = response;
          if (locationId) {
            return locationId;
          }
        })
      );
    }
  }
  </code></pre>
  
  <p>Organization.Service.ts</p>
  
  <pre><code>    import { Injectable } from '@angular/core';
  import { HttpClient, HttpHeaders } from '@angular/common/http';
  import { environment } from '../../environments/environment';
  import { Observable} from 'rxjs';
  import { map } from 'rxjs/operators';
  import { Organizations } from '../_models/organizations';
  
  const httpOptions = {
    headers: new HttpHeaders({
      'Authorization': 'Bearer ' + localStorage.getItem('token')
    })
  };
  
  @Injectable({
    providedIn: 'root'
  })
  
  export class OrganizationService {
    baseUrl = environment.apiUrl;
  
    constructor(private http: HttpClient) { }
  
    getOrganizations(): Observable&lt;Organizations[]&gt; {
      return this.http.get&lt;Organizations[]&gt;(this.baseUrl + 'organizations', httpOptions);
    }
  
    GetOrganization(id): Observable&lt;Organizations&gt; {
      return this.http.get&lt;Organizations&gt;(this.baseUrl + 'organizations/' + id, httpOptions);
    }
  
    updateOrganization(id: number, organization: Organizations) {
      return this.http.put(this.baseUrl + 'organizations/' + id, organization);
    }
  
    CreateOrganization(organization: Organizations) {
      return this.http.post(this.baseUrl + 'organizations', organization)
      .pipe(
        map((response: any) =&gt; {
          const organizationId = response;
          if (organizationId) {
            return organizationId;
          }
        })
      );
    }
  }
  </code></pre>
  
  <p>Any insight would be greatly appreciated! </p>