Как использовать вложенный ресурс отдыха в Angular?

Question

Я использую Angular 5 для веб-интерфейса. Этот веб-интерфейс использует конечные точки отдыха в серверной службе, написанной с использованием данных Java и Spring. Это конечные точки, такие как:

http://localhost:8080/

{
  "_links" : {
    "accounts" : {
      "href" : "http://localhost:8080/accounts{?page,size,sort}",
      "templated" : true
    },
    "build-and-test-submissions" : {
      "href" : "http://localhost:8080/build-and-test-submissions{?page,size,sort}",
      "templated" : true
    },
    "build-submissions" : {
      "href" : "http://localhost:8080/build-submissions{?page,size,sort}",
      "templated" : true
    },
    "profile" : {
      "href" : "http://localhost:8080/profile"
    }
  }
}

Конечные точки build-and-test-submissions и build-submissions вызывают серьезную озабоченность в этом проекте.

http://localhost:8080/build-and-test-submissions

    {
  "_embedded" : {
    "build-and-test-submissions" : [ {
      "changeListId" : "23967925",
      "postedAt" : null,
      "lastUpdatedAt" : null,
      "_links" : {
        "self" : {
          "href" : "http://localhost:8080/build-and-test-submissions/1"
        },
        "buildAndTestSubmission" : {
          "href" : "http://localhost:8080/build-and-test-submissions/1"
        },
        "buildSubmission" : {
          "href" : "http://localhost:8080/build-and-test-submissions/1/buildSubmission"
        },
        "account" : {
          "href" : "http://localhost:8080/build-and-test-submissions/1/account"
        }
      }
    },  ]
  },
  "_links" : {
    "self" : {
      "href" : "http://localhost:8080/build-and-test-submissions{?page,size,sort}",
      "templated" : true
    },
    "profile" : {
      "href" : "http://localhost:8080/profile/build-and-test-submissions"
    },
    "search" : {
      "href" : "http://localhost:8080/build-and-test-submissions/search"
    }
  },
  "page" : {
    "size" : 20,
    "totalElements" : 5,
    "totalPages" : 1,
    "number" : 0
  }
}

http://localhost:8080/build-submissions

   {
      "_embedded" : {
        "build-submissions" : [ {
          "nvBranchName" : "some_branch",
          "nvPackageName" : "some_package",
          "isBuildSubmitted" : false,
          "isBuildCompleted" : false,
          "isTestSubmitted" : false,
          "isTestCompleted" : false,
          "packageLocation" : "",
          "jobId" : -1,
          "_links" : {
            "self" : {
              "href" : "http://localhost:8080/build-submissions/1"
            },
            "buildSubmission" : {
              "href" : "http://localhost:8080/build-submissions/1"
            },
            "buildAndTestSubmission" : {
              "href" : "http://localhost:8080/build-submissions/1/buildAndTestSubmissionParent"
            }
          }
        }, ... ]
      },
      "_links" : {
        "self" : {
          "href" : "http://localhost:8080/build-submissions{?page,size,sort}",
          "templated" : true
        },
        "profile" : {
          "href" : "http://localhost:8080/profile/build-submissions"
        },
        "search" : {
          "href" : "http://localhost:8080/build-submissions/search"
        }
      },
      "page" : {
        "size" : 20,
        "totalElements" : 5,
        "totalPages" : 1,
        "number" : 0
      }
    }

сборка-и-отправка и сборка-отправка - это корабль отношений 1: 1. Мой вопрос:

В большинстве угловых уроков показано, как использовать httpclient для получения простого не вложенного объекта, используя пример, подобный приведенному ниже:

this.http.get('http://localhost:9000/build-and-test-submissions')
            .subscribe((response: any) => {
              let buildAndTests: any[] = response;



                this.products = response;
                this.onProductsChanged.next(this.products);
                resolve(response);
            }, reject);
    });

Но как мне получить http для объектов с отношением? Например. Должен ли я вложить http get объекта build-and-test-submission и объекта build-submission?

Answer 1

Прежде всего я бы сделал console.log (buildAndTests), чтобы увидеть структуру

this.http.get('http://localhost:9000/build-and-test-submissions')
        .subscribe((response: any) => {
          let buildAndTests: any[] = response;

           console.log( buildAndTests );
           console.log( buildAndTests._links.self.href );


            this.products = response;
            this.onProductsChanged.next(this.products);
            resolve(response);
        }, reject);
});

тогда вы можете начать пытаться, пока не получите то, что вам нужно, например, если вы оцениваете

buildAndTests._links.self.href должен вернуть "http://localhost:8080/build-and-test-submissions/1"