Spring Data Rest HATEOAS Links and HTML Select Drop Down - angularjs

Question

This is my second question in a few days about working with spring data rest and HATEOAS links.
tl;dr
How can my application use the link for 'manyToOne' attribute to populate the 'current value' for an html select drop down?
"Spring data rest" generated links behave differently than with "old school ids".
Context
Converting an app to spring JPA and spring data rest.
Simple 'product/category' table structure per below
I've added a projection name 'full' to 'join/get' descriptions
Tables
*Product*
---------
Product ID
Product Name
Category ID
*Category*
---------
Category ID
Category Name
Spring Data Rest Domain Objects
Product
#Entity
#Table(name="products")
public class Products
{
private static final long serialVersionUID = 5697367593400296932L;
#Id
#GeneratedValue(strategy = GenerationType.AUTO)
public long id;
public String product_name;
#ManyToOne(optional = false,cascade= CascadeType.MERGE)
#JoinColumn(name = "category_id")
private ProductCategory productCategory;
public Products(){}
public long getId() {
return id;
}
public void setId(long id) {
this.id = id;
}
public Products(String product_name) {
this.product_name = product_name;
}
public String getProduct_name() {
return product_name;
}
public void setProduct_name(String product_name) {
this.product_name = product_name;
}
public ProductCategory getProductCategory()
{
return productCategory;
}
public void setProductCategory(ProductCategory pProductCategory)
{
productCategory = pProductCategory;
}
#Projection(name = "full", types = { Products.class })
interface VirtualProjection
{
String getProductName() ;
#Value("#{target.productCategory.category}")
String getCategory();
}
}
Product Category
#Entity
#Table(name="productcat")
public class ProductCategory implements Serializable{
private static final long serialVersionUID = 890485159724195243L;
#Id
#GeneratedValue(strategy = GenerationType.AUTO)
public long id;
public String category;
#OneToMany(mappedBy = "productCategory", cascade = CascadeType.ALL)
#JsonBackReference
Set<Products> products;
public long getId() {
return id;
}
public void setId(long id) {
this.id = id;
}
public String getCategory() {
return category;
}
public void setCategory(String category) {
this.category = category;
}
public Set<Products> getProducts() {
return products;
}
}
Problem: Impedance Mismatch between list of Categories, value in object
When the angular client retrieves a product, the product 'category link' for the product category looks like this:
href" : "http://localhost:8080/api/rest/products/8/productCategory"
When the client retrieves a list of 'product categories', the link for the category looks like this:
href": "http://localhost:8080/api/rest/productcat/4"
Here's the "select" code. The UI will only show select if "product.productCategory" maches one of the value for 'options'.
<select ng-model="product.productCategory >
<option value="http://localhost:8080/api/rest/productcat/1">Foo Product Type
</option>
<option value="http://localhost:8080/api/rest/productcat/2">Bar Product Type
</option>
<option value="http://localhost:8080/api/rest/productcat/3">Baz Product Type
</option>
</select>
Question
How do I code my server API to make "generated links" client
friendly? What's the Springiest approach?
Should I change the API to receive, for update, "values" rather than "IDs/Links", i.e. the Category Name,rather than the ID? (i.e. and look up the category by name and update it on the server side)
What javascript/angular tools and techniques do you recommend for working with links?

Answer 1

I coded around the problem by 'de-referencing' the "productCategory" value via javascript,
- retrieving the URL in the "productCategory" attribute, e.g.:
http://localhost:8080/api/rest/products/8/productCategory
replacing the "productCategory" attribute/url with the values from the HATEOAS links.
pItem[pPropName] = data._links.self.href;
This approach brings a lot of complexity for a simple drop down. It doesn't smell right.
De-reference code
function dereferenceProperty(pItem,pPropName )
{
var myRef = pItem._links[pPropName];
if (myRef && myRef.href)
{
var myUrl = myRef.href;
$http.get(myUrl).success(function (data, status)
{
pItem[pPropName] = data._links.self.href;
});
}
}
Usage
dereferenceProperty(pProduct,"productCategory");
After this 'de-refrence':
Angular/Browser populated the drop down correctly
an HTTP PATCH update the API (and tables) correctly

Answer 2

I don't completely understand what do you mean, but if you need to get Product list within ProductCategory or you need to get implicitly ProductCategory within Product you can use, for example, projections:
#Projection(name = "withProducts", types = ProductCategory.class)
public interface WithProducts {
String getName();
Set<Product> getProducts();
}
#Projection(name = "withCategory", types = Product.class)
public interface WithCategory {
String getName();
BigDecimal getPrice();
ProductCategory getCategory();
}
Then if you GET http://localhost:8080/api/productCategories/1?projection=withProducts you retrieve something like this:
{
"_embedded": {
"products": [
{
"name": "Product1",
"category": {
"name": "Category1"
},
"price": 1,
"_links": {
"self": {
"href": "http://localhost:8080/api/products/1"
},
"product": {
"href": "http://localhost:8080/api/products/1{?projection}",
"templated": true
},
"category": {
"href": "http://localhost:8080/api/products/1/category"
}
}
},
{
"name": "Product2",
"category": {
"name": "Category1"
},
"price": 2,
"_links": {
"self": {
"href": "http://localhost:8080/api/products/2"
},
"product": {
"href": "http://localhost:8080/api/products/2{?projection}",
"templated": true
},
"category": {
"href": "http://localhost:8080/api/products/2/category"
}
}
}
]
},
"_links": {
"self": {
"href": "http://localhost:8080/api/productCategories/1/products?projection=withCategory"
}
}
}
Or if you GET http://localhost:8080/api/products/1/category?projection=withProducts you retrieve something like this:
{
"name": "Category1",
"products": [
{
"name": "Product1",
"price": 1
},
{
"name": "Product2",
"price": 2
}
],
"_links": {
"self": {
"href": "http://localhost:8080/api/productCategories/1"
},
"productCategory": {
"href": "http://localhost:8080/api/productCategories/1{?projection}",
"templated": true
},
"products": {
"href": "http://localhost:8080/api/productCategories/1/products"
}
}
}
Working example.