通过JS AJAX调用调用Rails控制器数据

时间:2017-09-29 20:53:13

标签: javascript jquery ruby-on-rails ajax api

我在控制器中使用此代码制作一个rails应用程序来调用API-我最初调用inventories endpoint,然后单独调用另外两个id端点store_id, product_id来抓取特定的部分与库存相关的数据。这些数据被传递到一个哈希,变成'@inventories / transformation results':

class InventoriesController < ApplicationController
 def index
 response = Typhoeus.get("http://lcboapi.com/inventories")
 parsed_json = JSON.parse(response.body)

transformed_results = []

parsed_json["result"].each do |inventory|
  transformed_results.push(
    {
      product_name: product_lookup(inventory["product_id"]),
      store_name: store_lookup(inventory["store_id"]),
      quantity: inventory["quantity"],
    }
  )
end

@inventories = transformed_results
end
  private

  def store_lookup(store_id)
  response = Typhoeus.get("http://lcboapi.com/stores/#{store_id}")
    parsed_json = JSON.parse(response.body)
  return parsed_json["result"]["name"]
end

 def product_lookup(product_id)
 response = Typhoeus.get("http://lcboapi.com/products/#{product_id}")
     parsed_json = JSON.parse(response.body)
 return parsed_json["result"]["name"]
 end
end

我的问题是如何最好地通过AJAX将我的json哈希变成我可以通过并在assets / javascript中迭代的表单。

我知道我可以将它构建到视图(html.erb)并且已经这样做了,但我想让我的数据与DOM元素交互。

注意:我尝试过一个简单的控制台日志,将控制台中的json数据显示为测试,没有响应。我可以使用jQuery直到我对React感到满意,但是我不确定如何从'assets / javascript / inventoryories.js'获取我的@inventories数据 - 例如,如果我想抓住某些东西从csv数据库我会使用以下内容,但在这种情况下,它并不完全存在:

document.addEventListener('DOMContentLoaded', function () {
  console.log("ready!");
  $.ajax({
url: "/inventories",
method: "GET"
 }).done(function(data){
    var products = []
    data.forEach(function(item){
      products.push(item.product_name).toString();
      console.log(products);
    });
  });

})

1 个答案:

答案 0 :(得分:0)

在您的一个js文件中(assets/javascript),您需要执行以下操作:

storeLookupResults = $.ajax({
  url: "/inventories.js",
  type: 'GET'
})
storeLookupResults.success (data) =>
  # do stuff with your results
  # 'data' will contain your json

注意:我编写了路线,因此您需要确保使用真实路线

然后,在InventoriesController中,将index修改为:

def index
  response = Typhoeus.get("http://lcboapi.com/inventories")
  parsed_json = JSON.parse(response.body).with_indifferent_access

  @inventories = parsed_json[:result].map do |inventory|
    {
      product_name: product_lookup(inventory[:product_id]),
      store_name: store_lookup(inventory[:store_id]),
      quantity: inventory[:quantity],
    }
  end

  respond_to do |format|
    format.html
    format.json {render json: @inventories, status: :ok}
  end  

end

请注意,.map会返回array。所以,你不必这样做:

transformed_results = []

parsed_json["result"].each do |inventory|
  transformed_results.push(
    {
      product_name: product_lookup(inventory["product_id"]),
      store_name: store_lookup(inventory["store_id"]),
      quantity: inventory["quantity"],
    }
  )
end    

@inventories = transformed_results

还要注意我做了:

parsed_json = JSON.parse(response.body).with_indifferent_access

这是一种纯粹的风格偏好。我喜欢使用符号而不是字符串。