JSON Имя объекта возвращается как идентификатор

Question

учу Angular и NET ядро. В моем веб-приложении, которое я создаю, у меня есть два объекта, которые возвращаются на странице сведений об организации. Они следующие:

• Организация (извлекается через API и предоставляет подробные сведения об организации, такой как OrganizationName, StreetAddress, PhoneNumber, FirstName, LastName и т. Д.)
• OwnedLocations (A список всех местоположений, которыми владеет организация, и сведения об этих местоположениях. IE: LocationName, ContactFirstName, ContactLastName, PhoneNumber, StreetAddress и т. д.).

Я столкнулся с проблемой, когда эти данные были получены. Они перечислены в возвращенном объекте json с именем 1

Организация вызывается на основе ее идентификатора в базе данных. OwnedLocations вызывается на основе всех местоположений, принадлежащих идентификатору организации. Есть ли способ перечислить их под другим именем вместо идентификатора? Вот соответствующие файлы:

OrganizationDetailComponent.ts

    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 => {
      this.organizations = data['organization'];
    });
  }

  loadOrganization() {
    this.organizationService.GetOrganization(+this.route.snapshot.params['id']).subscribe((organization: Organizations) => {
      this.organizations = organization;
    }, error => {
      this.alertify.error(error);
    });
  }

  getOrgLocations() {
    this.locationService.getOwnedLocations(+this.route.snapshot.params['id']).subscribe((orgLocations: Locations) => {
      orgLocations = orgLocations;
      console.log(orgLocations);
    }, error => {
      this.alertify.error(error);
    });
  }

  updateClient() {
    this.organizationService.updateOrganization(this.organizations.id, this.organizations).subscribe(next => {
      this.alertify.success('Client updated successfully');
      this.editForm.reset(this.loadOrganization());
    }, error => {
      this.alertify.error(error);
    });
  }
}


  getOrgLocations() {
    this.locationService.getOwnedLocations(+this.route.snapshot.params['id']).subscribe((orgLocations: Locations) => {
      orgLocations = orgLocations;
      console.log(orgLocations);
    }, error => {
      this.alertify.error(error);
    });
  }

  updateClient() {
    this.organizationService.updateOrganization(this.organizations.id, this.organizations).subscribe(next => {
      this.alertify.success('Client updated successfully');
      this.editForm.reset(this.loadOrganization());
    }, error => {
      this.alertify.error(error);
    });
  }
}

Location.Service.ts

 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<Locations[]> {
    return this.http.get<Locations[]>(this.baseUrl + 'locations', httpOptions);
  }

  getOwnedLocations(id): Observable<Locations> {
    return this.http.get<Locations>(this.baseUrl + 'locations/getorglocations/' + id, httpOptions);
  }

  getLocation(id): Observable<Location> {
    return this.http.get<Location>(this.baseUrl + 'locations/' + id, httpOptions);
  }

  CreateLocations(location: Locations) {
    return this.http.post(this.baseUrl + 'locations', location, httpOptions)
    .pipe(
      map((response: any) => {
        const locationId = response;
        if (locationId) {
          return locationId;
        }
      })
    );
  }
}

Organization.Service.ts

    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<Organizations[]> {
    return this.http.get<Organizations[]>(this.baseUrl + 'organizations', httpOptions);
  }

  GetOrganization(id): Observable<Organizations> {
    return this.http.get<Organizations>(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) => {
        const organizationId = response;
        if (organizationId) {
          return organizationId;
        }
      })
    );
  }
}

Любое понимание будет с благодарностью!

Answer 1

Отображается как 1 для обоих запросов, поскольку это конечная точка обоих URL.

this.http.get<Location>(this.baseUrl + 'locations/' + id, httpOptions);

this.http.get<Organizations>(this.baseUrl + 'organizations/' + id, httpOptions);

На сетевой странице браузера обычно отображаются запросы с использованием их конечных точек. Который в вашем случае будет id для обоих URL. Однако сам URL-адрес не совпадает. Они также возвращают различные объекты на основе упомянутых типов (Location и Organizations). Таким образом, JSON обработка не будет затронута во внешнем интерфейсе.

Вы могли бы, если бы вы sh фильтровали запросы, используя любую часть URL в сети браузера стр. Например, если вы фильтруете по ключевому слову locations, будет показан только один 1, который соответствует URL this.baseUrl + 'locations/' + id. Аналогично, при использовании ключевого слова organizations будет отображаться только один 1 для URL this.baseUrl + 'organizations/' + id.

.