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>