Angular 2 Frontend with Active Record Association in Rails 5 API

Question

Please help I have an API App in Rails and its huge part is dependent on Active Record Association, I want to understand how to consume relationship between active record models rendered by Rails API on my Angular 2 Frontend Application. For example:

I have a project.ts file with

export class Project {
  constructor( public id?: number,
    public title?: string, 
    public category_id?: number
  ) {} 
}

And a category.ts file with

export class Category {
  constructor(
   public id?: number, 
   public name?: string
  ) {}
}

also a category.rb model file with

class Category < ApplicationRecord
  has_many :projects
end

and a project.rb model file

class Project < ApplicationRecord
  belongs_to  :category
end

I have been able to implement the communication with the API from the Angular front end. In a rails view (an erb or haml) file if I want to get the category of a Project, I would do @project.category

With the code structure I have above how can I get the Category name instance of a Project using the category_id that i have in the project.ts file? How can I have access to the name and all other attribute of the Category, using category_id in the project.ts? since the JSON object rendered will only have the category_id, this example below did not work for me...

*ngFor = "let project of projects" 
project.category_id.name 

any ideas on how to fix this?

I was able to get the category name attribute into the JSON object using ActiveModelSerializer, my object now looks like this.

[
   {
    "category": {
        "id": 1,
        "name": "Mobile Development"
    },
    "category_id": 1,
    "description": "Contrary to popular belief, Lorem Ipsum is not simply random text. \n      It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.",
    "id": 22,
    "title": "Project 9 Test",
    "updated_at": "2016-12-23T05:30:05.098Z"
 },
]

When I try to access {{ project.category }} from the front end i get [object Object] {{ project.category_id }} returns a valid ID, any idea how I can access name attribute? when i tried {{ project.category.name }} it didn't work.

Answer 1

I was able to get this to working after validating that I got a JSON object on the front end. This is what my category.ts file now looks like. I hope this helps someone else. Angular Pipes are very useful check here to read more about it.

export class Category {
  constructor(
  public id?: number, 
  public name?: string
 ) {}
}

let category: Category = JSON.parse('{"id": id, "name": name}');

​Had to also validate that category name is available for all projects in the front end also with

<small *ngIf="project.category">Category: {{ project.category.name }}</small>​

If you are wondering what my ProjectsController index looks like, here it is. Also don't forget to create a category_serializer and project_serializer check ActiveModelSerializer documentation on how to do that.

def index
  @projects = Project.order('created_at DESC')
  render json: @projects, include: 'category.name'
end