javascript - 如何在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],...

代码出错

Uncaught SyntaxError: Unexpected token :

当我在 JSON 中使用转义符时，它在 rails unexpected $undefined 上给我错误。期待 ')。

JSON 对象使用双引号，我想在我的代码中使用它。我应该如何进行才能不添加 > 等。

Answer 1

我认为你需要做的是首先在你的助手中将你的 Ruby Hash 转换成 json

def edmunds_json      
  the_json_object.to_json
end code here

然后在你的脚本标签 View 中做这样的事情

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