Question

我的控制器中包含以下哈希值：

@suggested_places = {
      "0": "Barcelona",
      "1": "Madrid",
      "2": "Valencia"
    }

我将其转换为json：

@suggested_places_json = @suggested_places.to_json

以下是输出：

=> "{\"0\":\"Barcelona\",\"1\":\"Madrid\",\"2\":\"Valencia\"}"

在我的file.js.erb中，我想玩这些信息。我想将json解析为JavaScript对象。我这样做：

const json = "<%= @suggested_places_json %>";
console.log(json);

结果如下：

{&quot;0&quot;:&quot;Barcelona&quot;,&quot;1&quot;:&quot;Madrid&quot;,&quot;2&quot;:&quot;Valencia&quot;}

为什么我有一个丑陋的”而不是我在后端拥有的json？ json是一个字符串，应保留其格式。

如果我尝试解析它：

console.log(JSON.parse(json));

我得到以下结果：

Uncaught SyntaxError: Unexpected token & in JSON at position 1
    at JSON.parse (<anonymous>)
    at <anonymous>:6:18
    at processResponse (application-50000f29e1bf2752ae7e56dda39f10dd0f67a47aea5c3f07ed0d933f3e1a256a.js:268)
    at application-50000f29e1bf2752ae7e56dda39f10dd0f67a47aea5c3f07ed0d933f3e1a256a.js:196
    at XMLHttpRequest.xhr.onreadystatechange (application-50000f29e1bf2752ae7e56dda39f10dd0f67a47aea5c3f07ed0d933f3e1a256a.js:251)

有人可以帮助我找出我在哪里做错吗？我想念什么？

Answer 1

首先，您无法解析json输出，因为您已经放置了@ suggested_places.to_json，这样就足以获取数据，第二件事是正在生成JSON的（“）原因，所以如果想要删除此“您应该对输出进行解码或从输出中爆炸\“之类的字符，但是最好的方法是第一种对输出进行解码的方法

Answer 2

将数据从控制器传递到视图的两种方法：

选项1：

您从视图发送了一个json请求到控制器：

= link_to "load public places", load_public_places_path(format: :json), class: "btn btn-primary", remote: true, id: "loadPublicPlacesBtn"

在您的控制器中，您以json格式响应，并返回要返回的数据：

def load_public_places
    latitude = params[:lat]
    longitude = params[:lng]
    @suggested_places = NearBySearchApiService.call(latitude, longitude)

    respond_to do |format|
      format.json { render json: @suggested_places.to_json }
      format.js
    end

在要显示数据的视图中，侦听ajax请求：

:javascript
  document.getElementById('loadPublicPlacesBtn').addEventListener('ajax:success', function(event) {
    console.log(event);
  })

选项2：

在视图中，您向控制器发送JS请求：

  = link_to "load public places with js", load_public_places_path, class: "btn btn-primary", remote: true, id: "loadPublicPlacesBtn"

在控制器中，您回答js请求，该请求将在load_public_places.js.erb中

def load_public_places
    latitude = params[:lat]
    longitude = params[:lng]
    @suggested_places = NearBySearchApiService.call(latitude, longitude)

    respond_to do |format|
      # format.json { render json: @suggested_places.to_json }
      format.js
    end

这一次，由于您在视图中使用erb，因此可以使用实例变量@suggested_places而不调用to_json。

在视图中，选择所需的div，然后附加HTML内容（可以将其存储在部分内容中）

const divWrapper = document.getElementById("optionCardsWrapper");

divWrapper.innerHTML = "<%= j render "option_cards", suggested_places: @suggested_places %>";

@suggested_places是纯红宝石，您无需对其进行解析。

j是一个辅助方法，escape_javascript。

在局部视图中，您可以将信息用作普通的红宝石对象

%h1 option cards

- suggested_places.each do |place|
  = place[:name]

Answer 3

几年前在互联网上搜索我找到了这个解决方案，我在一个带有 rails 6 的应用程序中对其进行了测试，并且运行良好。

var contentLibrary = '<%= @content_library.to_json.html_safe %>'

console.log(contentLibrary) // {"id":1,"title":"Welcome","status":"active"

console.log(JSON.parse(contentLibrary)) // { id: 1, title: "Welcome", status: "active" }

<块引用>

Embedding JSON in a Rails 4 JS/ERB template

来自Rails的JSON对象未在.js.erb中进行解析

3 个答案: