如何將AngularJS json數組發布到Rails后端api？

Question

我有一個列表，每個列表可能包含0個或多個項目。 我是Angularjs的新手，我正在使用angularJS $ resource張貼到我的rails后端API，以使用項目創建此列表。 如果我創建如下所示的測試數組並使用ListItem.save $scope.test則此POST成功完成到我的Rails后端api。

$scope.test = 'item_id': '55' 'qty': '6' 'uom': 'each'

由Api :: V1 :: ListItemsController＃create作為JSON處理

參數：{“ item_id” =>“ 55”，“ qty” =>“ 6”，“ uom” =>“ each”，“ list_id” =>“ 14”，“ list_item” => {“ item_id” => “ 55”，“ qty” =>“ 6”，“ uom” =>“每個”}}}列表加載（0.1ms）選擇“ lists”。*從“ lists”中“ lists”。“ id” =？ LIMIT 1 [[“ id”，14]]（0.1ms）開始事務SQ​​L（0.3ms）插入“ list_items”（“ item_id”，“ qty”，“ uom”，“ list_id”，“ created_at”，“ updated_at “）值（？，？，？，？，？，？）[[” item_id“，55]，[” qty“，6]，[” uom“，” each“]，[” list_id“，14] ，[“ created_at”，“ 2015-06-06 06：14：12.844167”]，[“ updated_at”，“ 2015-06-06 06：14：12.844167”]]（2.0ms）提交事務在7ms內完成200 OK （觀看次數：0.5ms | ActiveRecord：2.6ms） woohoo!!!

但是，當我在控制器中創建一個json數組並嘗試保存該數組時，事情很快就會崩潰。 然后這不會成功完成（以下錯誤）

[ { "item_id": 32, "qty": "1", "uom": "Dozen" } ]

由Api :: V1 :: ListItemsController＃create作為JSON處理

參數：{“ _json” => [{“ item_id” => 34，“ qty” =>“ 1”，“ uom” =>“每個”}]]，“ list_id” =>“ 14”，“ list_item” = > {}}列表加載（0.1毫秒），選擇“列表”。*從“列表”，在“列表”中。“ id” =？ LIMIT 1 [[“ id”，14]]在2毫秒內完成了400錯誤請求ActionController :: ParameterMissing（參數缺失或值為空：list_item）：app / controllers / api / v1 / list_items_controller.rb：50：in listItem_params' app/controllers/api/v1/list_items_controller.rb:21:in create'

我什至嘗試使用ListItem.save {list_item: $scope.final}將list_item對象添加到json數組，然后在下面收到另一個錯誤。

由Api :: V1 :: ListItemsController＃create作為JSON處理

參數：{“ list_item” => [{“ item_id” => 30，“ qty” =>“ 1”，“ uom” =>“ Each”}]，“ list_id” =>“ 14”}列表加載（0.1 ms）選擇“列表”。*從“列表”中選擇“列表”。“ id” =？ LIMIT 1 [[“ id”，14]]在2毫秒內完成了500個內部服務器錯誤NoMethodError（ permit' for [{"item_id"=>30, "qty"=>"1", "uom"=>"Each"}]:Array): app/controllers/api/v1/list_items_controller.rb:50:in listItem_params'app / controllers / api / v1 / list_items_controller.rb：21：in'create'

list_items_controller

    module Api
  module V1
class ListItemsController < ApplicationController
  protect_from_forgery
  skip_before_action :verify_authenticity_token, :if => Proc.new { |c| c.request.format == 'application/json' }
  before_action :set_list
  respond_to :json

  def index
    respond_with ListItem.all
  end

  def new
  end

  def create
    @li = @list.list_items.new(listItem_params)
      if @li.save
        render :status => 200,
           :json => { :success => true,
                      :info => "ItemAdded",
                      :data => { :item => @li }}
      else
        render :status => :unprocessable_entity,
           :json => { :success => false,
                      :info => resource.errors,
                      :data => {} }                              
      end
  end

  private
    # Use callbacks to share common setup or constraints between actions.
    def set_list
      @list = List.find(params[:list_id])
    end

    def listItem_params
      params.require(:list_item).permit(:list_id, :item_id, :qty, :uom)
           end
      protected

        def json_request?
          request.format.json?
        end
    end
  end
end

清單。咖啡（相關章節）

    app = angular.module('myApp', [ 'ngResource' ])

ListItem = app.factory('ListItem', ($resource) ->

  $resource '/api/v1/lists/14/list_items/:id', { id: '@id' }, update: method: 'PUT'
)
app.controller 'myCtrl', ($scope, ListItem) ->
  $scope.selection = []
  $scope.final = []
  $scope.test =
  'item_id': '55'
  'qty': '6'
  'uom': 'each'

  $scope.saveListItems = ()->
    i = 0
    while i < $scope.selection.length
      obj = $scope.selection[i]
      $scope.final.push 
        'item_id': obj.id
        'qty': obj.qty
        'uom': obj.uom
      li= ""
      li = ListItem.save $scope.final
      i++

例如，當我將一個項目添加到選擇中時，選擇數組將包含以下內容。

[
  {
    "id": 32,
    "name": "Eggs",
    "created_at": "2015-04-29T00:14:19.627Z",
    "updated_at": "2015-04-29T00:14:19.627Z",
    "user_id": null,
    "qty": "1",
    "uom": "Dozen"
  }
 ]

當我單擊確認按鈕時，將執行saveListItems函數

<button class="btn btn-lg btn-primary" ng-click="saveListItems()">Confirm</button>

運行saveListItems函數后，最終數組包含以下內容：

[
  {
    "item_id": 32,
    "qty": "1",
    "uom": "Dozen"
  }
]

我想讓angularjs正確構建數組，以便它將新列表項成功發布到我的rails后端api。 對於如何解決這個問題，有任何的建議嗎？

Answer 1

我在這里發現了一個類似的SO問題， 如何在rails后端將Angular表單保存到我的紅寶石中？

而不是使用$ resource，我在saveListItems函數中使用了$ http，如下所示：

  $scope.saveListItems = ->
    i = 0
    while i < $scope.selection.length
      obj = $scope.selection[i]
      $scope.final = 'list_item':
        'item_id': obj.id
        'qty': obj.qty
        'uom': obj.uom
      $http
        method: 'POST'
        url: 'http://192.168.0.6:3000/api/v1/lists/14/list_items'
        data: $scope.final
      return
      i++

接下來，我將$ http服務包含在控制器中，如下所示：

app.controller 'myCtrl', ($scope, ListItem, $http) ->

重新測試，它的工作！

由Api :: V1 :: ListItemsController＃create作為JSON處理

參數：{“ list_item” => {“ item_id” => 56，“ qty” =>“ 2”，“ uom” =>“十二”}，“ list_id” =>“ 14”}列表加載（0.2ms）選擇“列表”。*從“列表”中選擇“列表”。“ id” =？ LIMIT 1 [[“ id”，14]]（0.1ms）開始事務SQ​​L（0.4ms）插入“ list_items”（“ item_id”，“ qty”，“ uom”，“ list_id”，“ created_at”，“ updated_at “）值（？，？，？，？，？，？）[[” item_id“，56]，[” qty“，2]，[” uom“，”十二“]，[” list_id“，14] ，[“ created_at”，“ 2015-06-06 23：50：30.564950”]，[“ updated_at”，“ 2015-06-06 23：50：30.564950”]]（1.8ms）提交事務在6ms內完成200 OK （觀看次數：0.4ms | ActiveRecord： waahoo!! ） waahoo!!

然后，我使用$ resource重新測試，但更改了saveListItems函數，如下所示：

  $scope.saveListItems = ->
    i = 0
    while i < $scope.selection.length
      obj = $scope.selection[i]
      $scope.final = 'list_item':
        'item_id': obj.id
        'qty': obj.qty
        'uom': obj.uom
      ListItem.save($scope.final)
      i++


    return

接下來，我從控制器中刪除了$ http服務

app.controller 'myCtrl', ($scope, ListItem) ->

這也有效！

由Api :: V1 :: ListItemsController＃create作為JSON處理

參數：{“ list_item” => {“ item_id” => 60，“ qty” =>“ 4”，“ uom” =>“每個”}，“ list_id” =>“ 14”}列表加載（0.2ms）選擇“列表”。*從“列表”中選擇“列表”。“ id” =？ LIMIT 1 [[“ id”，14]]（0.1ms）開始事務SQ​​L（0.4ms）插入“ list_items”（“ item_id”，“ qty”，“ uom”，“ list_id”，“ created_at”，“ updated_at “）值（？，？，？，？，？，？）[[” item_id“，60]，[” qty“，4]，[” uom“，”每個“]，[” list_id“，14] ，[“ created_at”，“ 2015-06-07 00：27：12.125078”]，[“ updated_at”，“ 2015-06-07 00：27：12.125078”]]（2.2ms）提交事務在8ms內完成200 OK （觀看次數：0.5ms | ActiveRecord：2.8ms）

希望此信息對其他人有幫助。 我確信這段代碼可以使用一些嚴肅的重構，盡管我仍在學習Angularjs，所以這是我的免責聲明：）