CODEWITHSUNDEEP
javascriptruby-on-railsjsonangularrest
Procy
Procy

Reputation: 57

How to get data from json in rails 6 into Angular?

I'm a new in js/angular, I want to write some "trello-like" app using rails 6 and Angular 10. I'm already have controllers, db and seeds in rails app. My app contains 3 tables. In these 3 projects I should be able to add tasks with these properties: text - task's name; isCompleted- bollean parameter, which shows the completion of the task by checkbox.

My db scheme:

    t.string "title"
    t.datetime "created_at", precision: 6, null: false
    t.datetime "updated_at", precision: 6, null: false
  end

  create_table "todos", force: :cascade do |t|
    t.string "text"
    t.boolean "isCompleted"
    t.datetime "created_at", precision: 6, null: false
    t.datetime "updated_at", precision: 6, null: false
    t.integer "project_id"
  end

projects_contoller:

class ProjectsController < ApplicationController
  def index 
    @projects = Project.all
    render json: @projects, include: :todos
  end

  def show
    @projects = Project.find(params[:id])
    render json: @project, include: :todos
  end

  def create
    @project = Project.new(title: params[:title])
    if @project.save
      render json: @project, status: :created
    else
      render json: @project.errors, status: :unprocessable_entity
    end
  end
end

todos_controller: (tasks controller)

class TodosController < ApplicationController
  def index
    @todos = Todo.all
    render json: @todos
  end

  def show
    @todo = Todo.find(params[:id])
    render json: @todo
  end

  def create
    @todo = Todo.new(text: params[:text], isCompleted: params[:isCompleted], project_id: params[:project_id])
      if @todo.save
        render json: @todo, status: :created
        @project = Project.find(@todo.project_id)
      else
        render json: @todo.errors, status: unprocessable_entity
      end
  end

  def update
    @todo = Todo.find(params[:id])
    if(params.has_key?(:isCompleted))
      @todo.update(isCompleted: params[:isCompleted])
    end
  end
end

And example of json seed file:

#Project data
project = Project.create([{
  "title": "Family"
}])

project2 = Project.create([{
  "title": "Work"
}])

project3 = Project.create([{
  "title": "Other"
}])

#OtherData
todos = Todo.create!([
  {
    "text": "Buy a milk",
    "isCompleted": false,
    "project_id": 1
  },
  {
    "text": "Send the letter",
    "isCompleted": false,
    "project_id": 1
  },
  {
    "text": "Pay rent",
    "isCompleted": false,
    "project_id": 1
  },
  {
    "text": "Take the shoes",
    "isCompleted": false,
    "project_id": 1
  },
  {
    "text": "Call the client",
    "isCompleted": true,
    "project_id": 2
  },
  {
    "text": "Send documents",
    "isCompleted": true,
    "project_id": 2
  },
  {
    "text": "Do smth",
    "isCompleted": false,
    "project_id": 2
  },
  {
    "text": "Call friend",
    "isCompleted": false,
    "project_id": 3
  },
  {
    "text": "Go to the trip",
    "isCompleted": false,
    "project_id": 3
  },
])

I think I should use ngFor cycle for showing data, and I'm try it by wrote this in my app.component.ts:

import { Component } from '@angular/core';
import { Http } from '@angular/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {
  title = 'TodoList from Procy';
  projects;
  todos;

  constructor(private http: Http) {
    http.get('http://localhost:3000/projects.json')
      .subscribe(res => this.projects = res.json());
  }
}

And then writing this in app.component.html:

<h1>
  {{title}}
</h1>

<ul>
  <li *ngFor="let project of projects">{{ project.title }}</li>
  <li *ngFor="let todo of todos">{{ todo.text }}</li>
</ul>

This show me all data. How can I separate them by projects?

Upvotes: 1

Views: 371

Answers (1)

alexvdvalk
alexvdvalk

Reputation: 1234

You are using the old HTTP Client. The new one is called 'httpClient' and is imported from '@angular/common/http'. You do not need to call the .json() function on the result. So update your app component like this:

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {
  title = 'TodoList from Procy';
  projects;
  todos;

  constructor(private http: httpClient) {
    http.get('http://localhost:3000/projects.json')
      .subscribe(res => this.projects = res);
  }
}

I am answering based on the Angular code, so you will also need to make sure that your server is returning a valid JSON object.

Upvotes: 4

Related Questions