Rails is returning html instead of json

Question

I'm doing the Pro AngularJS book's tutorial. Instead of using deployd I'm using rails on the backend. I'm trying to load in products using JSON via /api/v1/products but when I printout the results the response is the layout html instead of json.

routes.rb

resources :store, only: :index
get '*app', to: 'store#index'

resources :products, only: :index
resources :sessions

namespace :api, constraints: {format: :json}, defaults: {format: :json} do
  namespace :v1 do
    resources :products
    resources :orders do
      resources :products
    end
  end
end

products_controller.rb

class Api::V1::ProductsController < ApplicationController

  respond_to :json

  def index
    @products = Product.all

    respond_with @products
  end
end

productListController.js

var plCtrl = this;
plCtrl.data = {};

$http.get("/api/v1/products")
.success(function(data){
  plCtrl.data.products = data;
  console.log(plCtrl.data.products);
})
.error(function(error){
  plCtrl.data.error = error;
});

development.log

Started GET "/" for ::1 at 2015-11-08 10:16:39 -0600
  [1m[36mActiveRecord::SchemaMigration Load (29.5ms)[0m  [1mSELECT `schema_migrations`.* FROM `schema_migrations`[0m
Processing by StoreController#index as HTML
  Rendered store/index.html.slim within layouts/application (31.0ms)
  Rendered layouts/_navigation_links.html.slim (2.3ms)
  [1m[35mUser Load (0.5ms)[0m  SELECT  `users`.* FROM `users` WHERE `users`.`password_digest` = '$2a$10$FFHrMCASASl8cNMumUC8ZuNwTiZUmoe5i0i.jBW2./.h5iVlNxLZa' LIMIT 1
  Rendered layouts/_navigation.html.slim (70.6ms)
  Rendered layouts/_messages.html.slim (5.1ms)
Completed 200 OK in 916ms (Views: 898.1ms | ActiveRecord: 17.7ms)


Started GET "/" for ::1 at 2015-11-08 10:16:43 -0600
Processing by StoreController#index as HTML
  Rendered store/index.html.slim within layouts/application (0.0ms)
  Rendered layouts/_navigation_links.html.slim (0.0ms)
  [1m[36mUser Load (0.3ms)[0m  [1mSELECT  `users`.* FROM `users` WHERE `users`.`password_digest` = '$2a$10$FFHrMCASASl8cNMumUC8ZuNwTiZUmoe5i0i.jBW2./.h5iVlNxLZa' LIMIT 1[0m
  Rendered layouts/_navigation.html.slim (2.2ms)
  Rendered layouts/_messages.html.slim (0.0ms)
Completed 200 OK in 120ms (Views: 119.1ms | ActiveRecord: 0.3ms)


Started GET "/assets/users-539b1b2d248fcacaf845c897cae976a6.css?body=1" for ::1 at 2015-11-08 10:16:43 -0600


Started GET "/assets/products-539b1b2d248fcacaf845c897cae976a6.css?body=1" for ::1 at 2015-11-08 10:16:43 -0600


Started GET "/assets/application-8dd662d13284733bbe54eda20bb23cc6.js?body=1" for ::1 at 2015-11-08 10:16:43 -0600


Started GET "/assets/jquery-cebd6aebb61826123f8c2609ef491120.js?body=1" for ::1 at 2015-11-08 10:16:43 -0600


Started GET "/assets/jquery_ujs-e37afeff66df4b941f3d0e5103f67860.js?body=1" for ::1 at 2015-11-08 10:16:43 -0600


Started GET "/assets/framework_and_overrides-59b1f67c44fcf715fcb2e3d8898788ac.css?body=1" for ::1 at 2015-11-08 10:16:43 -0600


Started GET "/assets/stores-539b1b2d248fcacaf845c897cae976a6.css?body=1" for ::1 at 2015-11-08 10:16:43 -0600


Started GET "/assets/application-5c74ddfe9ec142533cae4e72117a6749.css?body=1" for ::1 at 2015-11-08 10:16:43 -0600


Started GET "/assets/angular-6e1e5cba38bc1135b8f51b46fe8b1817.js?body=1" for ::1 at 2015-11-08 10:16:43 -0600


Started GET "/assets/angular-resource-750afd404dad9b9a65500978142d97e6.js?body=1" for ::1 at 2015-11-08 10:16:43 -0600


Started GET "/assets/angular-ui-router-a716fee384609b743dd55ab0468bf63f.js?body=1" for ::1 at 2015-11-08 10:16:43 -0600


Started GET "/assets/store/controllers/productListControllers-347157b211789b303302e8bcc711500b.js?body=1" for ::1 at 2015-11-08 10:16:43 -0600


Started GET "/assets/angular-ui-router/angular-ui-router-a716fee384609b743dd55ab0468bf63f.js?body=1" for ::1 at 2015-11-08 10:16:43 -0600


Started GET "/assets/store/app-5e5e1b9c4edcec361da040220caec84c.js?body=1" for ::1 at 2015-11-08 10:16:43 -0600


Started GET "/assets/angular-resource/angular-resource-750afd404dad9b9a65500978142d97e6.js?body=1" for ::1 at 2015-11-08 10:16:43 -0600


Started GET "/assets/angular/angular-6e1e5cba38bc1135b8f51b46fe8b1817.js?body=1" for ::1 at 2015-11-08 10:16:43 -0600


Started GET "/assets/store/filters/customFilters-bfac291ac9405f569cf8cd59b6d64108.js?body=1" for ::1 at 2015-11-08 10:16:43 -0600


Started GET "/assets/store/templates/index-c54274a6b50c826831690b83850c84c1.html" for ::1 at 2015-11-08 10:16:43 -0600


Started GET "/api/v1/products" for ::1 at 2015-11-08 10:16:43 -0600
Processing by StoreController#index as HTML
  Parameters: {"app"=>"api/v1/products"}
  Rendered store/index.html.slim within layouts/application (0.0ms)
  Rendered layouts/_navigation_links.html.slim (0.0ms)
  [1m[35mUser Load (0.3ms)[0m  SELECT  `users`.* FROM `users` WHERE `users`.`password_digest` = '$2a$10$FFHrMCASASl8cNMumUC8ZuNwTiZUmoe5i0i.jBW2./.h5iVlNxLZa' LIMIT 1
  Rendered layouts/_navigation.html.slim (2.9ms)
  Rendered layouts/_messages.html.slim (0.1ms)
Completed 200 OK in 154ms (Views: 153.4ms | ActiveRecord: 0.3ms)

Answer 1

You will need to do something like this

respond_to do |format|
  format.json { render :json => @products }
end

instead of your respond_with @products

Answer 2

The logs show that HTML is requested:

Started GET "/api/v1/products" for ::1 at 2015-11-08 10:16:43 -0600 Processing by StoreController#index as HTML Parameters: {"app"=>"api/v1/products"}

try to call for json instead:

$http.get("/api/v1/products.json")