jsonangularhal-json

Angular - convert HAL to JSON


The following service extracts category objects from a REST service which returns them in HAL format. Now I try to convert that response into JSON. For that I searched and tried different solutions, e.g. chariotsolutions or so. Some are based on Response from '@angular/http' which is deprecated and which I cannot make work.

How can I do the conversion?

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

import { Observable } from 'rxjs/Rx';
import { of } from 'rxjs/observable/of';
import 'rxjs/Rx';
import 'rxjs/add/operator/map';

import { Category } from './category';

@Injectable()
export class CategoryService {

  private categoriesUrl = 'http://localhost:8080/account/categories';

  constructor(private http: HttpClient) { }

  getCategories(): Observable<Category[]> {
    return this.http.get<Category[]>(this.categoriesUrl);
  }

}

The response as HAL

{
  "_embedded": {
    "categories": [
      {
        "id": 1,
        "name": "hardware",
        "description": "comprises all computer hardware",
        "level": "FIRST",
        "_links": {
          "self": {
            "href": "http://localhost:8080/account/categories/1"
          },
          "categoryEntity": {
            "href": "http://localhost:8080/account/categories/1"
          }
        }
      },
      {
        "id": 2,
        "name": "hardware_notebook",
        "description": "all notebooks",
        "level": "SECOND",
        "_links": {
          "self": {
            "href": "http://localhost:8080/account/categories/2"
          },
          "categoryEntity": {
            "href": "http://localhost:8080/account/categories/2"
          }
        }
      }
    ]
  },
  "_links": {
    "self": {
      "href": "http://localhost:8080/account/categories{?page,size,sort}",
      "templated": true
    },
    "profile": {
      "href": "http://localhost:8080/account/profile/categories"
    }
  },
  "page": {
    "size": 20,
    "totalElements": 8,
    "totalPages": 1,
    "number": 0
  }
}

Solution

  • getCategories(): Observable<Category[]> {
        return this.http.get<Category[]>(this.categoriesUrl)
            .map((result:any)=>{
               console.log(result); //<--it's an object
               //result={"_embedded": {"categories": [..]..}
               return result._embedded.categories; //just return "categories"
            });
    }
    

    With Rjxs 6.0 we must use pipe(map)

    getCategories(): Observable<Category[]> {
        return this.http.get<Category[]>(this.categoriesUrl).pipe(
            map((result:any)=>{
               console.log(result); //<--it's an object
               //result={"_embedded": {"categories": [..]..}
               return result._embedded.categories; //just return "categories"
            }));
    }