如何在 Rails 中使用 JSON 數據並將其提供給 javascript

Question

我有一個 Rails 應用程序，其中包含 JSON 數據，如下所示：

{"makes":[{"id":200347864,"name":"AM General","niceName":"am-general","models":[{"id":"AM_General_Hummer","name":"Hummer","niceName":"hummer","years":[{"id":3407,"year":1998},{"id":1140,"year":1999},{"id":305,"year":2000}]}]}]}

這是一個非常長的具有多級嵌套的汽車對象列表。 品牌、型號、年份、裝飾等。

我想將此 JSON 發送到 javascript 並填充我的自動填充下拉菜單。

以前，我使用的是第三方 API，代碼如下所示：

$( document ).ready(function() {


    var prev ="https://xyz/makes";
    var rest ="?fmt=json&api_key=";
    var key = "<%= ENV['XYZ_API_KEY'] %>";
    var net = prev+rest+key;

    var options = [];
    options.push("All");
    var dictionary = {};

         $.ajax({

            url: net,
            dataType: "json",
            type: "get", 
            data: $(this).serialize()
         }).done(function(data){
            change_make(data);
            change_model();
         });




    function change_make(data) {

        for (var key in data["makes"]){
            if (data["makes"].hasOwnProperty(key)){

                var make = data["makes"][key];

                options.push(make.name);

                buffer = [];

                // console.log(make.models);

                for (var key2 in make.models){

                    // console.log(make.models[key2].name);

                    if (make.models.hasOwnProperty(key2)){

                        // console.log(make.models[key2].name);

                        buffer.push(make.models[key2].name);
                    }

                }


                dictionary[make.name] = buffer;

            }
        }

        dictionary["All"] = ["All"]

        // console.log(options);

        $.each(options, function(key, value) {   
             $('#category')
                 .append($("<option></option>")                            
                    .attr("value", value.html_safe)
                    .text(value));  
        });    

    };



    $('#category').on('change', function(){


        console.log("change success");

        change_model();



    });


    function change_model(){

        var make = $('#category').find(":selected").text();        
        var models = dictionary[make];
        // models.unshift("All");

        $('#subcategory').empty();

        $.each(models, function(key, value) {   
             $('#subcategory')                
                 .append($("<option></option>")                            
                    .attr("value",value.html_safe)
                    .text(value));  
        });
    }    

    $("#searchboxcontainer").delay(100).fadeIn(200);   


});

而不是使用ajax請求，我想直接使用json字符串。 我在應用程序助手模塊中編寫了一個助手方法，如下所示：

 def edmunds_json      
  the_json_object
 end

但是當我在 javascript 中使用它時，它添加 &gm 字符和對象出來為：

{:makes=>[{:id=>200347864, :name=>"AM General ”,...

並且代碼給出了錯誤

未捕獲的語法錯誤：意外標記：

當我在 JSON 中使用轉義時，它給了我 rails unexpected $undefined. expecting ')上的錯誤unexpected $undefined. expecting ') unexpected $undefined. expecting ') 。

JSON 對象使用雙引號，我想在我的代碼中使用它。 我應該如何進行，以便不會添加 &gt 等。

Answer 1

我認為您需要做的是首先在您的助手中將您的 Ruby Hash 轉換為 json

def edmunds_json      
  the_json_object.to_json
end code here

然后在腳本標記中的視圖中執行以下操作

<script>
  const object = <%= raw edmunds_json %>
  console.log(typeof(object)) // => Object
</script>

Answer 2

通過使用解決它：

<%= get_make_model_json.to_s.gsub("=>",":").html_safe %>; 在 JavaScript 中

get_make_model_json 在哪里：

def get_make_model_json      
      JSON.parse(
        '{
  "makes": [{
    "id": 200347864,
    "name": "AM General",
    "niceName": "am-general",
    "models": [{
      "id": "AM_General_Hummer",
      "name": "Hummer",
      "niceName": "hummer",
      "years": [{
        "id": 3407,
        "year": 1998
      }, {
        "id": 1140,
        "year": 1999
      }, {
        "id": 305,
        "year": 2000
      }]
    }]
  },...
end